1. What is a custom command
The inline attributes we see starting with v- are all instructions. Different instructions can complete or realize different functions. There are default instructions in vue.vue 也允许注册自定义指令对普通 DOM元素进行底层操作。
2. Common vue instructions
- v-once: Only one rendering will be performed, and when the data changes, it will not change again.
<div id="app">
<p v-once>{
{
msg}}</p>
<input v-model="msg" type="text" /> // 当输入值变化的时候msg回发生变化，但是p标签渲染出的msg不会变化了
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:'你好，佳佳'
}
})
</script>
- v-show: accepts an expression or a boolean value. Equivalent to adding a display attribute to the element
<div id="app">
<div v-show="msg == 'wangjiajia' ">{
{
msg}}</div> // 只有当input框输入了wangjiajia，才会显示。在这里相当于给div标签添加了display:none属性
<input v-model="msg" type="text" />
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:'你好，佳佳',
}
})
</script>
- v-if、v-else、v-else-if
- v-if and v-show have the same effect, the difference is that v-if is re-rendering, which belongs to deletion in the true sense, and the rendering overhead is high. And v-show uses the display: none attribute to control display and hide.
- If you switch frequently, it is recommended to use v-show to reduce the overhead caused by rendering.
- v-if can be used alone, while v-else-if, v-else must be used in combination with v-if
<div id="app">
<div v-if="msg == 'wangjiajia' ">{
{
msg}}</div>
<div v-else-if="msg == 'wangtongtong' ">{
{
msg}}</div>
<div v-else>davide</div>
<input v-model="msg" type="text" /> //只有在input框输入wangjiajia才会显示wangjiajia,输入wangtongtong才会显示wangtongtong。否则都是显示davide
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:'你好，佳佳',
}
})
</script>
- v-for: can be used to traverse arrays, objects, and strings.
<div id="app">
<div v-for="(item, index) in bookList" :key="index">{
{
item }}</div>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:'你好，佳佳',
bookList:['三国演义', '西游记', '水浒传', '红楼梦']
}
})
</script>
- v-text: is a rendering string, similar to { { }}, it is recommended to use { { }}
<p>{
{
msg}}</p> 等价于 <p v-text='msg'></p>
- v-html: render as html structure
<div>{
{
innerHtml}}</div>
<div v-text="innerHtml"></div>
<div v-html="innerHtml"></div>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:'你好，佳佳',
bookList:['三国演义', '西游记', '水浒传', '红楼梦'],
innerHtml:'<button>一个按钮</button>'
}
})
</script>
7. v-bind: used for data transfer, the syntactic sugar form is:. That is, v-bind:value='value' is equivalent to:value='value'.
8. v-on: used for event binding, the syntactic sugar form is @. That is, v-on:click="clickfunc" is equivalent to @click="clickfunc"
9. v-model: two-way binding. v-model='variable name'. Restricted to use in <input>, <select>、<textarea>, and components.
ps: See vue2 for details: vue command
3. How to implement custom instructions
- In vue2:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
})
// 注册一个局部自定义指令 `v-focus`
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
}
}
- In vue3: (take the permission control button as an example)
- Generally create a new directives.js file. for custom commands
- Introduce this file in main.js and mount it
Seven hook functions:
- created: Called before the bound element's attribute or event listener is applied. This is useful when a directive needs to be attached in an event listener before the normal v-on event listener is called.
- beforeMount: Called when the directive is first bound to the element and before the parent component is mounted.
mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。- beforeUpdate: Called before updating the VNode containing the component.
- updated: Called after the containing component's VNode and the VNodes of its subcomponents have been updated.
- beforeUnmount: Called before unmounting the parent component of the bound element
- unmounted: Called only once, when the directive is unbound from the element and the parent component is unmounted.
Four parameters:
- he:
指令所绑定的元素，可以用来直接操作 DOM。 - Binding: We use custom instructions
传递的各种参数，主要存在于这个对象中, and the object has many attributes. The following attributes are the ones we use most in our daily development: for example：v-buttonCheck:some="['delete', 'create']"value：指令绑定的值，在这里就是['delete', 'create']arg：传给指令的参数，在这里就是some
- vnode: The virtual node generated by Vue compilation.
- oldVnode: the previous virtual node, only available in update and componentUpdated hooks.
注意：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
<el-button v-buttonCheck:some="['delete', 'create']" type="primary">点击</el-button> // 指令的使用，some是传递的参数。['delete', 'create']是指令绑定的值。这里的意思就是，button按钮只有在具备delete或者create权限时才会显示。
// usersPermissions：表示当前用户所具备的权限，正常该数据应该是从服务端加载而来，但是我这里简单起见，就直接定义好了，这里表示当前用户具备delete和edit权限。
const usersPermissions = ['create', 'edit']
const buttonCheck = {
mounted(el,binding) {
const {
value } = binding
// 看value提供的权限是否在usersPermissions中具备。如果有，说明当前按钮具备权限，此时应该正常显示，如果没有，说明当前按钮不具备权限，此时不应该显示。
let f = value.some(item => {
return usersPermissions.includes(item)
})
if (!f) {
// 从父节点删除按钮
el.parentNode && el.parentNode.removeChild(el)
}
}
}
export default app => {
app.directive('buttonCheck', buttonCheck)
}
在main.js中引用并挂载
import App from './App.vue'
import directives from 'utils/directives.js'
let app =createApp(App)
directives(app)
注：自定义vue指令灵活多变，本文只是提供一种常见流程。具体逻辑可以根据具体业务需求自行定义指令。