首页 > 程序开发 > web前端 > HTML/CSS > 正文
vue学习笔记--各种指令的语法
2017-08-11 09:07:00       个评论    来源:  
收藏    我要投稿

vue中有许多指令,在这里我们对这些指令做个粗滤的解释说明,便于更好的选择使用。

① v-bind : 动态绑定指令,使用v-bind:动态变化的值=”表达式”来修改html的属性值。

例子:v-bind:href=”hrefData”,可以使用 : 来代替v-bind。v-bind:class 等价于 :class

② v-model :在表单控件元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。对于要求 IME (如中文、 日语、 韩语等) (IME意为’输入法’)的语言,v-model不会在 IME 输入中得到更新。如果想实现更新,请使用 input事件。

在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步。

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值。

<input v-model.number="age" type="number">

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入

<input v-model.trim="msg">

③ v-if v-show : 条件渲染,根据条件值的真假确定html是否渲染。

区别:带有 v-show 的元素始终会被渲染并保留在 DOM 中,v-show 是简单地切换元素的 CSS 属性 display 。

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

④ v-for:根据一组数组的选项列表进行渲染,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

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

var example1 = new Vue({
  el: '#example',
  data: {
    items: [
      {message: 'first' },
      {message: 'second' }
    ]
  }
})

v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

⑤ v-on:监听 DOM 事件来触发一些 JavaScript 代码。vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

 

点击复制链接 与好友分享!回本站首页
上一篇:angular自定义指令详解Directive
下一篇:最后一页
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 |
版权所有: 88bifa.com--致力于做实用的IT技术学习网站