1 Vue模板语法

　　Vue模板语法分为两大类，插值语法和指令语法

1.1 插值语法

　　1）功能：用于解析标签体内容

　　2）写法：{{xxx}}

　　　　xxx是js表达式，且可以直接读取到vue实例里面的属性

　　3）示例

1.2 指令语法

　　1）功能：用于解析标签(包括：标签属性、标签体内容、时间绑定......)

　　2）比如v-bind:    v-model: 等等指令

2 数据绑定

2.1 差值语法{{}}

"root">
    
hello {{name * 2}}

2.2 v-bind单向绑定

　　通过单向绑定数据

"root">
    
hello {{name * 2}}
    
    "url">百度一下 


    
    "phone"/>


    
    "phone"/>

2.3 v-model 双向绑定

"root">
    

    
    "phone"/>

    
    "phone"/>

注意，双向绑定只能用于表单元素

2.4 单向绑定和双向绑定的区别

　　单向绑定，date的属性的值变化会影响容器，容器里面变化不会影响data的值

　　双向绑定，date的属性的值变化会影响容器，容器里面变化会影响data的值

　　示例　

"root">
    
    单向绑定："phone"/>

    
    双向绑定："phone"/>

效果

 现在，我们在单向绑定的输入框，输入新的手机号码，发现data里面的phone没有发生变化

 现在，我们在双向绑定的输入框，输入新的手机号码，发现data里面的phone同步发生变化，同时因为data的phone属性变化，单向绑定输入框现实的值也变化了

2.5 小结

3 Vue实例中el的两种写法和date的两种写法

3.1 el的两种写法

3.1.1 第一种

　　直接在data里面写el属性的值

3.1.2 第二种

　　使用$mount

3.2 data的两种写法

3.2.1 第一种对象式

　　直接写个对象

3.2.2 第二种函数式

　　把data写成一个函数，这个函数必须返回一个对象

const v =  new Vue({ 
        data:function(){
            return {
            name:'123',
            url:'www.baidu.com',
            phone:'15874859687'
          }
        }
    })

 我们来看一下是谁调用的这个函数，打印下this，发现是Vue实例

　　这个函数还可以简写

const v =  new Vue({ 
        data(){
            console.log('调用者：' , this)
            return {
            name:'123',
            url:'www.baidu.com',
            phone:'15874859687'
          }
        }
    })

3.3 小结