Vue2（五）：收集表单数据、过滤器、自定义指令、Vue的生命周期

一、收集表单数据

爱好：
         学习<input type="checkbox" value="study" v-model="hobby">
         打游戏<input type="checkbox" value="games" v-model="hobby">
         吃饭<input type="checkbox" value="eat" v-model="hobby">

这种写法为啥一勾三个全勾呢？

（1）不配置value的话，默认收集的是checkbox，然后hobby被选为true，其他两个一看hobby是true也就选上了，但是我写了value还是不对

（2）hobby默认值不能是‘ ’

多选框要设置type、value、v-model对应的设置为数组

<body>
    <div id="root">
     <form @submit.prevent="demo">
         <!-- 填完信息把信息提交整个表单，而且防止button提交之后跳转页面 -->
         <label for="demo" >账号：</label>
         <!-- 这样写一个label，点击账号两个字就能在input框里获取焦点了 -->
         <input type="text" id="demo" v-model.trim="userInfo.account">
         <!-- .trim可以忽略   ab c  （获得ab  c） -->
         <br><br/>
         密码：<input type="password" v-model="userInfo.password">
         <br><br/>
         <!-- 账号和密码输入什么值value就是啥，但是单/多选框没法输入 -->
         年龄：<input type="number" v-model.number="userInfo.age">
         <!-- 设成type:number可以忽略用户输入的文字 v-model.number是vue提供的，输入到后台就是数字18不是字符串18-->
         <br><br/>
         性别：
         男<input type="radio" name="sex" value="man" v-model="userInfo.sex">
         女<input type="radio" name="sex" value="woman" v-model="userInfo.sex">
         <br><br/>
         爱好：
         学习<input type="checkbox" value="study" v-model="userInfo.hobby">
         打游戏<input type="checkbox" value="games" v-model="userInfo.hobby">
         吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
         <br><br/>
         所属校区
         <select v-model="userInfo.city">
             <option value="" >请选择校区</option>
             <option value="beijing">北京</option>
             <option value="shenzhen">深圳</option>
             <option value="shanghai">上海</option>
             <option value="guangdong">广东</option>
         </select>
         <br><br/>
         其他信息：<textarea v-model.lazy="userInfo.other"></textarea>
         <!-- 加上.lazy就会失去焦点的时候再去读入写的啥，不会实时获取 -->
         <br><br/>
         <input type="checkbox" v-model="userInfo.agree">
         阅读并接受<a href="#">《用户协议》</a> 
         <button>提交</button>
     </form>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
            userInfo:{
                password:'',
                account:'',
                age:'',
                sex:'woman',//默认选择女
                hobby:[],
                city:'beijing',//默认值
                agree:'',
          //这样单选框就不用设置value，就一个点了就是true否则几句诗false
      
            }
            },
       methods: {
           demo(){
               console.log(JSON.stringify(this.userInfo))
               //交给后端的方法，但是直接提交data不太好
           }
       },
     
    })

v-model.lazy：实现不用实时收集，输入框失去焦点再收集
v-model.number：输入的字符串收集为数字（Vue内部做了数据转换），经常和type="number"一起用
v-model.trim：收集时去掉输入的首尾空格

二、过滤器

1.过滤器定义

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

过滤器两种用法：插值语法、v-bind

2.案例：过滤器格式化时间戳：

<body>
    <div id="root">
     <h2>显示格式化之后的时间</h2>
     <!-- 计算属性实现 -->
     <h3>现在是:{{fmtTime}}</h3>
     <!-- methods实现 -->
     <h3>现在是:{{getFmtTime()}}</h3>
     <!-- 是方法就得加（）调用 -->
     <!-- 过滤器实现 要改谁就直接写它名儿-->
     <h3>现在是:{{time | timeFormaters}}</h3>
     <h3>现在是:{{time | timeFormaters('YYYY-MM-DD')}}</h3>
     <!-- 拿着time传给timeFormaters返回值直接到{{}}里面，也就是time是个参数 -->
     <!-- 过滤器可以不加（），会给你把|左边的传进去，如果加了（），第一个还是time，第二个参数是格式 -->
     <h3>现在是:{{time | timeFormaters('YYYY-MM-DD') | mySlice}}</h3>
     <!-- 拿着time传给timeFormaters,timeFormaters拿着传入的结果继续往下 -->
     <h3 :x="msg | mySlice">hhh</h3>
     <!-- 过滤器不仅可以用在插值里面 -->
    </div>
    <div id="root2">
        <h2>{{mes | mySlice}}</h2>
    </div>

    <script type="text/javascript">
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
//    全局过滤器得写在new Vue之前，而且是filter不加s
    const vm=new Vue({
        el:'#root',
        data:{
            time:1710744301627,
            msg:"你好哇哇哇哇"
            },
       computed:{
           fmtTime(){
               return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            //    如果dayjs后面不加参数就默认是当前时间
           }
       },
       methods:{
           getFmtTime(){
              return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
           }
       },
       filters:{
        timeFormaters(value,str='YYYY-MM-DD HH:mm:ss'){
            // 过滤器本质是函数
            return dayjs(value).format(str)
            // 没有格式就默认是'YYYY-MM-DD HH:mm:ss'，有的话用传入的格式
        },
        
       }
    })
        // 我写的这些过滤器只能在root vue中可以用
        new Vue({
        el:'#root2',
        data:{
            mes:'hello',
        }
        })
    </script>
