1.基础指令
v-clock:解决闪烁问题,不会覆盖文本中原始内容。
v-text:解决闪烁问题,用于操作纯文本,会覆盖文本中原始内容。
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。
v-html:用于输出html,v-html会将其当html标签解析后输出。
v-bind:用于绑定属性指令,只能实现数据的单向绑定,可简写为:。这个指令很重要,常用
v-on:用于绑定事件指令,可简写为@。
以上具体实现可见vue入门(二)
v-model:可以实现表单元素和model中的数据的双向绑定。
具体操作见下图:
v-for:实现循环,可循环普通数组、循环对象数组、循环对象、迭代数字。
具体操作见下图:
循环普通数组:
循环对象数组:
循环对象:
迭代数字:
注意:1.v-for 循环的时候,key属性只能使用number或string
2.key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值
3.在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定 唯一的 字符串/数字 类型 : key 值
v-if和v-show
在Vue中,我们可以使用v-if和v-show来控制元素或模板的渲染。
v-if判断是否加载,可以减轻服务器的压力,在需要时加载;
v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅。
2.事件修饰符
- .stop阻止冒泡
- .prevent阻止默认事件
- .capture添加事件侦听器时使用事件捕获模式
- .self只当事件在该元素本身(比如不是子元素)触发时触发回调
- .once事件只触发一次
3.在vue中使用样式
使用class样式
1.数组
<h1 :class="['thin','italic']">这是一个很大很大的H1,大到你无法想象!!!</h1>
2.数组中使用三元表达式
<h1 :class="['thin','italic',flag?active:'']">这是一个很大很大的H1,大到你无法想象!!!</h1>
3.数组中嵌套对象来代替三元表达式提高可读性
<h1 :class="['thin','italic',{'active':flag} ]">这是一个很大很大的H1,大到你无法想象!!!</h1>
4.直接使用对象
使用内联样式
1.直接在元素上通过:style的样式,书写样式对象
<h1 :style="{color:'red',font-size:'40px'}">这是一个善良的H1</h1>
2.将样式对象,定义到data中,并直接引用到:style中
- 在data上定义样式:
data:{
styleObj1:{ color:'red','font-weight':200},
styleObj2:{ 'font-style':italic}
}
- 在元素中,通过属性绑定的样式,将样式对象应用到元素中:
<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>