小王的学习笔记（十四）——vue数据渲染、事件处理、表单输入与绑定

数据渲染

1. 基本数据渲染
   {{}} 内容可以为表达式，可以进行简单的逻辑运算

2. 条件渲染
   v-if='':：可以为布尔类型 表达式
   根据条件判断，控制当前的节点是否显示到页面中，符合条件，如果不符合条件，不显示，不会被挂载在dom树上
   v-else： 前一兄弟元素必须有 v-if 或 v-else-if
v-show：判断当前的条件是否成立，成立则显示在页面上，不成立则增加display:none，依旧会挂载在dom树上
   v-if有更高的切换消耗，而v-show有更高的初始渲染消耗；因此，如果是频繁切换，就用v-show；如果元素可能永远也不会被显示出来被用户看到， 则推荐使用 v-if

3. 循环渲染
   v-for：vue中有复用政策，为了防止重复渲染，保证高效率的渲染，增加key可以标识组件的唯一性，有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

   <div v-for="(item index) in arr" :key='item.id'></div>
   

   v-for和v-if一般不做嵌套使用，如果发生嵌套，v-for的优先级更高

4. v-text 只是识别渲染文本，v-html会解析HTML标签然后进行数据渲染

5. v-once 只在第一次执行时渲染数据，如果数据发生变化不会重新渲染

6. v-bind 绑定属性 ，简写:，动态的绑定一个或多个属性。

事件处理、表单输入绑定

1. v-on绑定事件，简写@
   事件修饰符：
   .once ：只触发一次回调，当前事件只执行一次
   .prevent ：阻止默认行为
   .stop：阻止冒泡
   .left ：只当点击鼠标左键时触发。
   .right ：只当点击鼠标右键时触发。
   .middle ：只当点击鼠标中键时触发。
2. v-model：在表单控件或者组件上创建双向绑定。
   修饰符：
   .lazy：取代 input 监听 change 事件，在“change”时而非“input”时更新
   .number：输入字符串转为有效的数字
   .trim：输入首尾空格过滤

表单

1. 单行文本框

   <div>姓名<input type="text" v-model.trim='form.username' ></div>
   

2. 多行文本

   <div>简介<textarea cols="30" rows="10" v-model='form.desc'></textarea></div>
   

3. 复选框
   hobby必须为一个数组

    <div>
           <input type="checkbox" value="a" v-model='form.hobby'>a
           <input type="checkbox" value="b" v-model='form.hobby'>b
           <input type="checkbox" value="c" v-model='form.hobby'>c
    </div>
   

4. 单选框

   <div>
       性别：
       <input type="radio" value="1" v-model='form.gender'>男
       <input type="radio" value="0" v-model='form.gender'>女
   </div>
   

5. 下拉框

   <div id="example-5">
     <select v-model="selected">
       <option disabled value="">请选择</option>
       <option>A</option>
       <option>B</option>
       <option>C</option>
     </select>
     <span>Selected: {{ selected }}</span>
   </div>
   new Vue({
     el: '...',
     data: {
       selected: ''
     }
   })
   

6. 下拉多选时

   <div id="example-6">
     <select v-model="selected" multiple style="width: 50px;">
       <option>A</option>
       <option>B</option>
       <option>C</option>
     </select>
     <br>
     <span>Selected: {{ selected }}</span>
   </div>
   new Vue({
     el: '#example-6',
     data: {
       selected: []
     }
   })