Vue2基础知识自用（六）收集表单数据与内置指令

1.收集表单数据

若使用text， v-model收集的是value值，用户输入的就是value值。

<input type="text">

若使用radio， v-model收集的是value值，且要给标签配置value值。

<div id="root">
    <form @submit.prevent="demo">
        性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
    </form>
</div>

若使用checkbox，有两种情况：
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性：
  (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

<input type="checkbox" v-model="userInfo.agree">

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

<div id="root">
    <form @submit.prevent="demo">
        爱好：
        学习<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">
    </form>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            userInfo:{
                hobby:[],
            }
        },
        methods: {
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>

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

2.过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
  1.注册过滤器：Vue.filter(name,callback）或 new Vue{filters:{}}
  2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
  1.过滤器也可以接收额外参数、多个过滤器也可以串联
  2.并没有改变原本的数据，是产生新的对应的数据
  3.全局过滤器要写在Vue 实例前面

<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>现在是：{{ fmtTime }}</h3>
    <!-- methods实现 -->
    <h3>现在是：{{ getFmtTime() }}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //全局过滤器
    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'){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })
</script>

3.内置指令

3.1 v-text指令(使用少)

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

3.2 v-html指令(使用少)

1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
v-html会替换掉节点中所有的内容，{{xx}}则不会。
v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

3.3 v-cloak指令(没有值)

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

// css
[v-cloak]:{display:none}
// html
<div v-cloak>123</div>

3.4 v-once指令(使用少)

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

<!-- 准备好一个容器-->
<div id="root">
    <h2 v-once>初始化的n值是:{{ n }}</h2>
    <h2>当前的n值是:{{ n }}</h2>
    <button @click="n++">点我n+1</button>
</div>

3.5 v-pre指令(适用于没有插值语法节点)

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

4.自定义指令

自定义指令需要操作dom元素，vue指令就是将原生的dom进行了封装。

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
autofocus自动获得焦点

//使用
<h2>放大10倍后n值是：<span v-big="n"></span></h2>
<input type="text" v-fbind:value="n">

new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
        
        /* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				
		// big函数何时会被调用？
        // 1.指令与元素成功绑定时（一上来） 对应下面的bind()
        // 2.指令所在的模板被重新解析时     对应下面的update()
        big (element,binding){
            console.log('big',this) //注意此处的this是window
            console.log(element instanceof HTMLElement) //返回true，证明element是真实dom
            element.innerText = binding.value * 10
        },
        
        //vue会在不同时刻帮忙调用不同的函数
        fbind: {
            //指令与元素成功绑定时（一上来）
            bind (element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted (element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update (element,binding){
                element.value = binding.value
            }
        }
    }
})

5.自定义指令总结

1.定义语法
(1)局部指令

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

(2)全局指令：

// 1 
Vue.directive(指令名,配置对象)
// 2
Vue.directive('fbind',{
     //指令与元素成功绑定时（一上来）
     bind (element,binding){
        element.value = binding.value
     },
     //指令所在元素被插入页面时
     inserted (element,binding){
         element.focus()
     },
     //指令所在的模板被重新解析时
     update (element,binding){
         element.value = binding.value
     }
})

2.配置对象中常用的3个回调：
  (1).bind：指令与元素成功绑定时调用。
  (2).inserted：指令所在元素被插入页面时调用。
  (3).update：指令所在模板结构被重新解析时调用。

3.备注：
  1.指令定义时不加v-，但使用时要加v-；
  2.指令名如果是多个单词，要使用kebab-case命名方式，不推荐驼峰