1.过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{price}} <p>{{price|RMB}}</p> <hr> <!-- <p>{{price|p_format}}</p>--> <hr> <!-- <p>{{price|p_format(2)}} 注意和Django中的过滤器中的参数区别，模板中最多是2个参数--> <!-- 在Vue中的是多个参数，本体就是一个函数--> <!-- 2.在Django中的过滤器的传入参数是{{price|p_format:2}} 即是传入参数为2--> <!-- 在这个地方传入参数是使用(参数2)注意和Django中就行区别--> <p>过滤器中带有2个参数的,注意区别于Django中的模板中的过滤器。传入的data注意是数字</p> <p>{{price|p_format(3, 2)}}</p> <hr> <p>{{price|p_format(2,3)|RMB}}</p> </div> <script> // 通过Vue.filter() 进行全局声明，是在vm对象创建之前声明好的。 // 语法：Vue.filter("过滤器名称", func); Vue.filter('RMB', function (data) { return "￥" + data; }); var vm = new Vue({ el: "#app", data: { price: 10.3333333, }, // 不带参数的传法 // filters: { // p_format(data){ // return data.toFixed(2) // } // } // 换另外一种写法，并且带参数 filters: { // 动态的对参数就行显示 p_format(data, num, num2){ console.log(num2); return data.toFixed(num) } } }) // 第二种方式定义，局部定义过滤器 这种方式用的更多 </script> </body> </html>
方式1：就行全局声明是在唉VUE创建之前声明好。
在实例化VUE变量之前定义
// 通过Vue.filter() 进行全局声明，是在vm对象创建之前声明好的。
// 语法：Vue.filter("过滤器名称", func);
// 定义的第一种方式
Vue.filter('RMB', function (data) {
return "￥" + data;
});
var vm = new Vue({
el: "#app",
data: {
price: 10.3333333,
},
使用：
# 不带参数： <p>{{price|RMB}}</p> 带参数 <p>{{price|RMB（2）}}</p>， 区别于Django模板中使用过滤器就行赋值：{{price|p_format:2}} 2个参数为上限 # 其中price也算是一个参数代入过滤器 中 # VUE中的参数不限制，这个也是区别于Django的传参数，Django使用：参数 VUE（参数） 比如：<p>{{price|p_format(3, 2)}}</p>， 已经是3个参数了 对应下面的filter函数： filters: { // 动态的对参数就行显示 p_format(data, num, num2){ console.log(num2); return data.toFixed(num) }
方式2：在写在VUe对象的内部：
在Vue对象中通过filters属性来定义
// 方式1;
Vue.filter('RMB', function (data) {
return "￥" + data;
});
var vm = new Vue({
el: "#app",
data: {
price: 10.3333333,
},
// 不带参数的传法
// filters: {
// p_format(data){
// return data.toFixed(2)
// }
// }
// 定义的第二种方式 写在内部
// 换另外一种写法，并且带参数
filters: {
// 动态的对参数就行显示
p_format(data, num, num2){
console.log(num2);
return data.toFixed(num)
}
}
})
// 第二种方式定义，局部定义过滤器 这种方式用的更多
2.计算属性
我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，
所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{price}}</p> <p>{{new_price}}</p> <p>{{href}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { price: 10.33333333, }, computed:{ new_price(){ return this.price.toFixed(2) }, // 注意: data下有的key,重新赋值时,无法生效. // price(){ // return this.price.toFixed(2) // }, href(){ return location.href; } } }) </script> </body> </html>
3.监听属性
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会执行的对应函数，这个函数在被调用时，vue会传入两个实参，
第一个是变化前的数据值，第二个是变化后的数据值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听事件</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{num}}</p> <button @click="num++">投票</button> </div> <script> var vm = new Vue({ el: "#app", data:{ num: 0, }, watch: { num(new_data, old_data){ console.log(new_data, old_data); if(new_data>3){ this.num = 3; } } } }) </script> </body> </html>
案例（实现省市区的三级联动）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 地址: <select name="" v-model="province_id"> <option value="0">请选择省份</option> <option v-for="province in province_list" :value="province.id">{{province.name}}</option> </select> <select name="" v-model="city_id"> <option value="0">请选择城市</option> <option v-if="province_id==city.parent_id" v-for="city in city_list" :value="city.id">{{city.name}}</option> </select> <select name="" v-model="area_id"> <option value="0">请选择地区</option> <option v-if="city_id == area.parent_id" v-for="area in area_list" :value="area.id">{{area.name}}</option> </select> </div> <script> var vm = new Vue({ el: "#app", data: { province_id: 0, province_list: [ {"id":1,"name":"北京市"}, {"id":2,"name":"广东省"}, ], city_list: [], city_id: 0, area_id: 0, area_list:[], }, watch: { province_id(){ this.city_list = [ {"parent_id":1,"id":1,"name":"海淀区"}, {"parent_id":1,"id":2,"name":"昌平区"}, {"parent_id":2,"id":3,"name":"广州市"}, {"parent_id":2,"id":4,"name":"深圳市"}, ], this.city_id = 0 this.area_id = 0 }, city_id(){ this.area_list = [ {"parent_id":1,"id":1,"name":"中关村"}, {"parent_id":1,"id":2,"name":"清华园"}, {"parent_id":2,"id":3,"name":"沙河"}, {"parent_id":2,"id":4,"name":"回龙观"}, {"parent_id":3,"id":5,"name":"天河区"}, {"parent_id":3,"id":6,"name":"番禺区"}, {"parent_id":4,"id":7,"name":"南山区"}, {"parent_id":4,"id":8,"name":"宝安区"}, ], this.area_id = 0 } } }) </script> </body> </html>
4.Vue的生命周期
下面介绍常用的6种钩子函数。
-
钩子函数beforeCreate 类似于python中的__new__
// 8个钩子函数，常用的有6个下面列举出来的。还有2个不常用分别是：destroy和bdforeDestroy
// bdforeCreate会在vm对象创建实例化以后，初始化vm内部数据之前调用
// 类似于python里面的__new__
beforeCreate(){
console.log("----------beforeCreate start---------");
console.log(this);
console.log(this.$el); //还没对模板就行初始化
console.log(this.num); //还没对数据就行初始化
console.log("##########beforeCreate end#########");
},
-
钩子函数created()**
// created 在vm对象实例化并初始化数据以后，视图模板加载之前调用
// 一般情况下，会在这里编写ajax代码，从服务器端获取数据并赋值给data里面的数据(***)
created(){
console.log("----------created start---------");
console.log(this);
console.log(this.$el); // 还没有对视图模板进行初始化
console.log(this.num); // 此时已经可以拿到数据了只是就行初始化了数据num
console.log("##########created end#########");
},
-
beforeMount()拿到视图模板 数据还没被渲染
beforeMount() {
console.log("----------beforeMount start---------");
console.log(this);
console.log(this.$el); // 已经拿到试图模板,但是数据还没被渲染
console.log(this.num); // 此时已经可以拿到数据了
console.log("##########beforeMount end#########");
},
-
mounted 在视图模板中把数据渲染出来
// 加载视图并进行数据赋值以后调用
// 一般情况下，会在这里编写操作界面的代码，调整样式，制作初始化的js特效(***)
mounted() {
console.log("--------mounted start -----------");
console.log(this);
console.log(this.$el); // 已经拿到试图模板,数据被渲染
console.log(this.num); // 此时已经可以拿到数据了
console.log("##########mounted end#########");
}
-
beforeUpdate拿到更新数据 还没对模板赋值
// 更新数据时, 修改data数据以后 对模板的数据赋值之前的调用
beforeUpdate(){
console.log("----------beforeUpdate start---------");
console.log(this);
console.log(this.$el.innerHTML);
console.log(this.num); // 此时已经可以拿到数据了
console.log("##########beforeUpdate end#########");
},
-
update将beforeUpdate拿到的数据就行更新入模板
// 更新数据完成以后调用
updated(){
console.log("----------updated start---------");
console.log(this);
console.log(this.$el.innerHTML);
console.log(this.num); // 此时已经可以拿到数据了
console.log("##########updated end#########");
}
5、js原生阻止事件冒泡
1.阻止事件冒泡
什么是事件冒泡？
事件绑定时,如果同时给父子元素绑定同名事件,则在子元素触发事件以后,父元素的同名事件也会触发到,这种现象就是事件冒泡.
好处：一个触发,多次执行
坏处：形成事件的联动反应.
下面我们先一起来回顾一下js原生阻止的事件冒泡
例子：使用原生的JavaScript就行写上时候，
<div class="father"> <div class="son"> </div> </div> <script> var fa_div = document.getElementsByClassName('father')[0]; var son_div = document.getElementsByClassName('son')[0]; fa_div.onclick=function () { alert("父元素"); }; son_div.onclick=function () { alert("子元素"); } </script>
js 下边就行添加上这个代码也就是原生的js阻止事件冒泡！
son_div.onclick=function (event) {
alert("子元素!");
event.stopPropagation(); // 原生的js代码阻止事件冒泡
};
2.下面我们看一下vue的事件冒泡和阻止事件冒泡：
3.阻止元素的默认行为
关键代码：
<a href="" @click.prevent="add">a标签阻止默认的行为</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止元素的默认行为</title> <script src="js/vue.js"></script> </head> <body> <div class="father"> <a href="" @click="add">a标签有刷新的效果</a> <a href="" @click.prevent="add">a标签阻止默认的行为</a> <a href="" @click="add">{{text}}</a> <script> vm = new Vue({ el: ".father", data: { text: "刷新", }, methods: { add(){ alert("出来了！") } } }) </script> </div> </body> </html>
6.见https://www.cnblogs.com/Michael--chen/p/11261181.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .list_con { width: 600px; margin: 50px auto 0; } .inputtxt { width: 550px; height: 30px; border: 1px solid #ccc; padding: 0; text-indent: 10px; } .inputbtn { width: 40px; height: 32px; padding: 0; border: 1px solid #ccc; } .list { padding: 0; list-style: none; margin-top: 20px; } .list li { height: 40px; line-height: 40px; border-bottom: 1px solid #ccc; } .list li span { float: left; } .list li a { float: right; text-decoration: none; margin: 0 10px; } </style> </head> <body> <div id="ToDoList" class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <!-- javascript:void(0); # 阻止a标签跳转 --> <li> <span>学习html</span> <a href="javascript:void(0);" class="up"> ↑ </a> <a href="javascript:void(0);" class="down"> ↓ </a> <a href="javascript:void(0);" class="del">删除</a> </li> <li> <span>学习css</span> <a href="javascript:void(0);" class="up"> ↑ </a> <a href="javascript:void(0);" class="down"> ↓ </a> <a href="javascript:void(0);" class="del">删除</a> </li> <li> <span>学习javascript</span> <a href="javascript:void(0);" class="up"> ↑ </a> <a href="javascript:void(0);" class="down"> ↓ </a> <a href="javascript:void(0);" class="del">删除</a> </li> </ul> </div> </body> </html>