内置指令
v-if、v-else-if、v-else
<div id="app">
<p v-if="type === 1">1</p>
<p v-else-if="type === 2">2</p>
<p v-else>3</p>
</div>
vue在渲染元素时，处于效率考虑，会尽可能的复用已有的元素而非重新渲染。如果不希望复用，可以使用key属性。
<div id="app">
<div v-if="type === 'name'">
用户名： <input type="text" placeholder="请输入用户名 ">
</div>
<div v-else>
密码： <input type="text" placeholder="请输入密码">
</div>
<button @click="toggle">点击切换</button>
</div>
<div id="app">
<div v-if="type === 'name'">
用户名： <input type="text" placeholder="请输入用户名 " key="name-input">
</div>
<div v-else>
密码： <input type="text" placeholder="请输入密码" key="pass-input">
</div>
<button @click="toggle">点击切换</button>
</div>
v-for
数组：(value,index) in array (从0开始)
对象：(value,key,index) in object (从0开始)
数字：value in number (从1开始)
@click @keyup ...
事件对象event
<a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">百度</a>
methods: {
handleClick (message, event) {
event.preventDefault();
console.log(message)
}
}
修饰符
事件修饰符
-
.stop: 阻止冒泡，相当于event.stopPropagation() -
.prevent: 阻止默认。相当于event.preventDefault() -
.self: 触发事件者为元素自身。即event.target是当前元素自身时才触发事件
按键修饰符
.enter, .tab, .delete, .esc, .space
.up, .down, .left, .right
.ctrl, .alt, .shift, .meta
.native
vue组件触发原生事件：你在用第三方组件的时候，加上的一些事件往往不起作用，是因为@或者v-on只会监听自定义事件 (组件用 $emit 触发的事件)。当加上.native后，就可以监听原生事件了。
