一、模板语法

1.1 内容

Vue中的元素内容使用mustache模板引擎进行解析。https://github.com/janl/mustache.js

1.2 指令

指令会影响元素的渲染行为，指令始终以v-开头。

1.2.1 基础指令

v-for：循环渲染元素

           名称：{{item.name}} 
           删除
       

v-html：设置元素的innerHTML，该指令会导致元素的模板内容失效

    

    
    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            data:{     
                htmlTitle:`
库存管理系统`, 
            },
        });
    

v-on：注册事件。该指令由于十分常用，因此提供了简写@；事件支持一些指令修饰符，如prevent，阻止元素的默认行为。stop,阻止事件冒泡；事件参数会自动传递。

    

        Hello方式一
        Hello方式二
        阻止元素的默认行为

        

             阻止事件冒泡
        

        事件参数一
        事件参数二
    
    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            methods:{
                hello(){
                    console.log("Hello");
                },
                world(){
                    console.log("World");
                },

                test(e){
                    console.log("Test",e);
                }
            }
        });
    

v-bind：绑定动态属性。该指令由于十分常用，因此提供了简写:

    

        

    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            data:{     
                imgUrl:"https://upload.jianshu.io/users/upload_avatars/9571610/9dc14649-4d1b-415c-9a07-23b59d116d31.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp", 
            },
        });
    

v-show：控制元素可见度

    

        切换显示
    
    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            data:{     
                isShow: false,
                imgUrl: "https://upload.jianshu.io/users/upload_avatars/9571610/9dc14649-4d1b-415c-9a07-23b59d116d31.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp", 
            },
        });
    

v-show

v-show只是控制元素是否显示，即使元素不显示，元素也会生成，这样虚拟DOM的结构改动会小。

v-if、v-else-if、v-else：控制元素生成

                名称：{{item.name}} 
                -
                {{item.stock}}
                无货
                +
            
        

如果元素不显示，则不生成元素。

v-model：双向数据绑定，常用于表单元素。该指令是v-on和v-bind的复合版

    

        
{{text}}
        
        

    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            data:{     
                text:"AlanChen",
            },
        });
    

1.2.2 进阶指令

• v-slot：插槽
• v-test
• v-pre
• v-cloak
• v-once
• 自定义指令

1.3 特殊属性

最重要的特殊属性：key，该属性可以干预diff算法，在同一层级，key值相同的节点会进行比对，key值不同的节点则不会。

    

        

            手机号：
            


        

            邮箱：
            


        

            切换登录方式
        
    
    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            data:{     
                loginType:"mobile",
            },
        });
    

手机登录

切换到邮箱登录

从手机登录方式切换到邮箱登录方式，输入的手机号码也带过来了。用diff算法演示如下：

input没设置key时

我们要给两个input标签分别设置key值

      

            手机号：
            


        

            邮箱：
            

input设置key后

在循环生成的节点中，Vue强烈建议给予每个节点唯一且稳定的key值（一般用数据的ID）

    

        
        
        
系统名称：{{title}}
        


                名称：{{item.name}} 
                -
                {{item.stock}}
                无货
                +

                删除
            
        

    
        // vm：Vue实例
        var vm = new Vue({       //配置对象
            el:"#app",  // css选择器
            data:{      //和界面相关的数据
                title:"库存管理系统",
                products:[
                    {id:"1",name:"iphone",stock:10},
                    {id:"2",name:"xiaomi",stock:5},
                    {id:"3",name:"huawei",stock:6},
                ],
            },
            methods:{
                remove(i){
                    this.products.splice(i,1);
                },
                changeStock(product,newStock){
                    if(newStock<0){
                        newStock = 0;
                    }
                    product.stock = newStock;
                }
            },
        });
    

DOM树

二、计算属性

计算属性和方法的区别：
1、计算属性可以赋值，而方法不行
2、计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算
3、凡是根据已有数据计算得到新数据的无参函数，都应该尽量写成计算属性，而不是方法

    

        
姓：{{lastName}}
        
名：{{firstName}}
        
全名（拼装）：{{firstName+lastName}}
        
全名（计算属性）：{{fullName}}
        
全名（方法）：{{getFullName()}}
        
{{count}}
        自增
    
    
        // vm：Vue实例
        var vm = new Vue({       
            el:"#app",  
            data:{     
                firstName:"Alan",
                lastName:"Chen",
                count:0,
            },
            
           // 计算属性
            computed:{
                // fullName(){
                //     console.log("computed fullName");
                //     return this.firstName+this.lastName;
                // }


                // 计算属性可以赋值
                fullName:{
                    get(){
                        console.log("computed fullName");
                        return this.firstName+this.lastName;
                    },
                    
                    set(val){
                        console.log(val);
                        this.lastName=val[0];
                        this.lastName=val.substr(1);
                    } 
                }
            },

            methods:{
                getFullName(){
                    console.log("methods getFullName");
                    return this.firstName+this.lastName;
                }
            }
        });
    

默认效果

计算属性和methods的区别？

源码

源码 002