Vue06 数据绑定

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'
          }
        }
    })

 

3.3 小结