Vue内置指令，自定义指令

内置指令

• v-bind

  • 单向绑定解析，可以简写为:

• v-model

  • 双向数据绑定

• v-for

  • 遍历数组/对象/字符串

• v-on

  • 绑定事件监听，可简写为@

• v-if

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

• v-else

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

• v-show

  • 条件渲染（动态控制节点是否展示）

• v-text

  • 向其所在的标签插入文本

  <div v-text="name">div>
  
  <div>{{name}}div>
  1
  2
  3

  • 与插值语法区别：v-text会替换节点中的内容，而{{xx}}不会

• v-html

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

   
  
  1
  2
  3
  4
  5
  6
  7
  8

cookie

1. （浏览器->服务器）chrome浏览器携带用户名、密码、请求登录目标网站
2. （服务器->浏览器）登录成功，跳转个人中心，给浏览器cookie【k1:v1,k2:v2…】
3. （浏览器->服务器）浏览器发起查看个人中心中的仓库请求，同时携带【k1:v1,k2:v2…】
4. （服务器->浏览器）返回所有仓库+【k3:v3…】

• v-cloak

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

  当网速过慢时DOM会先显示在页面上之后再进行渲染（script标签写在body下面时）

  
  
      
  
          {{name}}
      
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• v-once

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

  
          
  n的初始值为{{n}}
          
  n+1后的值为{{n}}
          点我n+1
      
  
      
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

• v-pre

  • 让vue跳过所在节点的编译过程
  • 可以利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

  没有使用指令语法
  
      当前的n值为{{n}}
  
  1
  2
  3
  4

自定义指令

VUE元素和指令的三个阶段

指令与元素绑定==>指令所在元素插入页面==>指令所在模板被重新解析

自定义指令（函数式）

自定义指令（函数式）何时被调用

1. 指令与元素成功绑定时（一上来，并不是元素被解析到页面上时，在元素被解析到页面上之前）
2. 指令所在模板被重新解析时

自定义指令使用directives进行的定义

自定义指令名（element，binding）

//element获取DOM元素

//binding获取v-big="value"中的value值

n放大10倍的值为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

自定义指令（对象式）

• bind(element，binding){}
  • 指令与元素成功绑定时（一上来）被调用
• inserted(element，binding){}
  • 指令所在元素被插入页面时被调用
• update(element，binding){}
  • 指令所在模板被重新解析时被调用

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意事项：

1. v-big-number的话directives里面要这么写’big-number’

2. 指令相关的this指向window

3. directives中的指令都是局部指令，只能当前实例可以使用

4. 变成全局指令（和filter一样）

   Vue.directive(‘fbind’,{配置对象}或function(){})