Vue学习简记（二）表单数据收集、filter、内置指令

表单数据收集

1. 若：< input type=“text”/>，则v-model收集的是value值，用户输入的就是value值。
2. 若：< input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。
3. 若：< input type=“checkbox”/>

• 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

• 配置input的value属性:
  (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  (2)v-model的初始值是数组，那么收集的的就是value组成的数组

  备注：v-model的三个修饰符：

  • lazy：失去焦点再收集数据
  • number：输入字符串转为有效的数字
  • trim：输入首尾空格过滤

一个简单的表单案例：

<div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"><br><br> 
            密码：<input type="password" v-model="userInfo.password"><br><br> 
            年龄<input type="number" v-model.number="userInfo.age"><br><br>
            性别： 男<input type="radio" name="sex" value='男' v-model="userInfo.sex"> 
            女<input type="radio" name="sex" value='女'><br><br> 
            爱好： 火锅 <input type="checkbox" v-model="userInfo.hobby" value="火锅"> 
            烧烤<input type="checkbox" v-model="userInfo.hobby" value="烧烤">
            麻辣烫<input type="checkbox" v-model="userInfo.hobby" value="麻辣烫"> 
            烤肉<input type="checkbox" v-model="userInfo.hobby" value="烤肉"><br><br> 
            计划旅游城市：<select v-model="userInfo.city">
            <option value="select" >请选择城市</option>
            <option value="beijing">北京</option>
            <option value="xian">西安</option>
            <option value="shenzhen">深圳</option>
            </select><br><br> 
            其他信息：<textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受
            <a href="#">《用户协议》</a><br><br>
            <button>提交</button>

        </form>
    </div>

var vm = new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age: 18,
                    sex: '女',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: ''
                }

            },
            methods: {
                demo() {
                    console.log(this.userInfo)
                }
            },
        })

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：

1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

   备注：
   1.过滤器也可以接收额外参数、多个过滤器也可以串联
   2.并没有改变原本的数据, 是产生新的对应的数据

串联后的过滤器，前面一个输出是后面一个的输入
例子：

<div id="root">
        <h3>计算结果：{{num | add | double}}</h3>
        <h3 :x="num | double"></h3>
</div>

    //全局过滤器
    Vue.filter('double', function(val) {
        return val * 2
    })
    var vm = new Vue({
        el: "#root",
        data: {
            num: 4
        },
        //局部过滤器
        filters: {
            add(value) {
                return value + 1
            }

        }
    })

内置指令总结

• v-bind : 单向绑定解析表达式, 可简写为 :xxx

• v-model : 双向数据绑定

• v-for : 遍历数组/对象/字符串

• v-on : 绑定事件监听, 可简写为@

• v-if : 条件渲染（动态控制节点是否存存在）

• v-else-if ：条件渲染（动态控制节点是否存存在）

• v-else : 条件渲染（动态控制节点是否存存在）

• v-show : 条件渲染 (动态控制节点是否展示)

• v-text指令：
  1.作用：向其所在的节点中渲染文本内容。
  2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

• v-html指令：
  1.作用：向指定节点中渲染包含html结构的内容。
  2.与插值语法的区别：
  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
  (2).v-html可以识别html结构。
  3.严重注意：v-html有安全性问题！！！！（例如可以获取当前页面的cookie，那么就存在盗号风险）
  (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
  (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

• v-cloak指令（没有值）：
  1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
  即在style标签中设置[v-cloak]{display:none;} 其中[v-cloak]表示所有具有此属性的元素都匹配此样式。

• v-once指令：
  1.v-once所在节点在初次动态渲染后，就视为静态内容了。
  2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

• v-pre指令：
  1.跳过其所在节点的编译过程。
  2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

  条件判断 v-if 适用于：切换频率较低的场景。
  特点：不展示的DOM元素直接被移除。
  注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

  v-show适用于：切换频率较高的场景。
  特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)
  使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

 <div id="root">
     成绩为：<input type="text" v-model="num"><br>
     <h2 v-if="num < 60">不及格</h2>
     <h2 v-else-if="num > 60  && num< 80">合格</h2>
     <h2 v-else-if="num >= 80 && num<=100">优秀</h2>
     <h2 v-else>输入不符合规范</h2>
 </div>

v-text和v-html例子：

<div v-text=str>hello</div>
<div v-html=str></div>

var vm = new Vue({
        el: "#root",
        data: {
            num: 4,
            str: '<span style="color: red;"> 我是html指令 </span>',
        },

    })

v-once指令例子：

<h1 v-once>{{n}}</h1>
<h1>{{n}}</h1>
<button @click="n++">点我n+1</button>

v-pre指令就是此标签内部不用vue编译，也就是里面是什么就是什么。例如：

<h1 v-pre>{{n}}</h1>