一:自定义指令
除了默认设置的核心指令(v-model
和v-show
), Vue 也允许注册自定义指令。
下面我们注册一个全局指令v-focus,
该指令的功能是在页面加载时,元素获得焦点:
Vue 测试实例 - 菜鸟教程(runoob.com)
页面载入时,input 元素自动获取焦点:
结果:
image.png
我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:
Vue 测试实例 - 菜鸟教程(runoob.com)
页面载入时,input 元素自动获取焦点:
结果:
image.png
钩子
钩子函数
指令定义函数提供了几个钩子函数(可选):
- bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
- inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
- update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
- componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
- unbind: 只调用一次, 指令与元素解绑时调用。
钩子函数参数
钩子函数的参数有:
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 钩子中可用。
以下实例演示了这些参数的使用:
Vue 测试实例 - 菜鸟教程(runoob.com)
结果:
name: "runoob"
value: "菜鸟教程!"
expression: "message"
argument: "hello"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce
有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:
Vue.directive('runoob', function (el, binding) {
// 设置指令的背景颜色
el.style.backgroundColor = binding.value.color
})=
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
Vue 测试实例 - 菜鸟教程(runoob.com)
结果:
image.png
另外: 添加一个自定义指令,有两种方式:
- 通过 Vue.directive() 函数注册一个全局的指令。
- 通过组件的 directives 属性,对该组件添加一个局部的指令。
创建全局指令:
需要传入指令名称以及一个包含指令钩子函数的对象,该对象的键即钩子函数的函数名,值即函数体,钩子函数可以有多个。
Vue.directive('self_defined_name',{
bind:function(el,binding){
//do someting
},
inserted: function(el,binding){
//do something
},
}
创建局部指令:
直接向创建的 Vue 实例的 directives 字典属性添加键值对,键值对即需要添加的自定义指令及对应钩子函数字典对象。键值对可以有多个,对应多个自定义指令。
new Vue({
el:'#app',
directives:{
self_defined_name1:{
bind:function(el,binding){
//do something
}
inserted:function(el,binding){
//do something
},
}
self_defined_name2:{
bind:function(el,binding){
//do something
}
inserted:function(el,binding){
//do something
},
}
}
})
二:路由
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
简单实例
Vue.js + vue-router
可以很简单的实现单页应用。
是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。
以下实例中我们将 vue-router
加进来,然后配置组件和路由映射,再告诉 vue-router
在哪里渲染它们。代码如下所示:
HTML 代码:
Hello App!
Go to Foo
Go to Bar
JavaScript 代码:
Vue 测试实例 - 菜鸟教程(runoob.com)
Hello App!
Go to Foo
Go to Bar
结果:点击蓝色的按钮 下面的黑色字体就会改变
点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"
。
相关属性
接下来我们可以了解下更多关于
to
表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。
Home
Home
Home
Home
Home
User
Register
replace
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。
append
设置 append 属性后,则在当前 (相对) 路径前添加其路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
tag
有时候想要
foo
foo
active-class
设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。
Router Link 1
Router Link 2
注意这里 class 使用 active-class="_active"。
exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
Router Link 1
Router Link 2
event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
Router Link 1
以上代码设置了 event 为 mouseover ,及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码,在 Github 上下载::https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令:
# 安装依赖,使用淘宝资源命令 cnpm
cnpm install
# 启动应用,地址为 localhost:8080
cnpm run dev
如果你需要发布到正式环境可以执行以下命令:
cnpm run build
执行成功后,访问 http://localhost:8080 即可看到如下界面:
image.png