vue.js 四(指令和自定义指令)
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象
v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>
v-html 更新元素的 innerHTML,如果取回的值里面包含了html的样式,可以使用这个指令。
以下抄写了官方注意事项,对于用户输入的HTML,显示的时候需要谨慎处理。如果是服务器自己生成的HTML,完全由开发者掌控的代码,可以忽略
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html
组合模板,可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html
,永不用在用户提交的内容上。
v-show
根据表达式之真假值,切换元素的 display
CSS 属性。
当条件变化时该指令触发过渡效果。
简单说就是控制当前指令的标签是否显示
v-if,v-else, v-else if
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>
,将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
条件判断,这里简单的条件判断还行,复杂的判断还是直接在模型里处理吧。
v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event
属性: v-on:click="handle('ok', $event)"
。
修饰符
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button>
在子组件上监听自定义事件(当子组件触发 “my-event” 时将调用事件处理器):
<my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>
注意上面对于vue版本的限制,低版本不支持!主要适用于各类事件的处理。
v-bind
动态地绑定一个或多个特性,或一个组件属性到表达式。
在绑定属性时,属性必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时,可以绑定到一个包含键值对的对象。注意此时 class
和 style
绑定不支持数组和对象。
v-model
v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
常用的表单控件如select, input,textarea 等
如果是select绑定的值会直接选中,其他的输入则直接选择文本
v-pre
官方的解释是:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
至今没有怎么用过
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
这个指令使用场景比较特殊,在初始化的时候会显示原始的代码,例如
<ul v-for="item in items"><li>{{ item.name }}</li> </ul>
页面加载未完成时会显示
{{ item.name }}
这时候如果加入了这个指令标签在ul上
<ul v-cloak v-for="item in items"><li>{{ item.name }}</li> </ul>
然后对应的全局css上加入
[v-cloak] {display: none; }
页面初始化未完成的时候,整个标签会被隐藏,加载完成后这个标签会自动去掉,显示完整的结果。
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<div v-once><p>{{msg}}</p></div><div v-on:click="changeValue">点击修改msg的值</div>
我们绑定一个点击事件试图网页渲染完成后去修改msg的值,事件触发有此标签的内容不会再更改。
---------------------------------------------------------------------------------------------------------
标签内容有的直接拷贝的官方网页上的说明,部分附上了简单的实例
所有的内容尝试一遍,还是有些意外的收货的
可能刚开始项目使用过程中,只用到了部分指令,在都了解了一遍后,我又把原来项目里面部分功能重新修改了一遍
有的功能一个指令能完成的,我可能用了好几个指令去协作完成,毕竟刚开始看官方文档的时候,看得不是很全面
看文档还是要多动手尝试,加深印象,将来用起来更加得心应手
下面附上一个自定义指令
main.js
import Vue from 'vue' import App from './App' import router from './router'Vue.config.productionTip = falseVue.directive('title', {inserted: function (el, binding) {let title = binding.value;if (title) {document.title = binding.value;}} });/* eslint-disable no-new */ new Vue({el: '#app',router,template: '<App/>',components: { App } })
然后我们的vue文件里面就可以使用v-title指令了
<template><div v-title="'这里是标题'">这里是内容</div> </template><script>export default {name: 'home',components: {},data() {return {}} } </script> <style lang="scss" scoped></style>
注意指令内容里面单引号标识这是个字符串,不用单引号,指令值表示变量的名称,要在data里面声明对应的变量名
<template><div v-title="title">这里是内容</div> </template><script>export default {name: 'home',components: {},data() {return {title:"这里是标题"}} } </script> <style lang="scss" scoped></style>
全局指令注册属于全局API,全局注册指令用法
// 注册 Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {} })// 注册(传入一个简单的指令函数) Vue.directive('my-directive', function () {// 这里将会被 `bind` 和 `update` 调用 })
指令定义函数提供了几个钩子函数说明,只需要声明用到的函数,不需要的可以省略:
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 }
。
- name: 指令名,不包括
- vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
- oldVnode: 上一个虚拟节点,仅在
update
和componentUpdated
钩子中可用。
参数使用如下
Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })
指令在绑定网页元素值有优势,例如某些网页上的值显示需要保留两位小数
但是涉及到需要附带元素的css样式,需要附带一些参数控制等,还是需要选择使用插件解决。
转载于:https://www.cnblogs.com/stealth7/p/6958252.html
vue.js 四(指令和自定义指令)相关推荐
- Vue.js 学习笔记 十一 自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
- Vue.js 学习笔记 十 自定义按键事件
<div id="divApp"><!--任何键盘动作都会触发--><input type="text" v-on:keyup=& ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
- [vue] 你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些?
[vue] 你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些? bind inserted update componentUpdated unbind 个人简介 我是歌谣,欢迎和大家一起 ...
- Vue011_ 内置指令与自定义指令
内置指令与自定义指令 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签 ...
- vue实现波纹效果_简单的Vue.js插件可实现自定义波纹效果
vue实现波纹效果 Vue-Rippler (vue-rippler) Simple Vue.js plugin for custom ripple effect. 简单的Vue.js插件可实现自定义 ...
- 2.0 vue内置指令与自定义指令
一.概述 模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...
- Vue.js 2.x笔记:指令(4)
1. 内置指令 指令是Vue.js 中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM 行为. Vue.js 本身提供了大量的内置指令来进行对DOM 的操作,同时可以开发自定义指令. 2. ...
最新文章
- Git 分布式版本管理
- ubuntu下安装nagios
- tikhonov正则化 matlab_4 L1和l2正则化详解(花书7.1 参数范数惩罚)
- Android O: View的绘制流程(一): 创建和加载
- SFrame中的apple函数
- 1.5编程基础之循环控制 26 统计满足条件的4位数个数 python
- 基于JAVA+SpringBoot+Vue+Mybatis+MYSQL的办公一体化系统
- linux下网络包分析工具下载,Wireshark下载-网络封包分析工具 v3.2.6 官方版 - 下载吧...
- my live work / interview / renshebu / gongxinbu
- 量子计算:一个即将破灭的泡沫?
- html设计渐变背景,HTML网页设计之div渐变背景色
- 无法访问https://element.eleme.cn和https://element.eleme.io
- 城联优品入股浩柏国际进军国际资本市场,已完成第一步
- 高拍仪拍照SDK开发(良田影像S300L|S500L)
- 简普科技Q3财报解读:业绩超过预期之后的更多确定性
- PHP复合函数,复合函数中的剥洋葱理论
- 增大mysql修改表空间_扩充数据库表空间
- c语言中flash文件系统,适宜于嵌入式多媒体应用的Flash文件系统
- 10年后重温《我奋斗了18年才和你坐在一起喝咖啡》
- 解决pip无法更新问题的简单方法:You are using pip version 20.1.2, however version 20.2.2 is available.......问题 的完