vue 数据操作相关总结

new Vue({
 el:"#app",
 data:{
  user:{
   email:"dong@qq.com",
   nickname:"oldUath",
   phone:"12812345678"
  }
 },
 //计算属性
 computed:{
  displayName(){
    //返回一个结果
   const user=this.user
   return user.nickname ||user.phone||user.email
  }
 },
 template:`
   <div>
   {{displayName}}
   </div>
 `
})

<div id="app">
    {{msg}} 
    <br> 
    改变了吗? {{isChange}}
    <button @click="change">改变</button>
  </div>
  new Vue({
   el: "#app",
   data: {
   		//这是第一层数据
      msg:'欲穷千里目',
     	isChange:'No',
      user:{
      	//这是第二层数据
        name:"oldUath",
        phone:'18312345678'
      }
   },
   watch:{
    //只要msg改变,这个方法就会执行,第一层数据只需要写 数据名(){}就可以
    msg(val,oldVal){
      this.isChange = 'Yes'
    },
    //第二层数据需要'','user.name'(){}
    'user.name'(){
    	console.log('user.name变了')
    }
   },
   methods:{
    change(){
      this.msg = '更上一层楼'
    }
   }
  })

//obj:{a:'a'}
obj.a+='hi'//才是监听obj时，因为obj地址没有发生变化，所以不会执行监听obj的事件

watch:{
	obj(){
  		handle(){console.log('obj变了')
  	},
  	 deep:true
}

const vm = new Vue({
   el: "#app",
   data: {
      msg:'欲穷千里目',
     	isChange:'No',
      user:{
        name:"oldUath",
        phone:'18312345678'
      }
   },
   methods:{
    change(){
      this.msg = '更上一层楼'
    }
   }
  })
  vm.$watch('msg',function(){
  		console.log('n变了')
  },{immediate:true})

//在父组件调用子组件
<Child :money="100"><Child>

<template>
<div class="red">
+  {{money}}元
 <button>花钱</button>
</div>
</template>
<script>
export default {
+ props:['money']
}
</script>

<!-- $emit()触发一个事件，update:money是事件名  -->
<button @click="$emit('update:money',money-10)">花钱</button>

<!--  传给子组件一个money值,v-on是监听子组件的update:money事件，
      $event获取子组件事件的结果-->
  <Child :money="total" v-on:update:money="total = $event" />

  <Child :money.sync="total" />

  var Event=new Vue();
  Event.$emit(事件名,数据);//传递事件数据
  Event.$on(事件名,data => {});//接受数据

<template id="a">
 <div>
  <h3>A组件：{{name}}</h3>
  <button @click="send">将数据发送给C组件</button>
 </div>
</template>

<script>
var Event = new Vue();//定义一个空的Vue实例
var A = {
  template: '#a',
  data() {
   return {
    name: 'tom'
   }
  },
  methods: {
   send() {
    Event.$emit('data-a', this.name);
   }
  }
}
</script>

<template id="c">
 <div>
  <h3>C组件：{{name}}，{{age}}</h3>
 </div>
</template>
<script>

var Event = new Vue();//定义一个空的Vue实例
var C = {
  template: '#c',
  data() {
   return {
    name: '',
    age: ""
   }
  },
  mounted() {//在模板编译完成后执行
   Event.$on('data-a',name => {
     this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
   })
  }
}
</script>