- vue的计算属性
<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的深度监听
<!-- <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的生命周期
<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>
