跳到主要内容

2.1-指令v-option

Create by fall on 10 Mar 2022 Recently revised in 10 Mar 2024

所有示例使用的都是 Vue 的 SFC，即单文件组件，所以如果没有学习，请阅读官方文档

官方指令​

内置指令​

  • v-text：更新元素的文本内容。
  • v-html：更新元素的 innerHTML。
  • v-show：基于表达式值的真假，改变元素的可见性。
  • v-if、v-else-if、v-else：基于表达式值的真假，条件性地渲染元素或者模板片段。
  • v-for ：基于原始数据多次渲染元素或模板块。
  • v-on：给元素绑定事件监听器。
  • v-bind：动态的绑定一个或多个 attribute，也可以是组件的 prop。
  • v-model：在表单输入元素或组件上创建双向绑定。
  • v-slot：用于声明具名插槽或是期望接收 props 的作用域插槽。
  • v-pre：跳过该元素及其所有子元素的编译。
  • v-once：该组件及所有节点只渲染一次，首次渲染后，不会随着数据的变化重新渲染，而是被视为静态内容。
  • v-memo：缓存一个模板的子树。传入一个数组，数组中的每个值都与最后一次的渲染相同，整个子树将跳过更新。
  • v-cloak：用于隐藏尚未完成编译的 DOM 模板（仅在不需要构建的环境下使用）

v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

v-text​

填充纯文本（不存在先渲染原文本，再渲染 vue 内容的问题）

v-html​

作用：填充 HTML 片段

  • 容易导致XSS攻击，永不用在用户提交的内容上

  • 本网站的内容可以使用，来自于第三方的数据安全属性未知，不推荐使用

v-pre​

按照原始信息进行填充，vue 不对信息进行处理（跳过编译过程）

v-once​

只编译一次

  • 显示内容之后不具有响应式的功能（只能进行一次改动）

v-model​

  • 使用 v-model
    • 实现数据的监听（用在form表单，数据输入框）
  • 修饰符
    • v-model.number='value' 修改为数值类型
    • v-model.trim='value' 忽略前面的和后面的空格
    • v-model.lazy='value' 只在失去焦点的时候输出，监听 change 而不是 input 事件

v-on​

鼠标点击事件

<button v-on:click="num++">button</button>
<button @click="num++">button</button>
<button @submit.prevent="onSubmit">button</button>// 使用修饰符，提交事件但是不重载页面

v-on的修饰符

  • .native：使用浏览器原生事件（Vue3 已经移除该事件修饰符）
  • .stop：阻止冒泡
  • .prevent：阻止默认行为
  • .self：只有事件本身可以触发
  • .once：事件只触发一次
  • .capture：添加事件监听器，使用事件捕获模式（发生事件冒泡时，优先触发该事件）

修饰符的顺序很重要

@click.prevent.self  // 阻止所有的点击
@click.self.prevent  // 只会阻止对自身元素的点击

按键触发属性

<input type="password" name="ppe" id="ppe" @keydown.keya="handle"  v-model="pwd" />
//自定义鼠标按键
Vue.config.keyCodes.keya = 65

可以用特殊变量$event传入方法

<button @click="handle('take it',$event)">点击出现奇迹</button>
methods:{
    handle:function(msg,event){
        console.log(msg + event);
    }
}

事件绑定

  1. 如果直接绑定事件的名称，默认传递事件对象作为第一个返回值

  2. 如果绑定函数调用那么事件对象必须作为最后一个参数显示传递，并且事件对象名称必须为"$event"

  • 事件修饰符
    • .stop 阻止冒泡
    • .prevent 阻止浏览器默认行为
<a @click.stop ='handle'>跳转</a>
<a @click.prevent ='handle'>跳转</a>

自定义键盘修饰符

Vue.directive('on').keyCodes.f2 = 113;
// 当触发事件

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：

  • Vue.config.keyCodes.f2 = 113;

使用自定义的按键修饰符：

<input type="text" v-model="name" @keyup.f2="add">

v-bind​

用于向组件内传递值

  • 绑定 url 的值
