计算属性
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();
}
},
监听器
<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>
深度监听
<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>
v-if和v-show的区别
<div id="app">
<!-- v-show 如果值是true 相应的节点就会显示 就算值是false 在dom中依然存在
只是把display的值改成了none -->
<span v-show="false">我爱张sir</span>
<!-- v-if是直接把dom删除了，在dom文档中已经找不到对应的dom了变成了注释 -->
<h1 v-if="false">我爱Vue</h1>
<!-- 如果频繁使用 就使用v-show 可以节约性能开销 -->
<!-- 如果短暂使用 例如页面一开始加载的时候进行判断显示 优先使用v-if -->
<!-- 在实际的开发过程中 使用v-if比较多 -->
<ul>
<!-- 不推荐同时使用 v-if 和 v-for 因为v-for 具有比 v-if 更高的优先级 -->
<!-- <li v-for="(item,index) in list" v-if="item>1"> -->
<li v-for="(item,index) in list">
<span v-if="item>1">
{{item}}
</span>
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
list:[1,2,3]
},
methods: {
},
})
</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>
