VUE学习-指令-{v-on, v-for, v-if, v-on, v-bind, v-model}

指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
如v-on、v-for、v-if、v-on…

常用的监听事件

click ——>注册点击事件
keydown——>注册键盘事件
keyup ——>注册键盘事件
mousedown——>注册鼠标事件
mouseover ——>注册鼠标事件
submit ——>注册表单事件

v-on

用法

v-on 指令用于绑定事件监听器，v-on 指令的简写形式为 @event。
v-on 指令可以支持同时写多个事件监听器，多个事件监听器的简写形式为
v-on={@event1:handler1, @event2:handler2}。
v-on 指令支持原生 JavaScript 的所有的事件，并且支持参数传递。

语法

缩写：@
预期：Function | Inline Statement | Object
参数：event

v-on事件修饰符

v-on .stop 阻止事件冒泡。
v-on .prevet 阻止事件的默认行为。
v-on .capture 添加事件侦听器，使用事件捕获模式。
v-on .self 只当事件在该元素本身触发时，触发回调。
v-on .once 事件只触发一次。

监听事件

多个事件

<button @click = 'a() , b()'>button</button>

多个监听

<a style="cursor:default" v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething</a>

v-for

用 v-for 指令根据一组数组的选项列表进行渲染。

语法

v-for 指令需要使用 item in items 形式的特殊语法，
item 是数组元素迭代的别名。
items 是原数据数组

使用示例

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

访问数组

用法：使用v-for=“item in list"的写法，依次取出list中的所有item，或者使用v-for=”(item,i) in list"，依次取出list中的所有item和它们对应的索引i

访问对象数组

用法：使用v-for=“user in list “，依次取出list中的每个对象user，或者使用v-for=”(user,i) in list”，依次取出list中的每个对象和它们对应的索引

访问对象

用法：使用v-for=“(val,key) in list”，依次取出list中的每个对象的键和值，或者使用v-for=“(val,key,i) in list”,依次取出list中的每个对象的键，值和索引

迭代数字

用法：使用v-for=“count in num”，迭代次数将从1开始，一直迭代至num

v-if

用法

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<p v-if="seen">现在你看到我了</p>

v-bind

用法

参数在指令后以冒号指明。v-bind 指令被用来响应地更新 HTML 属性

<a v-bind:href="url">菜鸟教程</a>

语法

缩写：

<a :href="url"></a>

v-model

用法

指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

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

else

事件冒泡与捕获

他们是描述事件触发时序问题的术语。
事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。
相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到此为止 ，parent及其parent的事件就不要触发了。

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 过滤器串联 -->
{{ message | filterA | filterB }}

<!-- 过滤器可以接受参数 -->
{{ message | filterA('arg1', arg2) }}