vue学习：单向绑定(v-bind)和双向绑定(v-model)

单向绑定和双向绑定*

• 单向绑定
  v-html、v-text、插值表达式{{}}、v-bind都是单向绑定，即数据改变，页面元素也会跟着改变；而页面元素改变时，数据并不会跟着变。
  v-bind是对html标签的属性进行绑定，其缩写为冒号（:）,例如：(v-bind:href)可以写为(:href)。
  以v-bind为例来说明单向绑定：

<!-- 给html标签的属性绑定 -->
<div id="app">
    <a v-bind:href="link">ogogo</a>
    <span :class="{active:isActive,'text-danger':hasErr}">你好</span>
    <span :style="{color:color1,fontSize:size}">哈哈</span>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data:{
            link:"http://www.baidu.com",
            isActive:true,
            hasErr:true,
            color1:'red',
            size:'60px'
        }
    });
</script>

以上代码中link为"http://www.baidu.com"，当点击超链接ogogo时将会跳转到百度页面，另外，按F12可以看到在vue实例中显示的是"http://www.baidu.com"：

在控制台将link修改为"http://www.qq.com"，此时点击ogogo时将会跳转到QQ页面，另外vue实例中显示的也变成 了"http://www.qq.com"：

哈哈两字本身为红色：

当修改页面元素将红色变为蓝色时，vue实例中并不会跟着变为蓝色：

• 双向绑定
  v-model可以实现页面和数据的双向绑定，数据变化时页面会跟着变，同理页面变化时数据也会同步变。
  v-model示例如下：

<div id="app">
    精通的语言：
    <input type="checkbox" v-model="language" value="java">java<br/>
    <input type="checkbox" v-model="language" value="python">python<br/>
    <input type="checkbox" v-model="language" value="css">css<br/>
    被选中的是：{{language.join(",")}}

</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data:{
            language:[]
        }
    });
</script>

当在控制台将languge修改为’‘java’‘和’‘css’‘时，页面也会跟着就，选中了这两个选项：

当页面选中’‘java’‘和’‘python"时，数据也会跟着变为’‘java’‘和’'python"：