</body>

三、自定义指令

1.内置指令

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

v-text：向其所在的节点中渲染文本内容。

<div>{{name}}</div>
<div v-text="name"></div>

当data中name=‘尚硅谷’的时候，这两段显示出来没有什么区别

但是插值用的更多，因为可以这样写：

<div>你好哇{{name}}</div>

而v-text把所有内容当文本会替换掉整个div 的内容，div里面写东西没用，‘’内容里的写标签它也不识别

v-html：向指定节点中渲染包含html结构的内容。

 data:{
            name:'尚硅谷',
            str:'<h3>hhh</h3>'
        },

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

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

`v-cloak`（没有值）`：不让未经解析的模版跑到页面上去`

script链接的js如果延迟五秒的话，body内的内容就不会展示在界面上，vue也不会工作

如果script链接的js写在body里面的最下方，那么body上面的内容会出现在页面上但是不被解析

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

<style>
    [v-colak]{
        /* 选中所有标签属性里面有v-colak的 */
        display: none;
    }
</style>

<body>
   
   <div id="root">
       <div v-cloak>{{name}}</div>
   </div>

    <script type="text/javascript">
    const vm=new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
          
        },
  
    })

`v-once`指令：（没有值）

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

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

`v-pre`指令：（没有值）

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

也就是程序员写的什么样它就呈现出来什么样，vue不去解析了

2.自定义指令

（1）函数式

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

点击按钮使n++，输出n*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++</button>
   </div>

    <script type="text/javascript">
    const vm=new Vue({
        el:'#root',
        data:{
            n:1,
          
        },
        directives:{
            big(element,binding){//这里就不加v-了
                // 这里的binding是说v-big和span的绑定关系，不是v-bind
                // return this.n*10这么写不对！！
                // 不是靠返回值，是靠big这个函数返回的参数
              console.log(element,binding)
                // 第一个参数是说跟什么标签绑定的span（真实dom）
                // 第二个参数是一个存着指令值的对象
              element.innerText=binding.value*10
            }
        }

（2）对象式

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

案例：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

 <div id="root">
       <h2>当前的n值是：
           <span v-text="n"></span>
       </h2>
       <h2>放大10倍的n值是：
           <span v-big="n"></span>
       </h2>
       <button @click="n++">点我n++</button>
    </br>
    <input type="text" v-fbind:value="n">
   </div>

const vm=new Vue({
        el:'#root',
        data:{
            n:1,
          
        },
        directives:{
            // 函数调用的时候：一上来；指令所在模版被重新解析
            big(element,binding){//这里就不加v-了
                // 这里的binding是说v-big和span的绑定关系，不是v-bind
                // return this.n*10这么写不对！！
                // 不是靠返回值，是靠big这个函数返回的参数
                console.log(element,binding)
                // 第一个参数是说跟什么标签绑定的span（真实dom）
                // 第二个参数是一个存着指令值的对象
                element.innerText=binding.value*10
            },
            // fbind(element,binding){
            //     element.value=binding.value
            //     element.focus()
//这个放在这里刷新之后并没有自动获取焦点，所以不能写成函数得弄成对象，因为：
//fbind第一次调用就在他俩成功绑定也就是一上来的时候，那会input还没被解析到页面上，所以出不来焦点
//如果这时候点了button发现input自动获取焦点了，因为n值改变fbind再次被调用了，这时候input框已经出来了
            // }    
            fbind:{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value=binding.value
                },
                //指令所在元素被插入到页面时调用
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模版被重新调用时
                update(element,binding){
                    element.value=binding.value
                }
                // bind和updata往往都一样，所以人家设置了函数
            }   
         }
    })
    </script>

（3）注意点

1.多个单词用-分割，v-big-number，而且在vue中写函数的时候不能简写了，得:

'big-number'(element,binding){}

2.指令里面相关的this都是window

（4）写全局指令：

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

Vue.directive('fbind',{
        bind、、
        update、、、
    })

和filter一样不加s

写全局函数：

Vue.directive('big',function(element,binding){
        element.innerText=binding.value*10
    })

四、Vue的生命周期！！

1.什么是生命周期？

一个小笔记：{{}}如果返回值为undefined的话不显示在页面上
生命周期
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或组件实例对象。

mounted之前有一些函数，之后有一些函数，这三种加一块就组成生命周期