Vue对象提供的属性功能 Vue对象提供的属性功能
过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中。
定义过滤器的方式有两种:
1. 使用Vue.filter()进行全局定义
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div ,
data: {
price: 10.3333333,
}
})
</script>
</body>
</html>
效果:
2. 在Vue对象中通过filters属性来定义
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div : function(){
// // 过滤器执行的代码
// }
// p_format: function (data, num) {
// return data.toFixed(num);
// }
// 可以简写为
p_format(data, num){
return data.toFixed(num);
}
}
})
</script>
</body>
</html>
效果:
总结:
1. 一个数据可以调用多个过滤器,每个过滤器之间使用 "|"竖杠隔开,但是过滤器之间的执行顺序是从左往右执行,所以有可能产生冲突问题.这时候可以尝试调整调用过滤器之间的顺序
2. 过滤器本质上就是一个函数,所有我们必须有返回值,否则数据调用了过滤器以后,无法得到处理后的数据结果
3. vue1.x版本时,有内置过滤器的,但是官方认为,过多的封装工具给开发者使用,会容易造成框架本身的臃肿,所以在vue2.x版本以后又废除了.
4. 过滤器本质上来说就是函数,所以函数不仅只有一个参数的.我们过滤器也支持多个参数的写法.
二. 计算属性
我们之前学习过字符串反转,如果直接把反转的代码写在元素中,则会使得其他同事在开发时时不易发现数据被调整了,所以vue提供了一个计算属性(computed),可以让我们把调整data数据的代码存在在该属性中。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div ,
data: {
price: 10.3333333,
},
// 计算属性,重新产生一个新的变量值
computed: {
/*
新的变量名: function(){
// 内部必须有返回值,如果要对原有的data里面的属性计算调用,则通过this.变量名来调用
},
*/
new_price: function () {
return this.price.toFixed(2);
},
href: function () {
return location.href;
}
}
})
</script>
</body>
</html>
效果:
三. 监听属性
侦听属性,可以帮助我们侦听data某个数据的变化,从而做相应的自定义操作。
侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当侦听的data数据发生变化时,会执行的对应函数,这个函数在被调用时,vue会传入两个实参,第一个是变化前的数据值,第二个是变化后的数据值。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听属性(侦听属性)</title>
<script src="js/vue.js"></script>
</head>
<body>
<div ,
data: {
num: 0,
},
// 监听属性,监控data属性的变化,一旦指定的属性发生值的变化时,则vue会自动调用watch里面的同名属性对应的函数,并且把修改后的值和修改前的值作为参数传递进去。
watch: {
num: function (new_data, old_data) {
console.log(new_data, old_data);
if (this.num > 3){
this.num = 3;
}
}
}
})
</script>
</body>
</html>
效果:
案例(实现省市区的三级联动):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区的三级联动</title>
<script src="js/vue.js"></script>
</head>
<body>
<div },
]
}
}
})
</script>
</body>
</html>
效果:
四. vue对象的生命周期
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数,我们可以使用这些函数,在对象创建的不同阶段加上我们需要的代码,实现特定的功能。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue对象的生命周期</title>
<script src="js/vue.js"></script>
</head>
<body>
<div );
}
})
</script>
</body>
</html>
五. 阻止事件冒泡和阻止元素的默认行为
1.阻止事件冒泡
什么是事件冒泡?
事件绑定时,如果同时给父子元素绑定同名事件,则在子元素触发事件以后,父元素的同名事件也会触发到,这种现象就是事件冒泡.
好处:一个触发,多次执行
利用事件冒泡的好处,可以实现事件委托.
坏处:形成事件的联动反应.
下面我们先一起来回顾一下js原生阻止的事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father{
300px;
height: 300px;
background: green;
}
.son{
100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<ul );
fa_ul.onclick = function (e) {
console.log(e); // 事件对象:浏览器会把本次事件相关的内容和属性,封装成一个对象作为参数提供给我们
console.log(e.target); // 事件触发对象
let _this = e.target;
console.log(_this.innerHTML);
}
</script>
</body>
</html>
下面我们看一下vue的事件冒泡和阻止事件冒泡:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的事件冒泡和阻止事件冒泡</title> <script src="js/vue.js"></script> <style> .father{ 300px; height: 300px; color: white; background: green; } .son{ 100px; height: 100px; background: red; } </style> </head> <body> <div > <div class="father" @click="add"> <h3>{{num}}</h3> <!--使用 事件名称.stop 即可阻止事件冒泡--> <div class="son" @click.stop="add"> 点击子盒子 </div> </div> </div> <script> var vm = new Vue({ el: "#app", data: { num: 0, }, methods: { add(){ this.num++; } } }) </script> </body> </html>
效果:
2. 阻止元素的默认行为
先看没有阻止的一个效果:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止元素的默认行为</title> <script src="js/vue.js"></script> </head> <body> <div > <a href="" @click="add">a标签</a> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { add(){ alert("点击了a标签!"); } } }) </script> </body> </html>
效果:(注意看刷新按钮)
下面来看一下vue阻止元素的默认行为。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止元素的默认行为</title> <script src="js/vue.js"></script> </head> <body> <div > <a href="" @click.prevent="add">a标签</a> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { add(){ alert("点击了a标签!"); } } }) </script> </body> </html>
效果:(注意看刷新按钮)
六. 综合案例-计划列表
首先我们看下初识页面代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ToDoList案例</title> <style> .list_con { 600px; margin: 50px auto 0; } .inputtxt { 550px; height: 30px; border: 1px solid #ccc; padding: 0; text-indent: 10px; } .inputbtn { 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 > <h2>To do list</h2> <input type="text" name="" > <input type="button" name="" value="增加" > <ul > <!-- 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>
效果:
下面我们通过vue来实现页面的列表计划管理。
首先进行需求分析:
-
把计划数据展示到页面中
-
当用户填写计划以后,点击"增加"按钮时,把数据添加到计划列表中,展示出来
-
当用户点击"删除"按钮,把当前一行的计划数据移除掉
-
当用户点击"↑",则需要把当前一行和上一行数据之间的位置,进行互换
-
当用户点击"↓",则需要把当前一行和下一行数据之间的位置,进行互换
-
-
-
-
然后,开始一项一项的完成需求:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue完成ToDoList需求</title> <script src="js/vue.js"></script> <style> .list_con { 600px; margin: 50px auto 0; } .inputtxt { 550px; height: 30px; border: 1px solid #ccc; padding: 0; text-indent: 10px; } .inputbtn { 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 > <h2>To do list</h2> <input type="text" name="" v-model="plan" > <input type="button" name="" @click="add_data" value="增加" > <ul > <!-- javascript:void(0); # 阻止a标签跳转 --> <li v-for="item,index in data_list"> <span>{{item.title}}</span> <a href="javascript:void(0);" @click="move_up(index)" class="up"> ↑ </a> <a href="javascript:void(0);" @click="move_down(index)" class="down"> ↓ </a> <a href="javascript:void(0);" @click="del_data(index)" class="del">删除</a> </li> </ul> </div> <script> var vm = new Vue({ el: "#ToDoList", data: { plan: "", data_list: [ {"title":"学习html"}, {"title":"学习css"}, {"title":"学习javascript"}, ] }, methods: { // 添加计划 add_data(){ if (this.plan.length > 0){ // this.data_list.push({"title": this.plan}); // 追加 // this.data_list.unshift({"title": this.plan}); // 前置插入 // 或者使用数组的splice方法 // 尾部追加 data_list.splice(data_list.length + 1, 0, "添加元素") // this.data_list.splice(this.data_list.length + 1, 0, {"title": this.plan}); // 头部添加 data_list.splice(0, 0, "添加元素") this.data_list.splice(0, 0, {"title": this.plan}); } }, // 删除计划 del_data(index){ console.log(index); // 获取当前删除元素的index // 数组的splice删除的语法:data_list.splice(index, 1) this.data_list.splice(index, 1); }, // 向上移动计划 move_up(index){ if (index > 0){ // 1. 先把当前要移动的元素提取出来 // let current = this.data_list[index]; let current = this.data_list.splice(index, 1)[0]; // console.log(current); // 2. 再把提取出来的元素放到index - 1的位置 this.data_list.splice(index - 1, 0, current); } }, // 向下移动计划 move_down(index){ // 1. 先把当前要移动的元素提取出来 let current = this.data_list.splice(index, 1)[0]; // 2. 再把提取出来的元素放在index + 1 的位置 this.data_list.splice(index + 1, 0, current); } } }) </script> </body> </html>
效果: