VUE指令总结

最新推荐文章于 2023-03-06 16:25:03 发布

贾明恣

最新推荐文章于 2023-03-06 16:25:03 发布

阅读量216

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43342290/article/details/114436306

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-pre

跳过这个元素和子元素编译的过程，显示原始的Mustache标签
即文本内容不会被编译{{msg}}即显示为本身

v-cloak 性能优化

可以使用 v-cloak 指令设置样式，这些样式保持到 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

<style>
[v-cloak]{
    display: none;
}
</style>
<div id="app" v-cloak>
    {{context}}
</div>

上述代码实现隐藏未编译的Mustache标签

v-once

用于一次性数据，固定数据中优化更新性能
只会渲染一次，之后重新渲染，实例及其所有子节点将被视为静态内容并跳过。即使插值变量变化也不会改变

v-text

<span>
    {{msg}}
</span>
<span v-text="msg">
</span>

v-if与v-show

都可以动态控制dom元素显示隐藏

v-if显示隐藏是将dom元素整个添加或删除，条件块内的事件监听器、子组件也会适当地被销毁和重建。有很大的切换开销。
v-show隐藏则是为该元素添加css–display:none，dom元素还在。(没有占位，区别于visibility: hidden)，适于频繁地切换。

注意
当一个元素默认在css中加了display：none属性，那么v-show=true 无法让元素显示的，不会覆盖掉或修改已存在的css属性。

v-if时提供key标识元素
vue在渲染元素时，处于效率考虑，会尽量地复用已有的元素而非重新渲染，使用vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的

特别注意 input元素被复用渲染的错误

<div id="app">
    <template v-if="type === 'name'">
      <label>用户名：</label>
      <input type="text" placeholder="请输入用户名...">
    </template>
    <template v-else>
      <label>邮箱：</label>
      <input type="text" placeholder="请输入邮箱...">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
  </div>
 //后
 <div id="app">
    <template v-if="type === 'name'">
      <label>用户名：</label>
      <input type="text" placeholder="请输入用户名..." key="neme-input">
    </template>
    <template v-else>
      <label>邮箱：</label>
      <input type="text" placeholder="请输入邮箱..." key="mail-input">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
  </div>
  <script src="vue.js"></script>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      type: 'name'
    },
    methods: {
      handleToggleClick() {
        this.type = this.type === 'name' ? 'mail' : 'name';
      }
    }
  });

v-else与v-else-if

搭配v-if使用

v-for循环

在这里插入图片描述

<ul>
    <li v-for="pig in pigs">{{pig}}</li>
     <li v-for="pig in pigs" :key="pig.index">{{pig}}</li>
     <li v-for="pig in 3">{{pig}}</li>
     <li v-for="(pig,index) in 3">{{pig}}位于{{index}}</li>
</ul>

var app = new Vue({
    name: 'my-app',
    // CSS selector of the root DOM element
    el: '#root',
    // Some data
    data:{
        pigs:["z","x","c"]
    }
    
  })

尽可能使用v-for时提供key，除非遍历内容很简单。
加入key是为了唯一标识提高性能，不应该使用index
考虑如果删除中间的元素，那么后面的元素都会因为与相应 key 的绑定关系有变化而被重新渲染

v-for块中，拥有对父作用域属性的完全访问权限
可以取整数

<span v-for="n in 10">{{n}}</span>
<!-- 十个span -->

遍历对象属性

<span v-for="value in obj">{{value}}</span>
<!-- 遍历obj键值对的值 -->
<span v-for="(value,key) in obj">{{{key}}：{value}}</span>
<!-- 还可以(value,key,index) -->

同时用v-for、v-if

当两者处于同一个节点的时候，v-for的优先级更高，意味着遍历每个元素判断v-if

可通过将v-if置于上级节点的方式，改变优先级

v-on

当视图模型被销毁时，所有事件侦听器都会自动删除。你不需要担心自己清理它。
普通元素可以监听DOM原生事件，自定义元素还可以监听自定义事件

v-on:click="func"
//简写至
@func

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
即子组件v-on:自己的事件=“父组件事件/单个执行命令代码”

<html>
<head>
  <title>VueJS</title>
</head>

<div id="father_sum">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</div>


<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
   
Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#father_sum',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})


  </script>
</body>
</html>

事件修饰符

v-bind：绑定Html的属性值

这是动态语法，区别于字面量语法

v-bind只是个单向绑定 ,只能从 M -> V，不能从V -> M
简写至：

v-bind:disabled="变量名"
:disabled="变量名"

注意与v-model区别，单向绑定，只有变量变化才更新属性值
如果在input中：value=”varr"，那么就不能通过输入改变value属性

三元表达式

v-bind:class="[isActive?act:off,always]"

一直添加类always，选择添加act、off

v-bind+v-on=v-model

Vue 是单项数据流，v-model 指令怎么实现在表单控件元素上创建双向数据绑定（js中的vue实例中的data与其渲染的dom元素上的内容保持一致，任何一方改变都影响对方）
v-bind只是个单向绑定 ,只能从 M -> V，不能从V -> M

