|
[Vue.js]学习笔记-Vue.js自定义指令-directives
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
既然Vue.js能注册全局指令， 反言之就可以注册一个局部指令， 即只在这个实例中使用， 方法如下： 在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用
实例：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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>
</body>
</html>
运行结果：
通过本例可以看到， 我们使用了局部指令，注册了一个focus指令， 来使input框在页面运行时获取焦点
| 
窥视卡
雷达卡
发表于 2019-1-3 11:51:41
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2019-1-3 15:57:22
