1.vue指令之v-on的缩写(@)和事件修饰符
事件修饰符：
- stop：阻止冒泡行为。
- prevent：阻止默认行为(比如a便签默认跳百度)。
- capture：添加事件监听器时使用事件捕获模式，也就是从外到里触发的意思，和冒泡相反。
- self：只当事件在该元素本身（比如不是子元素）触发时触发回调
- once:事件只触发一次
演示代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.div1 {
height: 200px;
background-color: pink;
}
.div2 {
padding: 40px 40px;
background-color: darkmagenta;
}
</style>
</head>
<body>
<!--演示阻止冒泡行为(stop)-->
<!--<div class="div1" @click="clickDiv1">
<input type="button" id="btn" value="点我" @click.stop="clickBtn"/>
</div>-->
<!--演示阻止默认行为(prevent)-->
<!--<div class="div1" @click="clickDiv1">
<input type="button" id="btn" value="点我" @click.stop="clickBtn"/>
<a href="http://www.baidu.com" @click.prevent="clickToBaidu">点我跳到百度</a>
</div>-->
<!--演示事件监听器时使用事件捕获事件(capture)设置此事件不会冒泡，从外到里执行-->
<!--<div class="div2" @click="clickDiv2">
<div class="div1" @click.capture="clickDiv1">
<input type="button" id="btn" value="点我" @click="clickBtn"/>
</div>
</div>-->
<!--演示只当事件在该元素本身触发时触发回调(self)-->
<!--<div class="div2" @click="clickDiv2">
<div class="div1" @click.self="clickDiv1">
<input type="button" id="btn" value="点我" @click="clickBtn"/>
</div>
</div>-->
<!--演示事件只触发一次(once)-->
<div class="div2" @click="clickDiv2">
<div class="div1" @click.stop="clickDiv1">
<input type="button" id="btn" value="点我" @click="clickBtn"/>
<a href="http://www.baidu.com" @click.prevent.once="clickToBaidu">点我跳到百度</a>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'.div2',//此位置请自行修改
methods:{
clickDiv1(){
console.log('这是点击div1触发的点击事件')
},
clickDiv2(){
console.log('这是点击div2触发的点击事件')
},
clickBtn(){
console.log('这是点击btn触发的点击事件')
},
clickToBaidu(){
console.log('这是点击跳到百度时的点进事件')
}
}
})
</script>
</html>
2.vue指令之v-model和双向事件绑定
v-model:可以实现表单元素model中数据的双向数据绑定
**注意：**v-model只能运用在表单元素中。input（radio,text,address,emil……）,select,checkbox.textarea等
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h4>你的名字：{{msg}}</h4>
<input type="text" id="" v-model="msg" />
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg:'',
}
});
</script>
</html>
结果：
3. vue指令之v-bind的缩写(:)和绑定对象
在使用v-bind 为class绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带，如果属性中带横线是不能省略的。属性的值是一个标识符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.red {
color: red;
}
.italic {
/*倾斜*/
font-style: italic;
}
.thin {
font-weight: 200;
}
.active {
/*间距*/
letter-spacing: 0.2em;
}
</style>
</head>
<body>
<div id="app">
<!--第一种方法-->
<h3 :class="{red:false,italic:false,thin:true,active:false}">{{msg}}</h3>
<!--第二种方法-->
<h3 :class="thisapp">{{msg}}</h3>
<!--第三种方法:绑定内联样式-->
<h3 :style="{color:'pink','font-style': 'italic'}">{{msg}}</h3>
<!--通过数组，引用多个date上的样式对象-->
<h3 :style="[st1,st2]">{{msg}}</h3>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg:'你好,冒险家,请开始你的冒险',
thisapp:{red:true,italic:true,thin:true,active:true},
st1:{color:'pink','font-style': 'italic'},
st2:{'letter-spacing': '0.2em','font-weight':100}
}
});
</script>
</html>
4.v-for的一些使用
1:迭代数组 2:迭代对象中的属性 3:迭代数字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--循环普通数组-->
<p v-for="n in num" >{{n}}</p>
<!--循环对象数组-->
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
<tr v-for="(item,i) in list">
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.email}}</td>
</tr>
</table>
<!--循环对象-->
<p v-for="(val,key) in user">值是:{{val}}---属性:{{key}}</p>
<!--循环数字-->
<p v-for="i in 5">{{i}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num:[1,2,3,4],
list:[
{name:'张三',age:22,email:'[email protected]'},
{name:'李四',age:21,email:'[email protected]'},
{name:'王五',age:24,email:'[email protected]'},
],
user:{name:'赵云',age:'21'}
}
});
</script>
</html>
5.v-for循环中绑定key属性的作用
比如为对象绑定一个复选框，如果不绑定key属性，当你增加一个对象时，复选框选中的对象任然是之前的第几个，不会随你选中的对象发生变化，绑定key属性之后，当你增加一个对象时，复选框选中的对象任然是之前你选中的对象。
注意：
v-for循环的时候，key属性只能使用number或者string；
key在使用的使用，必须使用v-bind属性绑定的形式，指定key的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<label>id:
<input type="text" v-model="id" />
</label>
<label>name:
<input type="text" v-model="name"/>
</label>
<button @click="add" >添加</button>
<p v-for="item in list" :key="item.id">
<input type="checkbox" />
{{item.id}}--{{item.name}}
</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
]
},
methods:{
//unshift:向数组的开头添加一个或者多个元素
add(){
this.list.unshift({id:this.id,name:this.name})
}
}
});
</script>
</html>
比较：
5.v-if和v-show的区别
v-if:每次都会重新删除或创建元素，有很高的切换性能消耗。
v-show:每次不会重新进行DOM的删除和创建工作，只是切换了元素的display:none样式，有很高的初始渲染消耗。
注意：如果元素涉及频繁的切换，最好不要使用v-if，用v-show比较好；如果元素可能永远不会显示出来被用户看到，则使用v-if比较好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" @click="flag=!flag" value="点我显示" />
<h5 v-if="flag">这是v-if控制的元素</h5>
<h5 v-show="flag">这是v-show控制的元素</h5>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
flag:true
}
});
</script>
</html>