<input v-model="searchText">
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">

触发input事件时，$event 是当前的事件对象。 $event.target.value指向的是当前的input的值。

v-model

v-model的原理双向绑定
v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。
可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。
vue响应式：变化侦测、相关实例方法、on/off发布订阅者模式、watch与computed

Vue 是单项数据流，v-model 只是双向绑定的语法糖，本质就是响应式中的变化侦听原理

v-model一帮在input的下拉框、单选按钮、复选框中应用，它会根据type控件类型自动选取正确的方法来更新元素。会忽略所有表单元素的value、checked、selected特性的初始值，会选择vue实例数据作为具体的值
像复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。

radio绑定的例子

在这里插入图片描述

<html>
<head>
  <title>VueJS</title>
</head>
<body>
  <!-- Include the library in the page -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- Some HTML -->
  <div id="root">
   <label> <input type="radio" v-model="value" value="1">1</label>
   <label> <input type="radio" v-model="value" value="2">2</label>
   <label> <input type="radio" v-model="value" value="3">3</label>
   <label> <input type="radio" v-model="value" value="4">4</label>
   <p>{{value}}</p>
  </div>
  <>

  <!-- Some JavaScript -->
  <script>
  console.log('Yes! We are using Vue version', Vue.version)

  // New VueJS instance
  var app = new Vue({
    el: '#root',
    // Some data
    data:{
      value:1
    }
  })
  </script>
</body>
</html>

上述例子换成下拉选择菜单

 <select v-model="value">
       <option v-for="value in 4" >{{value}}</option>
   </select>
   <p>{{value}}</p>

 <select v-model="value">
       <option v-for="opt in options" v-bind:value="opt.value" >{{opt.value}}</option>
   </select>
   <p>{{value}}</p>
 
data:{
      value:1,
      opt:[
          {
            text:'one',
            value:3
          },
          {
            text:'one',
            value:4
          }
      ]

    }

有多个修饰符可以搭配使用
v-model.number可以限制值只能是数字
v-model.lazy可以在用户按回车或者失去焦点时，变量才会被赋予上值，可以减少服务器压力
v-model.trim去除首尾空格

v-html HTML转义

vue内建了自动转义功能，因此当你插入{{yourHTML}}时候，其中的HTML字符会被转移。而且API返回的HTML会直接以文本形式显示在页面上，这样不理想。
如果想要渲染HTML。使用v-html指令，不会经过转义而是直接输出到页面上。
使用时要慎重，可能会将自己暴露在XSS风险中。
除非将用户输入的内容提前进行了校验和转义，否则不能置于v-html中。

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

自定义指令

全局指令

注册一个全局自定义指令，需要传入指令名字、以及一个包含钩子函数的对象
钩子函数有

bind指令第一次绑定到元素时候
inserted在绑定元素被添加到父节点时候
update所在元素更新之前或者更新时
componentUpdated所在元素及其子元素更新完成
unbind指令从元素上解绑

每个钩子函数都有一组默认的参数;
**el：**指令所绑定的元素，可以用来直接操作 DOM。
**binding：**一个对象，包含以下 property：

name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true,
bar: true }。

**vnode：**Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
**oldVnode：**上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
  
})

当只需要使用bind、update两个钩子的时候，第二个参数可以直接传入一个函数

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

组件的局部指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

指令的参数

指令可以接收参数，例如上面
v-bind:class、v-on.once、v-if=“isfalse”
在自定义指令的时候，可以通过传入钩子函数的参数实现，

钩子函数参数：

el:指令所绑定的元素，可以用来直接操作DOM
binding:一个对象，包含以下属性：

name：指令名，不包括 v-前缀
value:指令的绑定的计算值，例外：v-my-directive=‘1+1’,value 的值是2
oldValue :指令绑定的前一个值，仅在update和conponentUpdated 钩子中可用。无论值是否改变都可用
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
在模板编译时期，将指令解析并添加到AST的directives属性中，然后在 AST生成代码字符串的过程中实现部分内置指令的功能（v-if、v-for），还有一些指令在虚拟DOM渲染的时候触发自定义指令的钩子函数生效。

Vue.directive

用来注册或获取全局指令的
注册指令是将定义好的指令存放在某个位置，获取指令是根据指令id从存放指令的位置来读取指令。

Vue.directive( id, [definition] )

源码实现：
在Vue类上创建了options属性，其属性值为一个空对象，并且在options属性中添加了directives属性，其值也是一个空对象，这个directives属性就是用来存放指令的位置。

自定义指令

Vue对于自定义指令定义对象提供了几个钩子函数，这几个钩子函数分别对应着指令的几种状态，一个指令从第一次被绑定到元素上到最终与被绑定的元素解绑，它会经过以下几种状态：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

源码内部是监听虚拟DOM渲染更新的create、update、destory阶段都得处理指令逻辑

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})