3. Vue对象提供的属性功能
本节内容：
一、过滤器
一 、 过滤器
Vue.filter("RMB1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v+"元"
})
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: green; } </style> </head> <body> <!--<div id="app2"></div>--> <div id="app"> <!-- <h1>{{num}} 元</h1>--> <h1>{{num|rmb}} 元</h1> <!-- <h1>{{num|yuan|yuan2}}</h1> 过滤器的使用和多层嵌套--> <!-- <h1>{{num|yuan('xxx','ooo')}}</h1> 过滤器的使用多个参数--> </div> </body> <script src="vue.js"></script> <script> // 全局过滤器:在任意vue对象中都可以直接使用 // let vm2 = new Vue({ // el:'#app2' // }) Vue.filter('rmb',function (val) { return val + 'rmb' }) let vm = new Vue({ el:'#app', // 圈地 data(){ return { msg:'hello', num:100, } }, // 数据属性 methods:{ // 声明方法 }, // 局部过滤器，只能在当前vue对象中使用 filters:{ yuan(val,m,n){ // val是需要加工的数据 return val + '元' + m + n }, yuan2(val){ // val是需要加工的数据 return val + '圆' } } })
我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，
所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于
监听，可以监听多个对象，后面学了监听之后再说。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{num}}</h2> <h2>{{xx}}</h2> </div> </body> <script src="../vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return { num:100, num2:20, } }, filters:{}, computed:{ xx:function () { // let s = this.num + this.num2 return s.toFixed(2) } } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/filters.js"></script> </head> <body> <div id="app"> 原价格：{{price|k2}}<br> 折扣价：{{new_price}}<br> </div> <script> var vm1 = new Vue({ el:"#app", data:{ price: 20.3, sale: 0.6, }, // methods:{} // 过滤器 filters:{ k2(value){ return value.toFixed(2) } }, // 计算属性 computed:{ new_price(){ return (this.price*this.sale).toFixed(2); } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{num}}</h2> <button @click="num++">+1</button> </div> </body> <script src="../vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return { num:100, } }, filters:{}, watch:{ // 'num':function (newval,oldval) { // // newval变化后的值 // // oldval变化前的值 // // console.log(newval,oldval); // // }, num(newval,oldval){ console.log(newval,oldval); }, // num2(newval,oldval){ // console.log(newval,oldval); // // } }, }) </script> </html>
使用数据属性中的某个属性的时候，如果使用的是该数据中的内部属性，别忘了加双引号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/filters.js"></script> </head> <body> <div id="app"> <form action=""> 账号：<input type="text" v-model="form.username"><span :style="user_style">{{user_text}}</span><br><br> 密码：<input type="password" v-model="form.password"><br><br> 确认密码：<input type="password" v-model="form.password2"><br><br> </form> </div> <script> var vm1 = new Vue({ el:"#app", data:{ form:{ username:"", password:"", password2:"", }, user_style:{ color: "red", }, user_text:"用户名长度只能是4-10位" }, // 监听属性 // 监听属性的变化 watch:{ "form.username":function(value){ //注意，使用数据属性中的某个属性的时候，如果使用的是该数据中的内部属性，别忘了加双引号 if(value.length>=4 && value.length<=10){ this.user_style.color="blue"; this.user_text="用户名长度合法！"; }else{ this.user_style.color="red"; this.user_text="用户名长度只能是4-10位！"; } } } }) </script> </body> </html>
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做
生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，
实现特定的功能。
vue 生命周期 1、创建一个vue对象 => vue加载数据属性（data中的值）=>vue加载视图属性（html标签）
=> vue数据驱动属性讲数据渲染到html标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{num}}</h2> </div> </body> <script src="../vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return { num:100, } }, filters:{}, // 视图(html标签)和数据属性，还没有加载给vue对象时触发的 beforeCreate:function () { console.log(this.$el); // undefined console.log(this.$data); // undefined }, // vue对象加载上数据属性之后，自动触发的函数 created:function () { console.log(this.$el); // undefined console.log(this.$data); // num: 100 // console.log(this.num) // 一般我们会在这个方法中进行网络请求，请求后台的数据，对数据属性进行修改 // 发送ajax请求去后台要数据，然后赋值给某个数据属性 }, // vue加载视图之后触发的 beforeMount:function () { console.log(this.$el); // <h2>{{num}}</h2> console.log(this.num); // num: 100 }, // 数据驱动到视图之后触发的 mounted:function () { console.log(this.$el); // <h2>100</h2> console.log(this.$data); console.log(this.num)// num: 100 } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 200px; } .c2{ background-color: blue; height: 100px; width: 100px; } </style> </head> <body> <div id="app"> <div class="c1" @click="f1"> <!-- 阻止事件冒泡 --> <div class="c2" @click.stop="f2"></div> <!-- <div class="c2" @click.stop="f2"></div>--> <!-- <div class="c2" @click.stop.prevent="f2"></div>--> <!-- <a href="http://www.baidu.com" @click.stop.prevent="">百度</a> 阻止标签自带的原有事件效果--> </div> </div> </body> <script src="../vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return { num:100, msg:'hello', } }, methods:{ f1(){ alert(111); }, f2(){ alert(2222); } } }) </script> </html>
