目录

mustache表达式写法

vue常用指令

v-bind多种绑定事件

技能提升

---

第一部分：mustache表达式写法

加减乘除等

            

{{firstName}}-{{lastName}}

            

{{firstName}}+{{lastName}}

            

{{firstName+'-'+lastName}}

            

{{count*2}}

            

{{count/2}}

        

        

第二部分：vue常用指令

大类一：插值的多种使用方法

在讲述插值的多种使用方法前，我们先回顾之前Es6的内容，for遍历，for in，for of 以及forEach，在这里我们不使用forEach所以我们就不做重点解读。在下面的插值多种使用方法中，我们将采用for in 及for of的两种方法，在这里与Es6的写法有点区别，es6 中for in的写法是for（let index in  keys）而for  of的写法是 for（let  item of  keys）但在这里的使用统一是以下写法：v-for = " item  in  keys"的形式或者v-for = "（item，index）  in  keys"的形式。

根据上面引入的写法形式，下面我们来讲述一下多种插值使用方法：

js共用部分（多个使用方法的结合）：

    const vm = new Vue({
                el:'#root',
                data(){
                    return{
                todolist:['足球','篮球','排球','羽毛球'],
                
                obj:{
                    a:'张三',
                    b:'李四',
                    c:'王五',
                    d:'王强'
                }    
                    
                obj2:[
                    {
                    a:'张三',    
                    },
                    {
                    b:'李四',
                    },
                    {
                    c:'王五',    
                    },
                ]

第一种：利用for循环遍历

{{item}}

第二种：

{{item}}

第三种：

{{item.a}}{{item.b}}{{item.c}}

 第四种：

{{item}}-{{index}}

             

以上几种方法，可以将in改为of，实现同样的数据

大类二：v-once  

  

            
            

{{msg}}

            
            

{{msg}}

            
        

        
        

以上综合案例：

    
        
        

        +
        

{{count}}

        -
            

        

大类三：v-html

   

            
            点我百度一下
        

        
        

大类四：v-text具有覆盖功能，可将内容给覆盖成传入的内容

        

{{message}},啧啧啧

        
        
        

啧啧啧

    

        
        

大类五：v-pre相同内容直接不执行

 

           

{{msg}}

        
        

{{msg}}

      

        
        

大类六：v-cloak不受刷新的影响闪跳

注：添加css样式时，需要使用[  ] 包裹着v-cloak才可以

    
    
        

            

{{msg}}

        

        

第三部分： v-bind多种绑定事件

大类一：v-bind和v-for 结合

            

                {item}} -->
                
• {{item}}


            

        

        

大类二：src是图片在网上的地址，URL是本地路径

 
        

            
            
        

        

大类三：v-bind绑定对象

    
    
        

            {msg}} -->
            

{{msg}}

        

        

大类五：v-bind动态绑定class对象方法：

    

            
            

我们爱学习

            

我们爱学习

            

我们爱学习

        

        
        

大类六：v-bind动态绑定style（数组语法）方法：

            

我们爱学习

            

我们爱学习

            

我们爱学习

        

        

第四部分：技能提升

为有效解决在项目中，需要将ul中的li分为多块部分，每一块部分控制的区域不同，在给ul设置值时，根据我们的选择，使某个li起到被ul控制的效果，下面就会根据上面的内容相结合实现如下的效果：

    
    
        

            

                
• 1234

                
• 576847