vue系列---------vuejs基础学习2.1

常见其他指令：

　　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>

比较简易，可以做很多优化，比如商品数量设置上限和下限等，仅供学习参考！

集思广益，仅供学习，侵权即删！！