JS经典实例网站首页 JS经典实例

vue服务端渲染-自定义指令

发布时间：2020-05-30 14:59:49编辑：雪饮阅读（）

自定义指令

同样的先初始化一个项目

vue init webpack-simple 01_directive

进入项目目录npm install、npm run dev

基础定义与调用

在src/main.js中定义如

import Vue from 'vue'
import App from './App.vue'
// 使用的时候是v-demo 注册的时候是demo
Vue.directive('demo', {
// 指令被编译好，即将运行功能的时候触发
bind: function (el, binding, vnode) {
 var s = JSON.stringify
 el.innerHTML =
 'name: ' + s(binding.name) + ' ' +
 // 计算表达式后的结果（vue运行环境内）
 'value: ' + s(binding.value) + ' ' +
 // 原本的表达式
 'expression: ' + s(binding.expression) + ' ' +
 'argument: ' + s(binding.arg) + ' ' +
 'modifiers: ' + s(binding.modifiers) + ' ' +
 'vnode keys: ' + Object.keys(vnode).join(', ')
}
});
new Vue({
el: '#app',
render: h => h(App)
})

则在app.vue中调用如

<template>
   <div id="app">
     <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'app',
   data () {
     return {
       message: '消息'
     }
   }
 }
 </script>

表达式

在上面调用处的message算是一个表达式，支持当前组件(app.vue)中的变量(data)里以及自定义表达式，如下面这样也可以

<div id="hook-arguments-example" v-demo:foo.a.b="'苦乐都跟随'+'举手投足不违背'"></div>

自定义指令的应用

我们一个需求是页面中的input要通过代码方式使其显示并聚焦

实现如

<template>
   <div id="app">
    <button @click="isShow=!isShow">插入元素</button>
     <input v-if="isShow" v-focus>
   </div>
 </template>
 
 <script>
 export default {
   directives:{
     focus:{
       inserted:function(el){
         el.focus();
       }
     }
   },
   name: 'app',
   data () {
     return {
       message: '消息',
       isShow:false
     }
   }
 }
 </script>

这个实现方式很明了，用的就是自定义指令的方式。

再看看以前的实现方式

nextTick实现方式

<template>
   <div id="app">
    <button @click="addInput">插入元素</button>
     <input v-if="isShow" ref="input">
   </div>
 </template>
 
 <script>
 export default {
   name: 'app',
   data () {
     return {
       message: '消息',
       isShow:false
     }
   },
   methods:{
     addInput(){
       this.isShow=!this.isShow;
       this.$nextTick(function(){
         this.$refs.input.focus();
       })
     }
 
   }
 }
 </script>