[教程指导]Vue 指令之初体验

xperia发布于6 个月前 • 172 次阅读

Vue指令

解释:指令是带有v-前缀的特殊属性
作用:当表达式的值发生改变时,将其产生的影响,响应式的作用于DOM

v-text

解释:更新DOM对象中的textContent <h1 v-text="message"></h1>

v-html

解释:更新DOM对象中的innerHTML <h1 v-html="message"></h1>

v-bind

作用:当表达式的值发生改变时,将其产生的影响响应式的作用于DOM
语法:v-bind:title=“msg”
简写::title=“msg”
<a v-bind:href="url"></a>

v-on

作用:绑定时间
语法:v-on:click=“fn”
简写@click=“fn”
说明:绑定的时间在methods里面
<a v-on:click="doSomething"></a>

v-model

作用:在表单元素上创建双向数据绑定
说明:监听用户的输入事件来更新数据

<input type="text" v-model="message">
<p>{{message}}</p>

v-for

作用:基于元数据多次渲染元素或者源模块

<li v-for="item in items">
    {{ item.message }}
</li>

v-if 和 v-show

条件渲染
  • v-if:根据表达式的值的真假条件,创建或者销毁元素
  • v-show:根据表达式的值的真假,切换元素的display属性值
  • 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
  • 使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。
事件修饰符
  • .stop 阻止冒泡 调用event.stopPropagation()
  • .prevent 阻止默认行为 调用 event.preventDefault()
  • .capture 添加时间监听器时使用事件捕获模式
  • .self 只当事件在该元素本身(不是子元素)触发时,才会触发事件
  • .once 事件只触发一次
共收到 1 条回复
y

水一波