Vue2（五）：收集表单数据、过滤器、内置指令和自定义指令

一、回顾 总结Vue监视数据

1.Vue监视数据的原理：

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据?通过setter实现监视，且要在new Vue时就传入要监测的数据。(1）.对象中后追加的属性，Vue默认不做响应式处理(2）.如需给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,value)或vm.$set(target, propertyName/index, value)

3.如何监测数组中的数据?通过包裹数组更新元素的方法实现，本质就是做了两件事：(1）.调用原生对应的方法对数组进行更新。（2）.重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法：1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort(）)、reverse()2.Vue.set（）或 vm.$set（）特别注意：Vue.set（）和vm.$set（）不能给vm或vm的根数据对象添加属性！！！ 

2.一个练习：

    <div id="root">
        <h1>学生信息</h1>
 
        <button @click="student.age++">年龄+1岁</button><br />
        <button @click="addSex">添加性别属性，默认值：男</button><br />
        <button @click="student.sex= '未知' ">修改性别</button><br />
        <button @click="addFriends">在朋友列表首位添加一个朋友</button><br />
        <button @click="updateFirstFriendsName">修改第一个朋友的名字年龄为：张三 17</button><br />
        <button @click="addHobby">添加一个爱好</button><br />
        <button @click="updateHobby">修改第一个爱好为：开车</button><br />
 
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
 
        <h3>朋友们: </h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({ 
            el: '#root', 
            data: { 
                student: { 
                    name: 'tom', 
                    age: 18, 
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36}
                    ]
                }
            },
            methods:{
                addSex(){
                    // 两种写法
                    // Vue.set(this.student,'sex','男')
                    this.$set(this.student,'sex','男')
                },
                addFriends(){
                    this.student.friends.unshift({name:'jack',age:20})//有效写法
                },
                updateFirstFriendsName(){
                    this.student.friends[0].name = '张三'
                    this.student.friends[0].age = '17'
                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                updateHobby(){
                    //三种写法
                    // this.student.hobby.splice(0,1,'开车')//意思是从第一个开始，删掉一个，改成‘开车’
                    // Vue.set(this.student.hobby,0,'开车')
                    this.$set(this.student.hobby, 0, '开车')
                }
            }
        })
    </script>

 

二、收集表单数据

1、不同的value属性

若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

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

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

2、v-model的三个修饰符

备注：v-model的三个修饰符：lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤

3、案例：

    <div id="root">
        <!-- 快捷写法#root回车 -->
        <!-- radio 单选框 checkbox复选框 label用法：点击请输入文字时也能把光标定在输入框内  -->
        <form @submit.prevent="demo">
            <!-- 阻止默认行为发生 阻止：点击提交按钮之后会自动刷新 -->
            <!-- <label for="demo">账号</label>
            <input type="text" id="demo"><br>
            <label for="demo1">密码</label>
            <input type="password" id="demo1"><br> -->
            账号<input type="text" v-model.trim="userInfo.account"><br>
            密码<input type="password" v-model="userInfo.password"><br>
            密码<input type="password" v-model="userInfo.password"><br>
            年龄<input type="number" v-model.number="userInfo.age"><br>
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /><br />
        爱好：
        学习<input type="checkbox" v-model="userInfo.hobby" value="study">
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br /><br />
        所属校区
        <select v-model="userInfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="wuhan">武汉</option>
        </select><br /><br />
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
        <button>提交</button>
        </form>
    </div>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account: '',
                    password: '',
                    age:'',
                    sex: '',
                    hobby: [],//爱好要用数组，才能获取到否则只能获取true false
                    city: 'Beijing',//默认选北京
                    other: '',
                    agree: ''
                }
            },
            methods:{
                demo(){
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        })
    </script>

 

三、 过滤器

1、bootcdn和dayjs

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

先来bootcdn中下载一个dayjs保存在vue中，然后在开头引入：

    <script src="../js/dayjs.min.js"></script>

2.什么是过滤器？

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理比如价格1999改成1,999等需求，复杂的用计算属性或方法）。
语法：
1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"（第二种几乎不用）
备注：
1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据, 是产生新的对应的数据

