一：过滤器
1.简介
过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种。
2.全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<p>{{price|format}}</p>
</div>
<script>
//全局过滤器
Vue.filter("format",function(money){
return money.toFixed(2)+"元"; // js中提供了一个toFixed方法可以保留2位小鼠
});
var vm = new Vue({
el:"#app", // vm的模板对象
data:{ // vm的数据
price:8.154333,
},
method:{ // vm的方法
},
});
</script>
</body>
</html>
3.局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<p>{{price|format}}</p>
</div>
<script>
// 局部过滤器 只能在当前vm对象中使用
var vm = new Vue({
el:"#app", // vm的模板对象
data:{ // vm的数据
price:8.154333,
},
method:{}, // vm的方法
filters:{
format(money){
return money.toFixed(2)+"元";
}
},
});
</script>
</body>
</html>
二：属性
1.计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="texttext" v-model="num1">
<input type="texttext" v-model="num2">=<p>{{total}}</p>
</div>
<script>
var vm = new Vue({
el:"#app", // vm的模板对象
data:{ // vm的数据
num1:0,
num2:1,
},
method:{}, // vm的方法
computed:{ // 计算属性 相当于创建一个新的变量 保存数据计算的结果
total(){
// parseFloat 浮点型
// parseInt 整型
return parseFloat(this.num1)+parseFloat(this.num2);
}
},
});
</script>
</body>
</html>
2.监听属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="num++">赞（{{num}}）</button>
</div>
<script>
var vm = new Vue({
el:"#app", // vm的模板对象
data:{ // vm的数据
num:0,
},
watch:{ // 侦听属性，监听指定变量的值 是否发生变化 当发生变化时 调用对应的方法
num(v1,v2){
console.log(this.num,"修改后num="+v1,"修改前nun="+v2);
}
},
});
</script>
</body>
</html>
三：vm对象的生命周期和提供的钩子方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="num++">{{num}}</button>
</div>
<script>
var vm = new Vue({
el:"#app", // vm的模板对象
data:{ // vm的数据
num:10,
},
beforeCreate(){ // vm对象初始化完成之前 自动执行的代码
console.log("---vm对象初始化完成之前 自动执行的代码---");
console.log(this.$el);
console.log(this.$data);
},
created(){ // 这里主要实现到服务端获取页面数据[ajax] 重点！！！
console.log("---vm对象初始完成之后 自动执行的代码---");
console.log(this.$el); // 未查找到vm需要控制的元素
console.log(this.$data); // 已经把data模型中的数据 注入到vm对象中 作为属性了
this.num=localStorage;
},
boforeMount(){ // vm数据渲染到HTML之前 自动执行的代码
console.log("---vm数据渲染到HTML模板之前 自动执行的代码---")
console.log(this.$el); // 未查找到vm需要控制的元素
},
mounted(){ // 修改页面的内容[页面特效] 重点！！！
console.log("---vm数据渲染到HTML模板之后 自动执行的代码---");
console.log(this.$el); // 未查找到vm需要控制的元素
},
beforeUpdate(){ // 数据修改前的操作（很少用）
console.log("---数据更新了 渲染之前 自动执行的代码---");
console.log(this.num);
console.log(this.$el.innerHTML);
},
updated(){ // 数据修改后的操作（很少用）
console.log("---数据更新了 渲染之后 自动执行的代码---");
console.log(this.num);
console.log(this.$el.innerHTML);
},
beforeDestroy(){
console.log("---当vm对象被销毁之前 自动执行的代码---");
alert('销毁之前');
console.log(this);
},
destroyed(){
console.log("---当vm对象被销毁之后 自动执行的代码---");
alert('销毁之后');
console.log(this);
},
});
</script>
</body>
</html>
四：事件
1.js的事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<style>
.box1{
height: 500px;
500px;
background: red;
}
.box2{
height: 300px;
300px;
background: aquamarine;
}
</style>
<body onclick="alert('点击了body')">
<div class="box1">
<div class="box2"></div>
</div>
<script>
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
box1.onclick = function(event){
alert("点击了box1");
// 阻止原生JS事件冒泡
// event.stopPropagation();
}
box2.onclick = function(event){
alert("点击了box2");
// 阻止原生JS事件冒泡
event.stopPropagation();
}
</script>
</body>
</html>
2.vue中阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<script src="vue.js"></script>
</head>
<style>
.box1{
height: 500px;
500px;
background: red;
}
.box2{
height: 300px;
300px;
background: aquamarine;
margin: auto;
}
</style>
<body onclick="alert('点击了body')">
<div id="app" class="box1" @click="show('点击了box1')">
<div class="box2" @click.stop="show('点击了box2')"></div>
</div>
<script>
// vue本质上就是js，所以vue中的事件操作也会存在事件冒泡
// 可以使用辅助命令 @click.stop来阻止事件冒泡
var vm = new Vue({
el:"#app",
methods:{
show(message){
alert(message)
}
}
})
</script>
</body>
</html>
3.阻止页面刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 辅助指令可以连贯使用，可以用多个，并不冲突-->
<a href="www.baidu.com" @click.stop.prevent="show" style="font-size: 36px;">百度</a>
</div>
<script>
// vue本质上就是js，所以vue中的事件操作也会存在事件冒泡
// 可以使用辅助命令 @click.stop来阻止事件冒泡
var vm = new Vue({
el:"#app",
methods:{
show(){
}
}
})
</script>
</body>
</html>
五：综合事件
移动、删除、添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
600px;
margin:50px auto 0;
}
.inputtxt{
550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
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>
<script src="vue.js"></script>
</head>
<body>
<div class="list_con" id="app">
<h2>To do list</h2>
<input type="text" v-model="content" id="txt1" class="inputtxt">
<input type="button" @click="add" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<!-- javascript:; # 阻止a标签跳转 -->
<li v-for="item,index in todolist">
<span>{{item}}</span>
<a href="javascript:;" class="up" @click="up(index)"> ↑ </a>
<a href="javascript:;" class="down" @click="down(index)"> ↓ </a>
<a href="javascript:;" class="del" @click="del(index)">删除</a>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
content: "",
todolist: ["学习html","学习css","学习javascript"],
},
methods:{
add(){
// 添加计划
this.todolist.push(this.content);
// 清空单行文本框中的信息
this.content="";
},
del(index){
// 删除计划
this.todolist.splice(index,1);
},
up(index){
// 向上移动计划
let current = this.todolist.splice(index,1)[0];
this.todolist.splice(index-1, 0, current);
},
down(index){
// 向下移动计划
let current = this.todolist.splice(index,1)[0];
this.todolist.splice(index+1,0,current);
}
}
})
</script>
</body>
</html>