Vue基础6

• 收集表单数据
• 过滤器
• • 局部过滤器
  • 全局过滤器
• 内置指令
• • v-text
  • v-html
  • • 使用
    • 安全性
    • • cookie工作原理
      • v-html不安全案例
  • v-cloak指令
  • v-once指令
  • v-pre指令
• 自定义指令
• • 函数式
  • 对象式
  • 自定义命名组合式
  • 全局自定义指令
  • 自定义指令总结：

收集表单数据

    账号：   
 
   密码： 
 
年龄： 
 
   性别：男女 

爱好：读书看报 唱歌  

所属校区：请选择校区重庆西安 

其他信息： 

   阅读并接受 《用户协议》 

收集表单数据：

• 若：，则v-model收集的是value值，用户输入的就是value值
• 若：，则v-model收集的是value值，且要给标签配置value值
• 若：
  1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
  2.配置input的value属性：
  （1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
  （2）v-model的初始值是数组，那么收集的就是value组成的数组
• 备注：v-model的三个修饰符：
  lazy：失去焦点再收集数据
  number：输入字符串转为有效的数字
  trim：输入首尾空格过滤

过滤器

免费的提供第三方库的网站： bootCDN
使用轻量级格式化日期库：dayjs

局部过滤器

显示格式化后的时间
现在是：{{fmtTime}}
现在是：{{timeFormatter()}}
现在是：{{time | tfmFormatter}}
现在是：{{time | tfmFormatter('YYYY-MM-DD HH:mm:ss')}}
现在是：{{time | tfmFormatter('YYYY-MM-DD HH:mm:ss') | mySlice}}

过滤器调用步骤：

script调用步骤：

全局过滤器

显示格式化后的时间
现在是：{{fmtTime}}
现在是：{{timeFormatter()}}
现在是：{{time | tfmFormatter}}
现在是：{{time | tfmFormatter('YYYY-MM-DD HH:mm:ss')}}
现在是：{{time | tfmFormatter('YYYY-MM-DD HH:mm:ss') | mySlice}}
{{msg}}
{{msg | mySlice}}
真好

过滤器：
定义：对要显示的数据进行特定格式化后显示(适用于一些简单逻辑的处理)
语法：

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

备注：

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

内置指令

v-text

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

{{name}}
区别：
你好，{{name}}
你好，

v-text 指令：

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

v-html

使用

可以解析 html 标签

{{name}}

安全性

cookie工作原理

实际操作展示：

1. 用谷歌浏览器查看cookie
   

2. 使用cookie-editor插件复制cookie
   

3. 再用火狐浏览器打开b站，显示的是未登录的状态
   

4. 使用火狐浏览器的插件cookie-editor将在谷歌浏览器中复制到的内容粘贴在这里
   

5. 刷新页面之后就可以得到一个已经登录状态的页面了
   

v-html不安全案例

{{name}}

通过这种方式就能获取到你的所有cookie值，然后登录你的信息做坏事

但是，如果字段被HttpOnly限定了，那么只有http协议能读取到，通过js代码就读取不到了


v-html指令：

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

v-cloak指令

你好，{{name}},年龄：{{age}}，性别：{{sex}}

如果步骤2执行慢了，则会出现以下的情况：

解决办法：
使用v-cloak

你好，{{name}},年龄：{{age}}，性别：{{sex}}

步骤三没执行时候，v-cloak标签一直存在，页面内容不会显示，步骤三执行之后，v-cloak标签则会清除，页面内容正常展示

页面加载完毕效果：

v-cloak指令（没有值）：

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

v-once指令

初始化的n是：{{n}}
当前的n值是：{{n}}
点我n+1

v-once指令：

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

v-pre指令

Vue的展示
欢迎大家来到Vue的小课堂
当前的n值是：{{n}}
点我n+1
错误示范：因为下面标签中内容需要被解析
当前的n值是：{{n}}

v-pre指令：

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

自定义指令

函数式

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

姓名：{{name}}
修改姓名为李四
当前的n值是：
放大10倍后的n值是：
点我n+1

对象式

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

{{name}}
当前的n值是：{{n}}
点我n+1

自定义命名组合式

当前的n值是：{{n}}
点我n+1
放大10倍后的n值是：

全局自定义指令

当前n的值是：{{n}}
点我n+1

放大10倍后的n值是：

第二个Vue容器的d值：{{d}} 
点我d+1

自定义指令总结：

1. 定义语法：
   （1）局部指令：
   new Vue({
   directives:{指令名:配置对象}
   })
   或
   new Vue({
   directives(){指令名:回调函数}
   })
   （2）全局指令
   Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)
2. 配置对象中常用的3个 回调：
   （1）bind：指令与元素成功绑定时使用
   （2）inserted：指令所在元素被插入页面时调用
   （3）update：指令所在模板结构被重新解析时调用
3. 备注：
   （1）指令定义时不加v-,但使用时要加v-
   （2）指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名