3、局部过滤器，全局过滤器

    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性 -->
        <h2>现在时间：{{fmtTime}}</h2>
        <!-- methods获取 -->
        <h2>现在时间：{{getfmtTime()}}</h2>
        <!-- 过滤器 -->
        <h2>现在时间：{{time | timeFormater}}</h2>
        <!-- 过滤器（传参） -->
        <h2>现在时间：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h2>
        <!-- 只能用于插值语法和v-bind: -->
        <h2 :x="msg | mySlice">方便面</h2>
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
    <script>
        // 全局
        Vue.filter('mySlice', function(value){
            return value.slice(0,4)
        })
 
    new Vue({
            el:'#root',
            data:{
                time:1621561377603,
                msg:'你好，方便面'
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods:{
                getfmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 局部过滤器
            filters:{
                timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                }
            }
        })
    new Vue({
        el:'#root2',
        data:{
            msg:'hello',
        }
        })
    </script>

四、自定义指令 

1、内置指令 

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的所有内容，{{xx}}则不会。
比如下面str的内容会替代掉方便面：

    <div id="root">
        <h2>{{name}}</h2>
        <h2 v-text="str">方便面</h2>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'方便面',
                str:'你好方便面'
            }
        })
    </script>

 

v-html指令：

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
（1）v-html会替换掉节点中所有的内容，{{xx}}则不会,这点和v-text一样。
（2）v-html可以识别html结构，这点和v-text区别，v-text不能渲染标签。

    <div id="root">
        <h2>{{name}}</h2>
        <h2 v-text="str">方便面</h2>
        <h2 v-html="str">方便面</h2>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'方便面',
                str:'<h1>你好方便面<h1/>'
            }
        })
    </script>

 

严重注意：v-html有安全性问题！！！！
（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

 v-cloak指令（没有值）：

（1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
（2）使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题，先隐藏标签，然后Vue渲染完了之后删除v-cloak，那么就能显示渲染完之后的页面了。

v-once指令：（没有值）

（1）v-once所在节点在初次动态渲染后，就视为静态内容了，也就是只读一次。
（2）以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令：

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

2、自定义指令

1、定义语法

(1).局部指令：

new Vue({							new Vue({
directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
}) 		

(2).全局指令：

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用big-number命名方式，不要用bigNumber命名。

'big-number'(){
               console.log('')
            }

3.directives配置对象中所有函数的this都指向window，这个和其他的不同，尤其注意

 

2、函数式

函数中有两个参数，第一个参数是指令所在的标签，第二个参数是一个存着指令值的对象，通过对象名.value就能获取当前绑定的值

big函数何时调用？
1、指令与元素成功绑定时(一上来，没放入页面之前)
2、指令所在的模板被重新解析时

需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍

    <div id="root">
        <h2>当前的n值是:<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是:<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            directives:{
                big(element,binding){
                    // big函数何时会被调用1.指令与元素成功绑定时（一上来）2.指令所在的模板重新解析时
                    console.log('big');
                    element.innerText = binding.value*10
                }
            }
        })
    </script>

3、对象式

配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时(一上来，没放入页面之前)
(2).inserted：指令所在元素被插入页面时调用（放入页面后）
(3).update：指令所在模板结构被重新解析时调用（有任意data中的东西被改了）。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
使用函数调用element.focus()不奏效，因为big函数执行时页面上还没放入input，focus必须在input插入页面后才能有效果。所以这里我们只能用对象式

   <!-- 准备一个容器 -->
    <div id="hello">
        <h1>当前n值是：<span v-text="n"></span></h1>
        <button @click="n++">点我n+1</button>
		<!-- 在输入框中显示n的值动态变化 -->
        <input v-fbind:value="n">
    </div>
 
    <script>
        const vm = new Vue({
            el: '#hello',
            data: {
                n: 1
            },
            directives: {
                // 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
                //函数无法实现该需求
                // fbind(element, binding) {
                //     element.innerText = binding.value * 10;
                //     //下面这个focus，必须在放到页面之后才调用
                //     element.focus(); //不奏效，因为big函数调用时还没放入页面
                // }
                //二、对象式
                fbind: {
                    // 指令与元素成功绑定时(一上来，没放入页面之前)
                    bind(element, binding) {
                        element.value = binding.value;
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus();
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value;
                    }
                }
            }
        })
    </script>

本质上二者差不多，你会发现函数式其实就是对象式中的bind和update的合并，如果在某些时候要实现一些特殊的效果，比如获取焦点、操作节点父元素等需要等元素插入页面后才能操作它的这些操作，只能用对象式，靠的就是inserted函数