vue数据绑定。

数据绑定

单向数据绑定、双向数据绑定。

单向数据绑定

vue对象怎么使用，点这里回顾。

自下而上的单向数据绑定，下是指前端页面看不到的js，上是指展示在页面上的html。可用于不需要用户输入信息且需要及时更新后台数据的地方。（可理解为设置后台数据只读）

绑定标签，使用v-bind
- 绑定标签的value、title等
- v-bind:value="属性名"或:value="属性名"
非标签，使用插值表达式
- 插值表达式的使用，点这里回顾。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 这是View  现在就是templet模板-->
<div id="app">
    <!-- v-开头的都是指令，有Vue提供的特殊属性 -->
    <span v-bind:title='message'>   <!-- 绑定标签用v-bind 非标签则{{xxxx}} -->
        鼠标停在这儿看看【动态绑定】的提示信息！{{ message }}
        <!-- vm.message = 'yes!!!' 则会改变title提示的信息-->
    </span>
    <input type="text" :value="message"> 
    <!-- 注意v-bind是单项绑定 -->
    <!-- <input type="text" v-model="message"> -->
</div>
<script>
    var vm = new Vue
    (
        {
            el: '#app', 
            data:   // 这是Model 
            {
                message: '哼!哼!哼!哼!哼!哼!'
            },
        }
    )
</script>

单向数据绑定，修改文本框中的数据，并不会更新后台message属性的值。

双向数据绑定

vue对象怎么使用，点这里回顾。

v-model双向数据绑定，前台更新数据后会立刻更新后台中的数据。可用于需要用户输入信息且需要及时更新后台数据的地方。（可理解为设置后台数据可读写）

绑定标签，使用v-model
- 绑定标签的value、title等
- v-model:value="属性名"或v-model="属性名" value="value值"（单选框、多选框等没有输入框接受数据的元素，建议使用后者）

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 这是View  现在就是templet模板-->
<div id="app">
    <!-- v-开头的都是指令，有Vue提供的特殊属性 -->
    <span v-bind:title='message'>   <!-- 绑定标签用v-bind 非标签则{{xxxx}} -->
        鼠标停在这儿看看【动态绑定】的提示信息！
        <!-- vm.message = 'yes!!!' 则会改变title提示的信息-->
    </span>
    <!-- <input type="text" v-bind:value="message">  -->
    <!-- 注意v-bind是单项绑定 -->
    <input type="text" v-model="message"><br>
		<input type="text" v-model:value="message">
</div>
<script>
    var vm = new Vue
    (
        {
            el: '#app', 
            data:   // 这是Model 
            {
                message: '哼!哼!哼!哼!哼!哼!'
            },
        }
    )
</script>

双向数据绑定，修改文本框中的数据，会立刻更新后台message属性的值。

应用

v-model双向数据绑定：v-model="属性名" value="value值"

焦点变更时才更新数据(上边的例子中，是立即更新），v-model.lazy="属性名"
vue对象中保存数据的属性（变量）为布尔值
- 属性名: false
vue对象中保存数据的属性为数组
- 属性名: [ ]

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 这是View  现在就是templet模板-->
<div id="app">
    <input type="text" v-model.lazy="a_0"/>
    <!-- .lazy（焦点变更即更新） .number（只留数字） .trim（去首尾空格）等等 -->
    <br>
    {{ a_0 }}
    <br>
    <input type="checkbox" v-model="a_1"/>我想
    {{ a_1 }}
    <p>你想选啥？
        <input type="checkbox" v-model="a_2" value="1号"/>1号
        <input type="checkbox" v-model="a_2" value="2号"/>2号
        <input type="checkbox" v-model="a_2" value="3号"/>3号
    </p>
    {{ a_2 }}
    <p>你最最最想选啥？
        <input type="radio" v-model="a_3" value="1号"/>1号
        <input type="radio" v-model="a_3" value="2号"/>2号
        <input type="radio" v-model="a_3" value="3号"/>3号
    </p>
    {{ a_3 }}
    <!-- 演示这个目的：我们不用去读取DOM节点里的状态，而是获得绑定的变量 -->
    <!-- 演示这个目的：我们不用去读取DOM节点里的状态，而是获得绑定的变量 -->
    <!-- 演示这个目的：我们不用去读取DOM节点里的状态，而是获得绑定的变量 -->
</div>
<script>
    var vm = new Vue
    (
        {
            el: '#app', 
            data:   // 这是Model 
            {
                a_0: '',
                a_1: false,
                a_2: [],
                a_3: '',
            },
        }
    )
</script>

我们不需要去操作DOM，只需要交给VUE去做即可。这就是使用VUE框架的好处。