哎！~公司新来的前端Vue里的 v-bind v-model 指令都拎不清

1.v-bind

1. v-bind(简写 ：)用于动态绑定html标签属性

   1. 语法：

      1. v-bind:attrname="数据"

      2. :attrname="数据“

      3. v-bind=对象

         1. v-bind="{name:'张三',age:18}"==>v-bind:name="张三" v-bind:age="18"

         2. v-bind="{name:name,age:age}"==>v-bind:name="name" v-bind:age="age"

            此时对象的值在这里是变量，是data里的变量

      4. Vue中class 属性是一个特殊的属性 ，使用v-bind绑定时有很多不同的用法

         1. v-bind：class="'hello'"

            1. 此时 hello为字符串 ，代表给class加上hello这个类名

         2. v-bind：class="hello"

            1. 此时hello为vue实例中data的属性，代表给class加上hello代理属性对应的类名

         3. v-bind：class="{key1:value1,key2:value2}"

            1. 根据value1这个数据是否为真值，来控制是否要加上key1这个 类名

            2. 根据value2这个数据是否为真值，来控制是否要加上key2这个 类名

               v-bind:class="{ active: isActive, 'text-danger': hasError }"
               v-bind:class="[isActive ? activeClass : '', errorClass]"
               

         4. 数组 v-bind:class="[value1, 'value2',value3，{key:value}]"

            1. 使用value1这个数据的值来作为其中一个l类名
            2. 使用value2这个字符串来作为其中一个l类名
            3. 使用value3这个数据的值来作为其中一个l类名
            4. 根据value这个数据是否为真值，来控制是否要加上key这个 类名

      5. Vue中style 属性是一个特殊的属性 ，使用v-bind绑定时有很多不同的用法

         1. v-bind:style="color : red" 这种是错误的写法会报错

         2. v-bind：style="{key1:value1,key2:value2，key3：'value3'}"

            key1、key2、key3、都是css的属性名

            value1的值作为key1这个css属性名的值

            value2的值作为key2这个css属性名的值

            value3这个字符串会作为key3这个css属性名的值

              v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
            

         3. v-bind:style="[value1, value2,{color:myColor}]"

            使用value1这个数据来控制，data中的value1必须为对象{font-size：‘20px’}

            使用value2这个数据来控制，data中的value2必须为对象{font-size：‘20px’}

            使用myColor这个数据来控制color属性的值

2.v-model

1. v-model 将数据与表单相关元素 input、textarea、select绑定起来，实现双向数据绑定

2. 1.input为输入框的时候，v-model就双向绑定了输入框的值和data里对应的代理属性的值

3. 当为单选框的时候设置v-model且data对应的代理属性一致，那么就 可以单选，且绑定值

4. 多选框,定义一组数组类型的数据，然后通过v-model绑定到多选框上就可以了

   <label><input type="checkbox" value="apple" v-model="loveFruits" />apple</label>
   <label><input type="checkbox" value="banana" v-model="loveFruits" />banana</label>
   <label><input type="checkbox" value="orange" v-model="loveFruits" />orange</label>
   

5. 下拉选择框，v-model要绑定到select上，myCity不是数组

   <select v-model="myCity">
       <option value="shenzhen">深圳</option>
       <option value="shanghai">上海</option>
       <option value="guangzhou">广州 </option>
   	<option value="beijing">北京</option>
   </select>
   

   多选下拉选择框，v-model要绑定到select上，loveCity是数组

   <select v-model="loveCity">
       <option value="shenzhen">深圳</option>
       <option value="shanghai">上海</option>
       <option value="guangzhou">广州 </option>
   	<option value="beijing">北京</option>
   </select>
   

6. 多行文本输入框 ，v-model绑定到textarea

7. v-mode有三个修饰符

   1. v-mode.lazy 相当于change事件，比如失去焦点
   2. v-mode.number 文本框的值变成number型
   3. v-mode.trim 给文本去除前后空格

8. v-mode其实是一个语法糖（写起来方便，让我们甜甜的）

   <input type="text" v-model="msg" />
       ===
   <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value" />
   

！！！ 以上是DaXiong本人对前端知识的理解总结，如内容知识有错误可以留言修改。

！！！如果以上内容帮助到了你，点击一下赞或者收藏吧！