VUE计算属性、监听&深度监听、八大生命周期、v-if和v-show
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE计算属性、监听&深度监听、八大生命周期、v-if和v-show相关的知识，希望对你有一定的参考价值。
参考技术A <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <h1>msg.split('').reverse().join('')</h1> -->
<!-- 计算属性不可以写()执行 -->
<h1>newMsg</h1>
<h1>priceV</h1>
<!-- 把毫秒数1646874284591
转化成年月日 -->
<h2>现在是:dateV</h2>
<!-- 计算属性具有缓存的功能 -->
<h2>现在是:getDate()</h2>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue(
el:"#app",
/* 当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新 */
data:
msg:"hello",
price:1000.116321,
date:1646874284591
,
/* 计算属性 */
computed:
newMsg:function()
/* this 指的就是vue实例化的对象 */
return this.msg.split('').reverse().join('')
,
priceV:function()
/* toFixed 会把数字转换成字符串 参数是用来保留几位小数 并四舍五入 */
return '￥'+this.price.toFixed(2)
,
dateV:function()
let oDate = new Date(1646874284591);
return oDate.getFullYear()+'年'+
(oDate.getMonth()+1)+'月'+
oDate.getDate()+'日'
,
,
methods:
getDate:function()
let oDate = new Date(1646874284591);
return oDate.getFullYear()+'年'+
(oDate.getMonth()+1)+'月'+
oDate.getDate()+'日'
,
,
)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>value</h1>
<button @click="changeV">改变value的值</button>
<h1>原价:price</h1>
<button @click="changprie">点我加价10</button>
<h1>每次贵了c元</h1>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue(
el:"#app",
data:
value:"你好,同学",
price:100,
reprice:100,
c:0
,
/* 监听器 */
/* 只要data中的值被改变了就会被触发 */
watch:
/* value属性需要和data中的属性相对应 */
value:function(a,b)
/*第一个参数 a最新的值 第二个参数表示b之前的值 */
console.log('value的值被改变了',a,b);
,
price:function(a,b)
this.c = a-this.reprice
,
/* 有个价格price 原价100 点击一个按钮 价格加10 会在页面显示出
相比原件贵了多少 */
methods:
changeV()
this.value++
,
changprie()
this.price+=10
,
)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="APP">
<h1>obj.value</h1>
<button @click="change">改变value的值</button>
<h1>您爱车的原价是car.price</h1>
<h2>您的爱车相比原价又涨价了c元</h2>
<button @click="changeprice">点我加价</button>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue(
el:"#APP",
data:
obj:
value:0
,
car:
price:1000000,
,
replice:1000000,
c:0
,
/* 监听器 */
/* 基本数据类型可以使用简写的方式 */
/* 引用数据类型使用简写的方式无效 改用对象的方式加上deep:true深度监听 */
/* handler 方法是固定的不能被改 */
/* immediate会立即执行监听器里面的handler方法 */
watch:
/* 如果监听的是计算属性 计算属性里面的data属性的值发生改变才会触发监听器 */
obj:
/* deep:true,
handler:function(a,b)
console.log('值被改了');
immediate:true
*/
'obj.value':function()
console.log('简单粗暴方式监听对象里面的值');
,
car:
deep:true,
handler:function(a)
this.c= a.price-this.replice
console.log(1);
,
immediate:true
/* 有一个对象car car里面有一个price:100w 有个涨价的按钮 点一下就会涨1w
监听这个car如果price发生了变化就在页面显示 您的爱车相比原价又涨价了元
已进入页面立即执行 */
,
methods:
change()
this.obj.value++
,
changeprice()
this.car.price+=10000
,
)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<h1>msg</h1>
<button @click="change">点我</button>
<button @click="destroy">销毁Vue实例</button>
</div>
<script src="./vue.min.js"></script>
<script>
/* Vue的八大生命周期钩子函数 */
/* 区别之一:执行顺序的问题 */
new Vue(
el:".app",
data:
msg:'我爱Vue'
,
/* Vue实例化对象创建之前 */
beforeCreate()
/* 实例化对象创建之前是获取不到data里面的数据的 */
console.log('beforeCreat',this.msg,this.$el);
,
/* Vue实例化对象创建之后 */
created()
/* 实例化对象创建之后可以获取data里面的数据 */
/* 实例化对象创建之后不可以获取到dom包括根节点 */
console.log('created',this.msg,this.$el);
/* 一般在created里面调用接口把接口里面的数据给到Vue的data中 */
,
/* Vue的dom挂载之前 */
beforeMount()
/* dom挂载之前可以获取到dom包括根节点 */
/* beforeMount 还没有把data中的数渲染到dom节点上 */
console.log('beforeMount',this.msg,this.$el);
,
/* Vue的dom挂载之后 */
mounted()
/* Mount 已经把data中的数渲染到dom节点上 */
/* 一般在获取dom节点操作要放在mounted中执行,例如echarts中获取根元素 */
console.log('mounted',this.msg,this.$el);
,
/* Vue的data更新前 */
/* 当把Vue实例中的data中的值改变会会触发 beforeUpdate 和 Update*/
/* 顺序上 beforeUpdate 执行顺序优先于updated */
beforeUpdate()
console.log('beforeUpdate',this.msg,this.$el);
,
/* Vue的data更新之后 */
updated()
console.log('updated',this.msg,this.$el);
,
/* Vue组件销毁前 */
/* 在调用$destory()方法的时候 会执行下面的钩子函数 */
/* 执行顺序上beforeDEstroy优先于destory执行 */
/* ✳ beforeDestory和destory的第一个使用场景是在销毁定时器节约内存的时候都可用 */
beforeDestroy()
console.log('beforeDestroy',this.msg,this.$el);
,
/* Vue组件销毁之后 */
destroyed()
console.log('destory',this.msg,this.$el);
,
methods:
change()
this.msg = '我爱React'
,
destroy()
this.$destory()
,
)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-show 如果值是true 相应的节点就会显示就算值是false在dom中依然存在
只是把display的值改成none -->
<h1 v-show="false">我爱React</h1>
<!-- v-if直接把dom删除再dom文档中已经找不到dom了,变成了注释 -->
<h1 v-if="false">我爱Vue</h1>
<!-- 如果频繁使用 就使用v-show 可以节约性能开销 -->
<!-- 如果短暂使用 例如页面一开始加载的时候进行判断显示 优先使用v-if -->
<!-- 实际开发过程中使用v-if 比较多 -->
</div>
<script src="./vue.min.js"></script>
<script>
new Vue(
el:"#app",
data:
,
methods:
,
)
</script>
</body>
</html>
以上是关于VUE计算属性、监听&深度监听、八大生命周期、v-if和v-show的主要内容，如果未能解决你的问题，请参考以下文章