<a v-bind:href="url" >点击跳转</a>
// 简写
<a :href="url" >点击跳转</a>
  • 绑定 class 类名
  • 修改 style 属性值
  • 绑定 key
key: 帮助 vue 区分不同的元素，提高性能
<li :key= 'item.id' v-for='(item,index)in list'>{{item}} +'------'{{index}} </li>

向子组件传递其它数据

<MyComponent v-bind="data">
</MyComponent>
<script>
  export default{
    data(){
      return{
        data:{          age:42,          name:'老刘'        }
      }
    }
  }
</script>

相当于

<MyComponent :age="age" :name="name">
</MyComponent>
<script>
  export default{
    data(){
      return{
        data:{          age:42,          name:'老刘'        }
      }
    }
  }
</script>

v-memo​

当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。

v-model​

动态绑定，即子组件使用值的同时，也会为该值设置新的值

// 父组件中调用
<Parent v-model="visible"></Parent>
// 子页面数据

props

v-slot​

slot 负责插槽部分，简写为 #

v-if​

（包括同类的 v-else-if、v-else）

<div v-if="gotNum>10"> 留下来</div>
<div v-else-if="gotNum=10">报上名号</div>
<div v-else="gotNum<10">滚粗</div>

v-show​

使用方法

<div v-show="got">
    留下来
</div>
//got 值为false时，隐藏

注意

v-if 和 v-show 的区别，v-if 是只在符合条件时显示，其它直接隐藏，v-show 是在任何时间都会显示在 html 页面，只不过不会编译

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗(v-show中的内容很多时)。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-for​

遍历数组

<div v-show="got" v-for="(item,i) in list">{{item}}</div>
// 将对象传入数组，输出对应的对象的值
<div v-show="got" v-for="(item,i) in list">{{item.age +"-------"+item.name}}</div>
<!--一般来讲需要传入一个key进行动态绑定-->

遍历对象(键值对)

// 可以同时输出对象的键和对象的值
<div v-show="got" v-for="(value,key,index) in object">{{v+"-------"+k+"-------"+i}}</div>

算法的优化，需要在标签内部书写 v-bind:key="item.id"优化，简写:key="item.id"

当然也可以用 v-for="value of object"

v-cloak​

先通过隐藏样式在内存中进行值的替换，替换好之后再替换最终的结果

<template>
<div id="pay" v-cloak>
  {{boxer}}
  <div/>
</template>
<style>
  [v-cloak]{display: none;}
</style>

自定义指令​

当内置指令不足以满足一些需求时，可以自定义指令。

其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板，这样更高效，也对服务端渲染更友好。

可以像下面的 v-bind 一样去使用自定义指令

<my-component v-bind:title.lazy="标题" >

组件内使用​

选项式 API 中使用

<template>

</template>
<script>
  const focus = {
    mounted: (el) => el.focus()
  }
  export default{
    directives:{
      focus
    }
  }
</script>

组合式 API

// <script setup> 中使用
const vFocus = {
  mounted:(el)=>el.focus()
}
// 添加 v-focus 后，在挂载（mounted）后，会自动 focus
<template>
	<input v-focus></input> 
</template>

全局使用​

import {createApp} from 'vue'
const app = createApp({})
app.directive('focus',{
  mounted:(el)=>el.focus()
})

指令钩子

const myDirective = {
  // 在绑定元素的 attribute 前，或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

指令的钩子会传递以下几种参数：

  • el：指令绑定到的元素。这可以用于直接操作 DOM。
  • binding：一个对象，包含以下属性。
    • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
    • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
    • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
    • modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
    • instance：使用该指令的组件实例。
    • dir：指令的定义对象。
  • vnode：代表绑定元素的底层 VNode。
  • prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

举例来说，像下面这样使用指令：

<template>
<div v-example:foo.bar="起飞咯" ></div>
	其中：
foo 是 binding.arg
bar 是 modifiers
</template>
//如果想创建如上的指令解析
app.directive('example', (el, binding) => {
  // 这个方法会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})
// 或者这样
app.directive('example',{
	mounted(el,binding){
    binding.value
  }
})

参考文章​

文章连接
vue官方文档https://cn.vuejs.org/api/built-in-directives.html