vue指令

内置指令

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后，就可以监听原生事件了。