vue 常用指令总结

标签: 指令 vue
5人阅读 评论(0) 收藏 举报
分类:

v-on

缩写为:@
用法:绑定事件监听器
如:

<button v-on:click="doThis"></button>
等级于
<button @click="doThis"></button>

v-blind

缩写为::
用法:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
如:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
等价于
<!-- 缩写 -->
<img :src="imageSrc">

v-model

用法:在表单控件或者组件上创建双向绑定

你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

如:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-once

用法:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

如:

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

v-for

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

如:

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

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
查看评论

Vue学习--常用指令

1、创建一个vue实例    vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改。为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例...
  • theVicTory
  • theVicTory
  • 2018-03-10 18:27:46
  • 40

vue的常用指令

vue指令下面将介绍Vue中常用的几个内置指令。当然,Vue除了内置指令,也可以根据需求自定义指令。v-if指令条件判断指令,根据表达式值的真假来插入或删除元素,表达式返回一个布尔值,语法如下:v-i...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017-10-07 22:05:46
  • 233

vue指令的定义及常用指令

1.指令的定义: 扩展html标签功能,属性 常用指令: angular:   ng-model   ng-controller  ng-repeat  ng-click  ng-...
  • u013005675
  • u013005675
  • 2017-03-16 00:56:50
  • 489

vue笔记---模版语法--指令缩写

v-前缀在模板中是作为一个标示vue特殊属性的明显标识。使用vue.js为现有的标记 添加动态行为时,它会很有用,但对于一些经常食用的指令来说有点繁琐。同时, 当搭建vue.js管理所有的模版的s...
  • qq_34530330
  • qq_34530330
  • 2017-03-06 14:03:46
  • 260

IA-32 指令集大全

  • 2010年07月31日 12:59
  • 5.33MB
  • 下载

Vue.js之常用指令集锦

v-on:绑定事件,可以缩写为@,比如@click; html lang="en"> head> meta charset="UTF-8"> title>v-bind高级用法t...
  • qq_33733970
  • qq_33733970
  • 2018-01-25 17:00:20
  • 45

原生js常用命令总结

1.输出语句:document.write(""); 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺...
  • wuhuagu_wuhuaguo
  • wuhuagu_wuhuaguo
  • 2017-10-10 14:19:25
  • 237

Vue.js-内置指令总结

Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令: v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-on指令v-if指令 v-if是条件渲...
  • youlingxx
  • youlingxx
  • 2018-02-24 15:04:24
  • 44

vue指令大全

我之前学了学angular  发现angular和vue的指令有点类似 先说一下 new  Vue({          el: "#box", // element(元素) 当前...
  • someby
  • someby
  • 2017-07-28 11:05:12
  • 3768

8086汇编指令总结

1.mov 指令 mov 寄存器,数据 mov
  • u013025310
  • u013025310
  • 2014-10-30 17:46:52
  • 2875
    个人资料
    持之以恒
    等级:
    访问量: 153
    积分: 105
    排名: 125万+
    文章存档