1 Vue模板语法

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

1.1 插值语法

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

　　2）写法：{{xxx}}

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

　　3）示例

1.2 指令语法

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

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

2 数据绑定

2.1 差值语法{{}}

<div id="root">

    <h1>hello {{name * 2}}</h1>

</div>

<script type="text/javascript" >

    new Vue({

        el:'#root',

        data:{

            name:'123'

        }

    })

</script>

2.2 v-bind单向绑定

　　通过单向绑定数据

<div id="root">

    <h1>hello {{name * 2}}</h1>

    <!-- href属性绑定date的url -->

    <a v-bind:href="url">百度一下</a> <br/>


    <!-- value属性绑定phone属性 -->

    <input v-bind:value="phone"/><br/>


    <!-- v-bind:可以简写成:  -->

    <input :value="phone"/>

</div>

<script type="text/javascript" >

    new Vue({

        el:'#root',

        data:{

            name:'123',

            url:'www.baidu.com',

            phone:'15874859687'

        }

    })

</script>

2.3 v-model 双向绑定

<div id="root">

    <!-- value属性绑定phone属性 -->

    <input v-model:value="phone"/><br/>

    <!-- 可以简写成:  -->

    <input v-model="phone"/>

</div>

<script type="text/javascript" >

    new Vue({

        el:'#root',

        data:{

            name:'123',

            url:'www.baidu.com',

            phone:'15874859687'

        }

    })

</script>

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

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

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

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

　　示例　

<div id="root">

    <!-- 单向绑定 -->

    单向绑定：<input :value="phone"/><br/>

    <!-- 双向绑定  -->

    双向绑定：<input v-model="phone"/>

</div>

<script type="text/javascript" >

    new Vue({

        el:'#root',

        data:{

            name:'123',

            url:'www.baidu.com',

            phone:'15874859687'

        }

    })

</script>

效果

现在，我们在单向绑定的输入框，输入新的手机号码，发现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'

          }

        }

    })

巴特西

Vue06 数据绑定