南京 网站建设,儿童摄影网站源码,网站运营适合什么样的人做,网上青团智慧团建官网1、指令概念
指令 (Directives) 是带有 v- 前缀的特殊attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for指令 是例外情况)。指令的职责是#xff0c;当表达式的值改变时#xff0c;将其产生的连带影响#xff0c;响应式地作用于 DOM。 p v-ifs…1、指令概念
指令 (Directives) 是带有 v- 前缀的特殊attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for指令 是例外情况)。指令的职责是当表达式的值改变时将其产生的连带影响响应式地作用于 DOM。 p v-ifseen现在你看到我了/p v-if 指令将根据表达式 seen 的值的真假来插入/移除 p 元素。 2、指令参数
一些指令能够接收一个“参数”在指令名称之后以冒号表示。
v-bind
// v-bind 指令可以用于响应式地更新 HTML attribute
a v-bind:hrefurl.../a//简写
a :hrefurl.../a//作用动态的设置html的属性数据绑定操作
//语法v-bind:msgtitle
//简写:msgtitle
在这里 href 是参数告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。 v-on
// v-on 指令它用于监听 DOM 事件
a v-on:clickdoSomething.../a// 简写
a clickdoSomething.../a//1 v-on:事件名“要执行的少量代码
//2 v-on:事件名“函数名
//3 v-on:事件名“函数名(实参)
在这里参数是监听的事件名告知 v-on指令是绑定事件方法的指令v-on是单击效果的事件。 3、指令动态参数
从 2.6.0 版本之后可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
v-bind
// 注意参数表达式的写法存在一些约束
a v-bind:[attributeName]url ... /a// 例Vue 实例有一个 data property attributeName其值为 href
// 那么这个绑定将等价于 v-bind:href。
a v-bind:hrefurl ... /a
//简写
a :hrefurl ... /a
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值求得的值将会作为最终的参数来使用。 动态参数的值的约束 动态参数预期会求出一个字符串异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。 动态参数表达式的约束 动态参数表达式有一些语法约束因为某些字符如空格和引号放在 HTML attribute 名里是无效的。 例如 !-- 这会触发一个编译警告 -- a v-bind:[foo bar]value ... /a 变通的办法是使用没有空格或引号的表达式或用计算属性替代这种复杂表达式。 避免使用大写字符来命名键名 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)还需要避免使用大写字符来命名键名因为浏览器会把 attribute 名全部强制转为小写 !-- 在 DOM 中使用模板时这段代码会被转换为 v-bind:[someattr]。 除非在实例中有一个名为“someattr”的 property否则代码不会工作。 -- a v-bind:[someAttr]value ... /a 同样地你可以使用动态参数为一个动态的事件名绑定处理函数
v-on
input v-on:[eventName]doSomething ... /input// 例Vue 实例有一个 data property eventName其值为 focus
// 那么这个绑定将等价于 v-on:focus。
input v-on:foucsdoSomething ... /input
//简写
input foucsdoSomething ... /input
在这个示例中当 eventName 的值为 focus 时v-on:[eventName] 将等价于 v-on:focus。 4、指令修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀用于指出一个指令应该以特殊方式绑定。
例如.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
// 1、事件修饰符
form v-on:submit.preventonSubmit.../form
//简写
form submit.preventonSubmit.../form// 2、键盘修饰符
// 只有按键为keyCode的时候才触发
el-input typetext keyup.keyCodeshout()/el-input// 3、鼠标按键修饰符
// 按下鼠标左键
el-button click.leftshout(1)ok/el-button// 4、表单修饰符
// 自动过滤用户输入的首尾空格字符中间的空格不会过滤
el-input typetext v-model.trimvalue/el-input!-- 阻止单击事件继续传播 --
a v-on:click.stopdoThis/a!-- 提交事件不再重载页面 --
form v-on:submit.preventonSubmit/form!-- 修饰符可以串联 --
a v-on:click.stop.preventdoThat/a!-- 只有修饰符 --
form v-on:submit.prevent/form!-- 添加事件监听器时使用事件捕获模式 --
!-- 即内部元素触发的事件先在此处理然后才交由内部元素进行处理 --
div v-on:click.capturedoThis.../div!-- 只当在 event.target 是当前元素自身时触发处理函数 --
!-- 即事件不是从内部元素触发的 --
div v-on:click.selfdoThat.../div!-- 点击事件将只会触发一次 --
a v-on:click.oncedoThis/a!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --
!-- 而不会等待 onScroll 完成 --
!-- 这其中包含 event.preventDefault() 的情况 --
div v-on:scroll.passiveonScroll.../divinput keyup.13submit 事件修饰符 1、.stop阻止事件冒泡 2、.prevent提交事件不再重新加载页面可以用来阻止表单提交的默认行为 3、.once点击事件只会触发一次 4、.native使用时将被当成原生HTML标签看待 键盘按键修饰符 1、keyup键盘抬起 2、keydown键盘按下 3、按键码在键盘修饰符后面添加.xxx用于监听按了哪个键 常用按键码.enter.tab.delete.esc.up.down.space等。 表单修饰符 1、.lazy在表单输入时不会马上显示在页面而是等输入完成失去焦点时才会显示 2、.trim过滤表单输入时两边的空格 3、.number限制输入数字或将输入的数据转为数字 鼠标按钮修饰符 1、.left左键点击 2、.right右键点击 3、.middle中键点击 5、指令缩写
v- 前缀作为一种视觉提示用来识别模板中 Vue 特定的 attribute。
当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时v- 前缀很有帮助
因此Vue 为 v-bind 和 v-on 这两个最常用的指令提供了特定简写
v-bind缩写
!-- 完整语法 --
a v-bind:hrefurl.../a!-- 缩写 --
a :hrefurl.../a!-- 动态参数的缩写 (2.6.0) --
a :[key]url ... /a
v-on缩写
!-- 完整语法 --
a v-on:clickdoSomething.../a!-- 缩写 --
a clickdoSomething.../a!-- 动态参数的缩写 (2.6.0) --
a [event]doSomething ... /a
符号 : 与 对于 attribute 名来说都是合法字符在所有支持 Vue 的浏览器都能被正确地解析。
