同级并排使用,承载容器，不会渲染。
<template v-if="show"> <span>我是否能被看见a</span> </template> <template v-else> <span>我是否能被看见b</span> </template> v-show <div> <span v-show="sc">show</span> </div>注意：v-show与v-if
v-if：条件成立渲染，不成立则不渲染，结构中不能看见。
v-show：无论怎样都会渲染。
切换频繁时使用，v-show，不频繁使用v-if。
v-for 列表渲染 <ul > <li v-for="(item,index) in datas" v-bind:key="index">{{item}}{{index}}</li> </ul> datas: ["a","b","c","d","e"], <ul> <li v-for="(user ,index) in users" :key="index">{{user.name}} {{user.age}}{{user.sex}}</li> </ul> users: [ {name:"zhangsan1",age:120,sex:"boy"}, {name:"zhangsan3",age:120,sex:"boy"}, {name:"zhangsan2",age:130,sex:"boy4"} ],注意：每个列表添加key，不然会出现警告。
四、事件监听 v-on 事件监听 <button @click="num += 1">事件</button> <h1>{{ num }}</h1> num: 1 methods所有被调用的方法都放在这里面。
<button @click="show">事件2</button> methods: { show() { alert("我是methods中执行的方法事件") } }注意：调用方法是，不加括号，加括号表示，一打开就执行调用方法。
this <button @click="change">事件3</button> change() { this.flag = ! this.flag; }可以用this来索引当前data中的数据。
指向，当前的组建VueComponent
向事件传递参数
五、如何使用一个新组建组建导出可被外部访问
export default { data() { return { users: ["zhangsan","lisi","wangwu'"] } } } data:初始化数据
在需要的组建中导入该组建
import Events from './components/Events'
绑定该组建
components: { Events }
使用组建
<events></events>完整代码(Events.vue定义的新组建，在App.vue中使用该组建)：
<template> <div> <events></events> </div> </template> <script> import Events from './components/Events' export default { name: 'App', components: { Events } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 六、事件中函数传递参数（事件参数） <ul> <li v-for="(user ,index) in users" :key="index" @click="getUserData(index)">{{user}}</li> </ul> data() { return { users: ["zhangsan","lisi","wangwu'"] } }, methods: { getUserData(data) { console.log(this.users[data]) } } 七、事件默认参数$event <ul> <li v-for="(user ,index) in users" :key="index" @click="getUserData(index,$event)">{{user}}</li> </ul> methods: { getUserData(data,event) { console.log(this.users[data]); console.log(event); } }$event:原生js对象
八、事件修饰符 .stop .prevent .capture .self .once .passive event.preventDefault() :阻止默认事件，也就是.prevent event.stopPropagation() ：阻止事件冒泡，也就是.stop <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 阻止单击事件继续传播 --> <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> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。