Vue学习（watch、computed、生命周期、filter）- 学习笔记

文章目录

Vue学习（watch、computed、生命周期）- 学习笔记
- watch 监听
- computed 计算属性
- set---动态添加属性 delete---删除
- 生命周期
- filter 过滤器

Vue学习（watch、computed、生命周期）- 学习笔记

watch 监听

<template><div><input type = "text" v-model="name" />姓名{{changeName}}<input type = "text" v-model="obj.name" />姓名2</div>
</template><script>
export default {data () {return {name:'',changeName:'',obj:{name:''}}},methods:{action(newValue,oldValue){}},watch:{// 几种写法name:function(newValue,oldValue){this.changeName = oldValue;},// name(newValue,oldValue){// }// 'name'(newValue,oldValue){// }//'name':'action'  //值可以为方法名//监听对象// 'obj.name'(newValue,oldValue){//   this.changeName = oldValue;// },// obj(newValue,oldValue){  //不会改变//   this.changeName = oldValue;// },obj:{handler:(newValue,oldValue)=>{   //默认的执行函数//this.changeName = newValue; //this指向出错console.log('1111')},deep:true  //深度监听   false handler函数不执行}}
}
</script>

computed 计算属性

<template><div>您购买了<input type="text" v-model="info.name"/>单价<input type="text" v-model="info.price"/>元数量<input type="text" v-model="info.count"/>份<p>折扣({{sale}})配送费({{freight}})元</p><h1>总价：{{info.price*info.count*sale +freight}}</h1><h1>总价：{{total}}</h1><h1>总价：{{num2}}</h1><h1>总价：{{num3}}</h1><button @click="change()">改变num3</button></div>
</template><script>
export default {data () {return {info:{id:1,price:15,name:'套餐A',count:1},sale:0.8,   //折扣freight:5,   //配送费data:0,num:100}},methods:{change(){this.num = 999;}},computed:{total(){if(this.info.count >5){return this.info.price*this.info.count*this.sale}else {return this.info.price*this.info.count*this.sale +this.freight}         },num2(){return this.num+this.info.count ;},//完整的写法num3:{//读取值会触发getget:function(){return this.num },//修改值会触发setset:function(val){this.num = val;}}}
}
</script>

监听与计算属性的区别：监听是针对特定某个值，对其变化进行监听，计算属性是包含的值发生变化则都会变化。

计算属性和方法的比较：

<template><!-- 和方法的比较 --><input type='text' v-model="input"  @input ="getData()"/>{{getInput}}{{getData()}}  <!-- 如果input发生变化，方法每一次都会执行，但若input输入的值和原来一样，则不会被触发 --></div>
</template><script>
export default {data () {return {input:''}},methods:{getData(){console.log('方法');return this.input}},computed:{getInput(){console.log('计算属性');return this.input},
}
</script>

set—动态添加属性 delete—删除

<template><div><!-- 不会触发视图更新 --><h1>{{obj.name}}</h1><h1>{{obj.age}}</h1><button @click="add()">添加</button><button @click="del()">删除</button></div>
</template><script>
export default {data () {return {obj:{id:1,name:"abc"}}},methods:{add(){//动态添加的属性值   不会触发视图更新//this.obj.age = 20;this.$set(this.obj,'age',20);  //双向数据  响应式数据},del(){// delete this.obj.age;this.$delete(this.obj,'age');  //双向数据  响应式数据}}
}
</script>

生命周期

<template>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
export default {name: "sensor",//import 引入的组件需要注入到对象中才能使用components: {},props: {}, //组件传参取值data() {//这里存数据return {}};},//计算属性 类似于data概念computed: {},//监控data中数据变化watch: {},//方法集合methods: {},//声明周期 - 创建完成（可以访问当前this实例）created() {},//生命周期 - 挂载完成（可以访问DOM元素）mounted() {},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //声明周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁之后activated() {} //缓存keep-alive
};
</script>
<style scoped>
/* @import "../../../styles/table-common.less"; */
</style>

理解生命周期，理解钩子函数：

<template><div><div id="my">{{message}}<input type="text" v-model='message' /></div></div>
</template><script>
export default {data () {return {message : "hello world" }},//beforecreate：el 和 data 并未初始化 //created:完成了 data 数据的初始化，el没有//beforeMount：完成了 el 和 data 初始化 //mounted ：完成挂载//具体怎么用呢，通俗一些//beforecreate : 举个例子：可以在这加个loading事件 //created ：在这结束loading，还做一些初始化，实现函数自执行 //mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情//beforeDestroy： 你确认删除XX吗？// destroyed ：当前组件已被删除，清空相关内容beforeCreate: function () { //beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳console.group('beforeCreate 创建前状态===============》');console.log("创建前状态", "el     : " + this.$el); //undefinedconsole.log("创建前状态", "data   : " + this.$data); //undefined console.log("创建前状态", "message: " + this.message)  //undefined},created: function () { //created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数,一般可以在这里做初始数据的获取console.group('created 创建完毕状态===============》');console.log("创建完毕状态","el     : " + this.$el); //undefinedconsole.log("创建完毕状态","data   : " + this.$data); //已被初始化 console.log("创建完毕状态","message: " + this.message); //已被初始化},beforeMount: function () { //beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated  接下来开始render，渲染出真实domconsole.group('beforeMount 挂载前状态===============》');console.log("挂载前状态", "color:red","el     : " + (this.$el)); //已被初始化console.log(this.$el);  // 发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。console.log("挂载前状态", "color:red","data   : " + this.$data); //已被初始化  console.log("挂载前状态", "color:red","message: " + this.message); //已被初始化  },mounted: function () {  //mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了console.group('mounted 挂载结束状态===============》');console.log("挂载结束状态", "color:red","el     : " + this.$el); //已被初始化console.log(this.$el);    //{{}}渲染console.log("挂载结束状态", "color:red","data   : " + this.$data); //已被初始化console.log("挂载结束状态", "color:red","message: " + this.message); //已被初始化 },beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');console.log("更新前状态", "color:red","el     : " + this.$el);console.log(this.$el);   console.log("更新前状态", "color:red","data   : " + this.$data); console.log("更新前状态", "color:red","message: " + this.message); },updated: function () {console.group('updated 更新完成状态===============》');console.log("更新完成状态", "color:red","el     : " + this.$el);console.log(this.$el); console.log("更新完成状态", "color:red","data   : " + this.$data); console.log("更新完成状态", "color:red","message: " + this.message); },beforeDestroy: function () {//beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...console.group('beforeDestroy 销毁前状态===============》');console.log("销毁前状态", "color:red","el     : " + this.$el);console.log(this.$el);    console.log("销毁前状态", "color:red","data   : " + this.$data); console.log("销毁前状态", "color:red","message: " + this.message); },destroyed: function () { //destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后console.group('destroyed 销毁完成状态===============》');console.log("销毁完成状态", "color:red","el     : " + this.$el);console.log(this.$el);  console.log("销毁完成状态", "color:red","data   : " + this.$data); console.log("销毁完成状态", "color:red","message: " + this.message)},
}
</script><style>
button._color {color:#f60;
}
</style>

filter 过滤器

<template><div><!-- 过滤器  文本格式化 --><!-- 过滤器可以用到在表达式中{{}}    用在v-bind -->{{3.14159 | number(3)}}<input type="text" v-model="input" /><h1>{{input |addZero}}</h1><!-- 用在v-bind --><div><select v-model="selected"><option value='0'>红色</option><option value='1'>蓝色</option><option value='2'>绿色</option></select></div><div :class="selected |colorFilter">标题</div><ul><li v-for="(v,i) in lists" :key="i">{{v.num | numFilter}}</li></ul><!-- 时间戳 --><h1>{{curTime |dateFilter}}</h1><!-- 添加省略号 --><h1>{{input | toShortShow(5)}}</h1></div>
</template><script>
export default {data () {return {input:0,selected:'0',lists:[{id:1,name:1,num:1},{id:2,name:2,num:2},{id:3,name:3,num:3},{id:4,name:4,num:4}],curTime:1590583800}},filters:{  //过滤器 number(data,n){   //data=====3.14159return data.toFixed(n)},addZero(data){return data<10?'0'+data:data;},colorFilter(data){switch(data){case '0':return 'red';case '1':return 'blue';case '2':return 'green';default:return data}},numFilter(data){switch(data){case 1:return '发货中';case 2:return '正在送货';case 3:return '送货完成';default:return data}},dateFilter(data){var d = new Date(data*1000);return d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate();},toShortShow(data,n){if(data.length>=n){return data.substr(0,n)+'...'}else{return data}}}
}
</script><style>
.red{color:red;
}
.blue{color:blue;
}
.green{color:green;
}
</style>

Vue学习（watch、computed、生命周期、filter）- 学习笔记相关推荐

Vue 进阶系列丨生命周期
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
Vue 进阶语法和生命周期
文章目录 Vue 进阶语法和生命周期 16.Vue:生命周期[了解] 17.Vue:computed计算属性 18.Vue:watch监控属性 Vue 进阶语法和生命周期 a. 每个 Vue 应用都是 ...
用户增长——CLV用户生命周期价值CLTV 笔记（一）
文章目录 1 概念介绍 1.1 概念介绍 1.2 关联指标 1.3 计算方式 1.4 LTV的价值 1.5 应用场景 1.5.1 宏观方面的几个场景: 1.5.2 一个细分的金融场景: 1.5.3 预 ...
01.软件项目管理与敏捷方法——敏捷项目生命周期详解笔记
01.软件项目管理与敏捷方法--敏捷项目生命周期详解笔记 00.与其说是船还不如说是熟练的航行技术保证了成功的航行.--George William Curtis 01.敏捷项目是一个按照敏捷宣言宗旨 ...
vuejs页面跳转_【Vue 学习】 VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
vue生命周期整理学习
生命周期图如下: 生命周期过程: 生命周期过程中,首先创建vue实例,然后初始化事件并监测数据.在created阶段之前就完成了数据的监测(这个阶段data和data的属性已存在,但是el未初始化) ...
【Vue 学习】- VueJS 生命周期
一.概述 Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基 ...
java 内存类_Java学习——类的生命周期和内存
常识是本能,有足够的常识便是天才.--肖伯纳一.类的生命周期类的生命周期:1.加载:将二进制流加载进来.class 2.连接: 验证:确保加载进来的数据不会损害虚拟机准备:为类变量分配内存,附默 ...

Vue学习（watch、computed、生命周期、filter）- 学习笔记

文章目录

Vue学习（watch、computed、生命周期）- 学习笔记

watch 监听

computed 计算属性

set—动态添加属性 delete—删除

生命周期

filter 过滤器

Vue学习（watch、computed、生命周期、filter）- 学习笔记相关推荐

最新文章

热门文章