今天我们来了解一下vue的属性、条件、渲染、事件指令及修饰符
基本指令v-bind:
v-bind动态属性:常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据后都会实时更新。
- 语法格式1:单个语法格式
v-bind:attributeName=variable
- 语法格式2:对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
案例:在页面中利用Vue实例的变量制作一个超级链接
- 语法格式3:数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”
案例(绑定类名):
基本指令v-if
指令主要职责就是当表达式值改动时,相应的将某些行为应用到DOM上,以v-if为例:
v-if指条件性渲染,为true时渲染DOM,否则不进行渲染:
当数据show为true时,p元素会被插入,为false时则会被移除。
数据驱动DOM是Vue.js的核心理念,所以尽量避免直接操作DOM,只需要维护关注数据即可,DOM的事Vue会进行处理。
基本指令v-show
v-show也是指条件性渲染,用法与v-if类似:
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-show与v-if
vue中显隐方法常用两种,v-show和v-if,但这两种是有区别的
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
基本指令v-on
- v-on: @方法名
- 语法:v-on:事件类型=”方法名”
v-on用于绑定事件监听器,实现一些交互功能。如下所示
表达式可以是方法名,方法写在methods属性内,且是函数形式,函数内的this指向实例本身,因此可以通过this.xxx来访问修改数据。
在button按钮上绑定事件,除了click还可以是其他事件类型,例如dblclick、keyup、mouseover等 - v-on表达式
- 语法:v-on:事件类型=”内联语句”
- 表达式除了方法名,也可以是内联语句
建议将事件处理放到methods里声明一个方法,提高可读性与维护性。
v-on修饰符
- v-on修饰符
- 以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
①.stop:阻止事件的传递,即阻止事件向上冒泡。
②.prevent:阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。
③.capture:使用事件捕获机制
④.self:当事件在该元素自身触发时执行相应的事件处理程序,在该元素的子元素上不触发。
因为父级点击事件被修饰符绑定,只有在直接点击到父元素 div ,事件才会被触发。
即使点击了它的子元素触发了子元素的事件,按照事件冒泡原理,父元素的事件应当被触发,但是因为事件的触发源并不是事件绑定的元素本身,所以父元素事件不会被触发。
⑥.once:绑定的事件只能触发一次。
keyup.keyCode键值修饰符,用来监听键盘事件。可以通过按键名称来监听,也可以自定义按键名称(键盘修饰符及自定义键盘修饰符)
1、
2、
v-on修饰符小结
- .stop冒泡事件修饰符,阻止事件向上冒泡
- .prevent默认事件修饰符,阻止对象的默认行为
- .capture捕获事件修饰符,使用事件捕获机制
- .self自身事件修饰符,只当事件是从事件绑定的元素本身触发时才触发回调
- .once一次性事件修饰符,绑定的事件只能触发一次
- keyup.keyCode键值事件修饰符,用来监听键盘事件(键盘修饰符以及自定义键盘修饰符)
methods选项-代理方法
代理方法调用:
Vue.js将methods里的方法也代理了, 所以可以像访问Vue数据一样来调用方法。
在hide方法里,直接通过this.hide_p()调用了hide_p()函数。这样只是一种写法,具体应用场景后续结合生命周期讲解。
拓展:动态参数
2.6版本新增:
从 2.6.0 开始,可以用方括号括起来的 JS表达式作为一个指令的参数,如下所示动态绑定title属性, 实例有一个 data 属性 attributeName,其值为 “title”,那么这个绑定将等价于 v-bind:title:
······
今天的分享就到这里来啦~
要好好学习鸭~
·······