关键词:
一、自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus,该指令的功能是在页面加载时,元素获得焦点:
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus‘,
// 当绑定元素插入到 DOM 中。
inserted: function (el)
// 聚焦元素
el.focus()
)
// 创建根实例
new Vue(
el: ‘#app‘
)
</script>
用 directives 选项来注册局部指令,这样指令只能在这个实例中使用
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
<script>
// 创建根实例
new Vue(
el: ‘#app‘,
directives:
// 注册一个局部的自定义指令 v-focus
focus:
// 指令的定义
inserted: function (el)
// 聚焦元素
el.focus()
)
</script>
二、钩子
1、钩子函数
指令定义函数提供了几个钩子函数(可选):
(1)bind:
只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
(2)inserted:
被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
(3)update:
被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
(4)componentUpdated:
被绑定元素所在模板完成一次更新周期时调用。
(5)unbind:
只调用一次, 指令与元素解绑时调用。
2、钩子函数参数
钩子函数的参数有:
el: 指令所绑定的元素,可以用来直接操作 DOM 。
binding: 一个对象,包含以下属性:
name: 指令名,不包括 v-
前缀。
value: 指令的绑定值, 例如: v-my-directive="1 + 1"
, value 的值是 2。
oldValue: 指令绑定的前一个值,仅在 update
和 componentUpdated
钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1"
, expression 的值是 "1 + 1"
。
arg: 传给指令的参数。例如 v-my-directive:foo
, arg 的值是 "foo"
。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar
, 修饰符对象 modifiers 的值是 foo: true, bar: true
。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点,仅在 update
和 componentUpdated
钩子中可用。
以下实例演示了这些参数的使用:
<div id="app" v-runoob:hello.a.b="message">
</div>
<script>
Vue.directive(‘runoob‘,
bind: function (el, binding, vnode)
var s = JSON.stringify
el.innerHTML =
‘name: ‘ + s(binding.name) + ‘<br>‘ + //runoob
‘value: ‘ + s(binding.value) + ‘<br>‘ + //测试
‘expression: ‘ + s(binding.expression) + ‘<br>‘ + //message
‘argument: ‘ + s(binding.arg) + ‘<br>‘ + //hello
‘modifiers: ‘ + s(binding.modifiers) + ‘<br>‘ + //a:true,b:true
‘vnode keys: ‘ + Object.keys(vnode).join(‘, ‘)
)
new Vue(
el: ‘#app‘,
data:
message: ‘测试‘
)
</script>
有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
Vue.directive(‘runoob‘, function (el, binding)
// 设置指令的背景颜色
el.style.backgroundColor = binding.value.color
)
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
<div id="app">
<div v-runoob=" color: ‘green‘, text: ‘测试‘ "></div>
</div>
<script>
Vue.directive(‘runoob‘, function (el, binding)
// 简写方式设置文本及背景颜色
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
)
new Vue(
el: ‘#app‘
)
</script>
三、路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由需要载入 vue-router 库
中文文档地址:vue-router文档。
1、安装
//直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
//NPM
//推荐使用淘宝镜像:
cnpm install vue-router
2、简单实例
Vue.js + vue-router 可以很简单的实现单页应用。以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义(路由)组件。 可以从其他文件 import 进来
const Foo = template: ‘<div>foo</div>‘
const Bar = template: ‘<div>bar</div>‘
// 2. 定义路由:每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器,
或者,只是一个组件配置对象。
const routes = [
path: ‘/foo‘, component: Foo ,
path: ‘/bar‘, component: Bar
]
// 3. 创建 router 实例,然后传 `routes` 配置,你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter(
routes // (缩写)相当于 routes: routes
)
// 4. 创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
const app = new Vue(
router
).$mount(‘#app‘)
// 现在,应用已经启动了!
</script>
vue2.0和vue3.0中自定义指令(directive)的区别(代码片段)
目录使用自定义指令vue2.0组件中注册全局中注册Vue3.0小坑自定义指令中的参数 vue2.0和vue3.0中的区别其他区别===》 vue2.0和vue3.0中语法的区别自定义指令是什么?类似于vue中的v-for v-if v-model...类似的指令语法,... 查看详情
vue2.0笔记——自定义指令(代码片段)
自定义指令自定义指令主要用于,除系统提供外,自己对DOM的底层操作。例如当页面加载时需要将一个文本框为自动获得焦点。只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。我们通过全局... 查看详情
vue3的自定义指令(代码片段)
...系列指令(比如v-model或v-show)之外,Vue还允许你注册自定义的指令(CustomDirectives)。1.自定义指令的目的和简单介绍自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩... 查看详情
vue3的自定义指令(代码片段)
...系列指令(比如v-model或v-show)之外,Vue还允许你注册自定义的指令(CustomDirectives)。1.自定义指令的目的和简单介绍自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩... 查看详情
vue---自定义指令的使用(代码片段)
在vue开发项目中,指令的使用场景也是比较多的,那么该如何定义使用呢?找到src/directive下新建gender目录,下面新建index.js和gender.js index.jsimportgenderfrom‘./gender‘constinstall=function(Vue)Vue.directive(‘gender‘,gender)if(window.Vue)win 查看详情
分享8个非常实用的vue自定义指令(代码片段)
...核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过Vue... 查看详情
vue指令(代码片段)
自定义指令简介除了核心功能默认内置的指令(v-model 和 v-show),Vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用... 查看详情
vue过滤器常用相关指令自定义指令函数式和对象式以及它们的注意事项(代码片段)
...8;类似XSS攻击)3.4v-clock指令3.5v-once指令3.6v-pre指令4.自定义指令4.1判断一个元素是否为真实DOM4.2自定义指令(函数定义)4.3自定义指令 查看详情
vue指令03---自动获取焦点(自定义指令)和过滤器的学习(代码片段)
1.1自动获取焦点 在自动获取焦点的学习中涉及到了一个钩子函数mounted(),它表示页面一加载进来就执行函数里面的内容,(和window.onload相似,这样有助于理解),mounted钩子函数的名字不能随便更改,而且不能写在methods... 查看详情
javascript自定义vue指令(代码片段)
vue自定义指令(代码片段)
在Vue中可以自定义指令,通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对Vue的底层有了进一步的了解。我们可以通过Vue.directive()或... 查看详情
vue自定义指令(代码片段)
自定义指令https://cn.vuejs.org/v2/guide/custom-directive.html简介WatchafreevideolessononVueSchool除了核心功能默认内置的指令(v-model 和 v-show),Vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的... 查看详情
vue自定义防抖&节流指令的实现&全局指令定义和使用-案例(代码片段)
...呢,关于防抖节流的处理,发现大家都是用vue自定义指令做的,看了看vue自定义指令也不麻烦,便自己动手也撸一个 查看详情
vue2.0学习—自定义指令(四十九)(代码片段)
【Vue2.0学习】—自定义指令(四十九)需求:需求1:定义一个v-big指令,和v-text功能相似,但会把绑定的数值放大10倍需求2:定义一个v-fbind指令,和v-bind功能相似,但可以让其绑定的input元素默认获取焦... 查看详情
vue:八种实用的自定义指令(代码片段)
除了核心功能默认内置的指令,Vue也允许注册自定义指令。在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。示例:... 查看详情
vscode自定义代码片段11——vue路由的配置(代码片段)
vue路由的配置 //v'router //11如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //vue的路由 "Printtoconsole": ... 查看详情
十自定义指令eslint代码检查工具与axios挂载到vue原型(代码片段)
一、自定义指令1.1、什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。1.2、自定义指令的分类vue中的自定义指令分为两类,分别是:私有自定义指令全局自定义... 查看详情
vue自定义指令自己实现v-if和v-show(代码片段)
一、自定义指令语法:组件中使用<template><div><inputtype="text"v-focus='123'></div></template><script>exportdefaultdirectives:focus://自定义指令的名字//下面每个方 查看详情