常见其他指令：
v-model ：https://cn.vuejs.org/v2/guide/forms.html
v-bind：
v-bind 属性绑定 src ：
<div id="box"> <!--:属性名称 是一种简写--> <img :src="vuejsLogo" alt="vuejs logo"> <!--完整的写法--> <!-- v-bind 是用于给HTML标签进行属性设置。如果要给标签设置属性，不能使用 插值表达式，必须使用v-bind 进行绑定--> <img v-bind:src="vuejsLogo" alt=""> <img v-bind:src="'https://cn.vuejs.org/images/logo.png'" alt=""> // 使用单引号也可 </div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
vuejsLogo: 'https://cn.vuejs.org/images/logo.png',
}
})
</script>
v-bind 属性绑定 class: 使用vuejs 进行动态绑定 例如 <div :class="[className1, className2, ' bg ' ]"></div>
v-bind 属性绑定 style: 如果动态设置模型变量，则模型的变量的值必须是对象方式。
v-on：
v-on修饰符
.stop: 等同于调用 event. stopPropagation()。
.prevent: 等同于调用 event.preventDefault()。
.capture: 使用 capture 模式添加事件监听器。
.self: 只当事件是从监听元素本身触发时才触发回调。
v-on 用于vuejs进行事件的处理，v-on可以简写@
所有事件的回调函数都必须写在methods属性里面，
methods里面的函数可以简写（es6语法）
methods里面不可以使用箭头函数
methods里面的函数名，不要和模型变量重名
事件绑定：函数命名 clickHandlerModifer 业内的规范：事件的类型 + Handler + 修饰；
vue里面的事件的回调函数加上括号和不加有啥区别？
答：如果不加，默认会给传递事件对象 。如果加上了括号，需要手工的传递事件源 '$event' 名称固定，还可以传递其他的参数。在vuejs事件的回调函数是否需要加上括号，完全取决于是否需要传递其他的参数如果需要则要加上括号，并且一个参数我们一般都会传递 '$event'。
使用Vuejs 购物车案例（简易版）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .cart{ width:1000px; border:1px dashed red; height: 500px; margin: 10px auto; } table tr{background: bisque;} </style> </head> <body> <div class="cart" id="cartApp"> <h2>我的购物车</h2> <table> <thead> <tr> <th><input type="checkbox" v-model="selectAll" @change="checkItemStatus">全选</th> <th>商品名称</th> <th>商品信息</th> <th>单价</th> <th>数量</th> <th style=" 50px;">小计</th> <th style=" 50px;">操作</th> </tr> </thead> <tbody> <tr v-for="ele in cartListData"> <td><input type="checkbox" v-model="ele.isSelected"></td> <td><a href="" ><img :src="ele.img"></a><p>{{ele.goodsName}}</p></td> <td>{{ele.desc}}</td> <td>￥{{ele.price}}</td> <td ><input type="number" v-model.number="ele.goodsNumber" style=" 50px;"></td> <td>￥<span>{{toFixed1(ele.goodsNumber * ele.price,3) }}</span></td> <td><a @click="removeGoods(ele)">删除</a></td> </tr> </tbody> <tfoot> <tr style="background: white;"> <td>购物金额总计：<span>￥</span>{{toFixed1(cartListTotalPrice(),3)}}</td> </tr> </tfoot> </table> </div> </body> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script> var cartListData = [ { id: 1, isSelected: false, goodsName: '【1 购物狂欢节】惠JackJones杰克琼斯纯羊毛菱形格', price: 1.1, img: './img/cart_goods1.jpg', desc: '颜色：073深红', goodsNumber: 1 }, { id: 2, isSelected: true, goodsName: '【11.11 购物狂欢节】羊毛菱形格', price: 3.2, img: './img/cart_goods1.jpg', desc: '颜色：3深红', goodsNumber: 1 }, { id: 3, isSelected: true, goodsName: '【6.18 】羊毛菱形格', price: 5.5, img: './img/cart_goods1.jpg', desc: '颜色：深红', goodsNumber: 1 } ]; var vm=new Vue({ el:'#cartApp', data:{ cartListData, }, computed:{ selectAll:{ set(val){ this.cartListData.forEach((ele, index) => { ele.isSelected = val; }); }, get(){ return this.cartListData.every(function (ele) { return ele.isSelected; }) } } }, methods:{ toFixed1(inputs,params){ return inputs.toFixed(params); }, cartListTotalPrice(){ var total=0; this.cartListData.forEach(function(ele,index){ if(ele.isSelected ){ total+=ele.goodsNumber * ele.price ; } }) return total ; }, removeGoods(currentGoods){ console.log(currentGoods); this.cartListData=this.cartListData.filter(function(ele,index){ return currentGoods!==ele ; }) }, checkItemStatus(){ this.cartListData.forEach((ele,index)=>{ ele.isSelected=this.selectAll; }); } } }); </script> </html>
比较简易，可以做很多优化，比如商品数量设置上限和下限等，仅供学习参考！