一、事件简写和事件对象$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件简写和事件对象$event</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
},
print(e){
console.log(e.target.innerHTML); //DOM对象
console.log(this);
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<button v-on:click="show">点我</button>
<button @click="show">点我</button>
<hr>
<button @click="print($event)">Click Me</button>
</div>
</body>
</html>按钮依次点击效果
我们知道，绑定事件用 v-on 指令，如 v-on:click="show"。这个指令还有一种简写方式@，如 @click = "show"。
如果绑定的事件不需要传参数，则绑定的时候可以直接写事件名，如 @click = "show"。但是如果我们需要传入参数的时候，就需要在括号中写入，如 @click = "print($event)"。这里我们给print方法传入了一个参数 $event ，即事件对象，这样一来，在print方法中就可以拿到触发此事件的对象的所有信息。当然，普通参数可以自定义一个参数名。
方法中的this，一般指向当前的vue实例。
二、事件冒泡和默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和默认行为</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
// e.stopPropagation();
},
print(){
console.log(222);
},
write(){
console.log(333);
},
study(){
console.log(444);
// e.preventDefault();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<div @click="write">
<p @click="print">
<!-- <button @click="show($event)">点我</button> -->
<button @click.stop="show">点我</button>
</p>
</div>
<hr>
<!-- <a href="#" @click="study($event)">俺是链接</a> -->
<a href="#" @click.prevent="study">俺是链接</a>
</div>
</body>
</html>我们这里给按钮的外层元素也都绑定了事件，如果按照之前的方式，会触发冒泡事件，也就是点击按钮的时候，其外层元素上的点击事件也会被触发。
为了阻止事件冒泡按照传统的方式，可以在事件内部添加 e.stopPropagation(); 而现在vue提供了给事件提供了一个修饰符 .stop简化了我们的操作。如@click.stop="show"。使用了此操作符，方法内部就不在需要e.stopPropagation();这行代码了。
修饰符还有很多，例如给链接上加的阻止默认事件的方法 @click.prevent="study"。这里边 .prevent 修饰符取代了代码中的 e.preventDefault(); 。
三、键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script src="js/vue.js"></script>
<script>
/**
* 自定义键位别名
*/
Vue.config.keyCodes={
a:65,
f1:112
}
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(e){
console.log(e.keyCode);
if(e.keyCode==13){
console.log('您按了回车');
}
},
print(){
// console.log('您按了回车');
// console.log('您按了方向键上');
console.log('11111');
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- 键盘事件：@keydown、@keypress、@keyup -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 简化按键的判断 -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 用户名：<input type="text" @keydown.13="print"> -->
<!-- 用户名：<input type="text" @keydown.enter="print"> -->
<!-- 用户名：<input type="text" @keydown.up="print"> -->
用户名：<input type="text" @keydown.f1="print">
<!-- 事件修饰符 -->
<button @click.once="print">只触发一次</button>
</div>
</body>
</html>这里@keydown="show($event)" 注册了一个键盘按下事件，触发show方法，打印按下按键的键值。
为了简化按键的判断，vue允许直接在事件后边写上键值，当按下按键的键值与指定的键值相同时，触发绑定事件。如@keydown.13="print"。13是回车键的键值，当我们按下回车键即可触发print事件。
由于键值不太好辨认，vue对一些特殊的按键内置了别名。比如刚才的回车还可以写成 @keydown.enter="print" 。向上方向键可以写成 @keydown.up="print" 。
至于一些vue没有提供的按键我们还可以自行指定别名，vue给我们提供了一个方法来配置键值和别名的对应关系：
指定别名之后，我们便可以使用别名来进行按键事件的绑定操作。比如 a 的键值为 65 ，我们配置完了之后， @keydown.a="print" 与 @keydown.65="print" 都可以触发print事件，但是很明显第一种方式更加明了。
四、属性绑定和属性的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和属性的简写</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
data:{
url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
w:'200px',
h:'100px'
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- <img src="{
{url}}"> -->
<!-- 可以直接访问vue中的数据，不需要使用{
{}} -->
<!-- <img v-bind:src="url"> -->
<img :src="url" :width="w" :height="h">
</div>
</body>
</html>运行以上实例，会发现 <img src="{ {url}}"> 是不可以正确解析出url的，因为浏览器会默认不解析src中的数据，默认为字符串处理。而我们需要让url正确解析，就需要使用 v-bind 指令，如 v-bind:src="url" 。就像 v-on 指令一样，vue也为 v-bind 提供了简便写法，如 :src="url" 。使用这种写法可以很方便的将dom中的属性和vue中的数据进行绑定，从而实现在数据发生改变时，页面也同时更新。
五、class和style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style属性</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
data:{
bb:'aa',
dd:'cc',
flag:true,
num:-2,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
}
});
}
</script>
<style>
.aa{
color:red;
font-size:20px;
}
.cc{
background-color:#ccc;
}
</style>
</head>
<body>
<div id="itany">
<!-- class属性 -->
<!-- <p class="aa">hello world</p> --> <!-- 可以访问，普通css方式 -->
<!-- <p :class="aa">hello world</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->
<!-- 方式1:变量形式 -->
<!-- <p :class="bb">hello world</p> -->
<!-- 方式2：数组形式，同时引用多个 -->
<!-- <p :class="[bb,dd]">hello world</p> -->
<!-- 方式3：json形式，常用！！！ -->
<!-- <p :class="{aa:true,cc:flag}">hello world</p> -->
<!-- <p :class="{aa:num>0}">hello world</p> -->
<!-- 方式4：变量引用json形式 -->
<!-- <p :class="hello">hello world</p> -->
<!-- style属性 -->
<p :style="[xx,yy]">itany</p>
</div>
</body>
</html>在vue中绑定 style 和 class 的时候，需要使用之前的 v-bind 指令。当然，我们会使用简写方式。使用这种方式绑定的样式不会覆盖普通方式绑定的样式，只会在后边追加。需要注意的是，使用 v-bind 绑定的样式，其实是vue实例数据中的键，解析的时候会先转换成值，这样才是真正的样式名。如上边的例子中 :class="bb" 实际上相当于 class="aa"。
vue这种方式有个好处，就是可以对样式何时加载，加载哪一个进行进一步的操作。上边实例提供了绑定样式的四种方法。
六、模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
data:{
msg:'welcome to itany'
},
created:function(){
// alert(111);
}
});
}
</script>
<style>
/* 必须配置css样式，否则不生效 */
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="itany">
<input type="text" v-model="msg">
<h3>aaa<span v-cloak>{
{msg}}</span></h3>
<h3 v-text="msg"></h3>
<h3 v-html="msg"></h3>
<h3 v-once>{
{msg}}</h3>
<h3 v-pre>{
{msg}}</h3>
</div>
</body>
</html>我们之前了解过，要将vue实例中的数据渲染要页面中，可以使用双花括号。如 { {msg}} 。这样会存在一个问题，在页面还没有完成解析之前，页面上会有一段时间显示的是代码的原样，我们用弹窗来阻碍一下页面渲染进行验证一下，结果如图
为了解决这个问题，vue提供了两种方案：
1、使用 v-cloak 指令（不推荐）：将该指令添加到需要在渲染完成之前隐藏花括号的地方，并且同时要在样式中指定此元素隐藏，如
[v-cloak]{
display:none;
}2、使用 v-text 或者 v-html（推荐）：如 v-text="msg"。对于文本来说，使用这两个指令效果相同，但是如果需要解析的数据中有html标签，我们又想要让这些标签起作用，那就只能用 v-html 。使用v-text 的话，默认会不解析里边的html标签，直接将数据当做字符串输出。
上边的例子中还提到了两个指令： v-once 和 v-pre
v-once：只渲染一次，不与数据做双向绑定，也就是说，第一次渲染完成之后，即使数据发生改变，页面也不会重新渲染更新。
v-pre：将数据按照代码格式输出。也就是说，并不会解析数据，代码中写成啥样，都会原样输出。
七、过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<script src="js/vue.js"></script>
<script>
/**
* 自定义全局过滤器
*/
Vue.filter('addZero',function(data){
// console.log(data);
return data<10?'0'+data:data;
});
/*Vue.filter('number',(data,n) => {
// console.log(data,n);
return data.toFixed(n);
});*/
Vue.filter('date',data => {
let d=new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
});
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
data:{
currentTime:Date.now()
},
filters:{ //局部过滤器
number:(data,n) => {
return data.toFixed(n);
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- <h3>{
{3 | addZero}}</h3> -->
<h3>{
{12.345678 | number(2)}}</h3>
<h3>{
{currentTime | date}}</h3>
</div>
</body>
</html>vue2.0中已经删除了所有内置过滤器。
如何解决：
a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
b.使用自定义过滤器
1、自定义过滤器
过滤器的定义有两种：一种是全局过滤器，一种是局部过滤器。过滤器至少传入一个参数，即要过滤的数据。如果需要其他参数，只用在第一个参数之后依次传入即可。
全局过滤器：直接挂载到了vue原型上，即使我们在页面上实例化了多个vue实例，都可以调用。
Vue.filter('addZero',function(data){
return data<10?'0'+data:data;
});局部过滤器：在 vue 实例的 filters 属性中定义，只能在当前实例的作用范围内使用。
filters:{ //局部过滤器
number:(data,n) => {
return data.toFixed(n);
}
}2、过滤器的使用
过滤器定义好之后，调用的时候，只需要在需要过滤的数据之后写上过滤器的名称即可，中间使用管道符隔开，如果需要传入参数，就像函数那样使用将传入的参数用括号括起来即可。如 { {12.345678 | number(2)}} 和 { {currentTime | date}} 。