v-if与v-show的区别
| v-show | v-if |
|---|---|
| v-show 如果值是true 相应的节点就会显示 就算值是false 在dom中依然存在只是把display的值改成了none | v-if是直接把dom删除了，在dom文档中已经找不到对应的dom了变成了注释 |
| 如果频繁使用 就使用v-show 可以节约性能开销 | 如果短暂使用 例如页面一开始加载的时候进行判断显示 优先使用v-if |
| ☆☆☆在实际的开发过程中 使用v-if比较多 | |
| ☆☆☆不推荐同时使用 v-if 和 v-for 因为v-for 具有比 v-if 更高的优先级 |
计算属性
计算属性关键词: computed,与 data 平级。
计算属性具有缓存的功能，当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新。
监听器如果监听的是计算属性，只有当计算属性里面的data属性里面的值发生了改变，才会触发监听器。
<div id="app">
<!-- 计算属性不可以写()执行 -->
<h1>{{newMsg}}</h1>
<h1>{{priceV}}</h1>
<h1>{{dateV}}</h1>
<h1>{{getDate()}}</h1>
<hr>
<h1>{{ceshi}}</h1>
<button @click="getC">获取计算属性ceshi的值</button>
<button @click="changeD">改变data中的value值</button>
<button @click="getCeshi">点击方法的时候触发</button>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
/* 挂载点 */
el: "#app",
/* 数据 */
data: {
msg:'hello',
price:1000.00000001,
value:99
},
/* 计算属性 */
/* 计算属性具有缓存的功能 */
/* 当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新 */
computed:{
newMsg:function(){
/* this 指的就是Vue实例化对象 */
console.log(this)
/* 一定要return */
return this.msg.split('').reverse().join('')
},
priceV:function(){
/* toFixed会把数字转成字符串 参数是用来保留几位小数 并四舍五入 */
return '￥'+this.price.toFixed(2)
},
/* 把毫秒数1646874284591 转成 年月日 */
dateV:function(){
let oDate = new Date(1646874284591);
return oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'
},
ceshi:function(){
return this.value +'---'+ Math.random();
}
},
watch:{
/* 如果监听的是计算属性 计算属性里面的data属性里面的值例如value
发生了改变，才会触发监听器 */
ceshi:function(){
console.log(11111)
}
},
/* 定义方法的地方 */
methods: {
getCeshi:function(){
console.log('方法getCeshi：',this.value +'---'+ Math.random())
},
getC:function(){
console.log('获取计算属性ceshi的值',this.ceshi)
},
changeD:function(){
this.value++
},
getDate:function(){
let oDate = new Date(1646874284591);
return oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'
}
},
})
</script>
监听器
Vue.js 监听属性 watch，只要data中的值被改变了就会被触发，我们可以通过 watch 来响应数据的变化。
<div id="app">
<h1>{{value}}</h1>
<button @click="changeV">改变value的值</button>
<button @click="changeV">改变value的值</button>
<button @click="changeV">改变value的值</button>
<h1>原价：{{price}}</h1>
<button @click="changePrice">改变价格</button>
<h1>相比原价贵了{{expensive}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
value:100,
price:100,
expensive:0,
rePrice:100
},
/* 监听器 */
/* 只要data中的值被改变了就会被触发 */
watch:{
/* value属性需要和data中的属性相对应 */
value:function(newV,oldV){
/* 第一个参数newV表示最新的值 第二个参数oldV表示之前的值 */
console.log('value的值被改变了',a,b)
},
/* 有个价格price 原价是100 点击一个按钮 价格加10 会在页面显示出 相比原价贵了多少 */
price:function(newV,oldV){
this.expensive = newV - this.rePrice
}
},
methods: {
changePrice:function(){
this.price+=10;
},
changeV(){
this.value++;
}
},
})
</script>
基本数据类型可以使用简写的方式，引用数据类型使用简写的方式无效，需要改用对象的方式 加deep:true深度监听，handler方法名是固定的不可以被篡改，immediate:true 会立即执行监听器里面的handler方法
<div id="app">
<!-- <h1>{{obj.value}}</h1>
<button @click="change">改变value</button> -->
<h1>{{car.price}}w</h1>
<button @click="increase">涨价</button>
<h1>您的爱车相比原价又涨了{{expensive}}w</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
obj:{
value:0
},
car:{
price:100
},
expensive:0,
rePrice:100
},
/* 监听器 */
/* 基本数据类型可以使用简写的方式 */
/* 引用数据类型使用简写的方式无效 怎么办？改用对象的方式 加deep:true深度监听 */
/* handler方法名是固定的不可以被篡改 */
/* immediate:true 会立即执行监听器里面的handler方法 */
watch:{
// obj:{
// deep:true,
// handler:function(newV,oldV){
// console.log(newV,oldV)
// console.log('值被改了')
// },
// immediate:true
// },
'obj.value':function(){
console.log('简单粗暴的方式监听对象里面的值')
},
/* 有一个对象car car里面有price:100w 有一个涨价的按钮 点一下就会涨1w
监听这个car 如果price发生了变化 就在页面显示 您的爱车相比原价又涨了多少钱
一进入页面 立即执行*/
car:{
deep:true,
handler:function(newV){
console.log(1)
this.expensive = newV.price - this.rePrice;
},
immediate:true
}
},
methods: {
increase(){
this.car.price+=1
},
change(){
this.obj.value++;
}
},
})
</script>
生命周期 Vue的八大生命周期钩子函数，区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted。
<div id="app">
<h1>{{msg}}</h1>
<button @click="change">改变msg</button>
<button @click="destroy">销毁Vue实例</button>
<h1>{{time}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
/* Vue的八大生命周期钩子函数 */
/* 区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted */
new Vue({
el:"#app",
data:{
msg:'我爱Vue',
time:0,
timeId:null
},
/* Vue实例化对象创建之前 */
beforeCreate() {
/* 实例化对象创建之前是获取不到data里面的数据的 */
console.log('beforeCreate',this.msg)
},
/* Vue实例化对象创建之后 */
created() {
/* 实例化对象创建之后可以获取data里面的数据 */
/* 实例化对象创建之后不可以获取到dom包括根节点 */
console.log('created',this.msg,this.$el)
/* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
// this.timeId = setInterval(()=>{
// this.time++;
// console.log(this.time)
// },500)
},
/* Vue的dom挂载之前 */
beforeMount() {
/* dom挂载之前可以获取到根节点 */
/* beforeMount还没有把data中的数据渲染到dom节点上 */
console.log('beforeMount',this.$el)
},
/* Vue的dom挂载之后 */
mounted() {
/* mounted已经把data中的数据渲染到了dom节点上 */
console.log('mounted',this.$el)
/* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
},
/* Vue的data值更新前 */
/* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
/* 顺序上 beforeUpdate执行顺序优先于updated */
beforeUpdate() {
console.log('beforeUpdate',this.msg,this.$el)
},
/* Vue的data值更新后 */
updated() {
console.log('updated',this.msg,this.$el)
},
/* Vue组件销毁前 */
/* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
/* 执行顺序上beforeDestroy优先于destroyed执行 */
/* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
beforeDestroy() {
console.log('beforeDestroy',this.msg,this.$el)
},
/* Vue组件销毁后 */
destroyed() {
console.log('destroyed',this.msg,this.$el)
clearInterval(this.timeId)
},
methods: {
change(){
this.msg = '我爱React'
},
destroy(){
this.$destroy();
}
},
})
</script>
