vue搭建购物车

撰写于 2017-07-10 修改于 2017-07-17

创建package.json

npm init
cnpm install vue -save安装在默认库
cnpm install vue – save
cnpm install vue-resource –save
-dev安装在开发环境

构建vue实例

    `var vm = new Vue({
         el:"#app",//绑定在class :app范围里面
        data:{
             title:"hello vue"
        },//模型，所有的模型改变都会反向作用于我们的DOM
        filters:{},//局部过滤器
        mounted:function () {

        },
        methods:{

        }//事件动作绑定
    });
vue.filter()//全局过滤器`

v-for指令渲染产品数据，渲染商品信息

v-bind修改属性

绑定元素，增加元素的属性
绑定class是数组形式
例如
v-bind:class="{'md-show':delFlag}"
在class中添加md-show属性为delFlag，通过js文件里面data数据控制
defFlag是否为真
v-bind 指令用于响应地更新 HTML 特性形式如：v-bind:href 缩写为 :href;

v-text缩写

通过双括号绑定!

v-html

以HTML形式渲染

v-if

v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；
v-if="delFlag"
如果delFlag为true则渲染 v-if所在行的元素，否则不渲染

v-show

v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；

v-else

v-else 必须跟在v-if/v-show指令之后，不然不起作用；
如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的表达式为false，则else元素显示在页面上；

v-for

遍历js里面的data数据
例如
v-for="(item,index) in filterAddress"
filterAddress可以是data里面数据也可以是computed实时计算后的数据

v-on

v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click
例如

`v-on:click="changemoney(item,1)"`

v-model

v-model实时数据绑定到js，双向绑定
v-model=”item.productQuantity”