<template></template><script></script><style></style>

<div id='app'> <p>{{msg}}</p> <input type='text' v-model='msg'></div>var app = new Vue({ el: '#app', data() {  return {   msg: 1  } }, beforeCreate() {  console.log('beforeCreate', this.msg); //beforeCreate undefined  console.log('beforeCreate: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p> }, created() {  // 創(chuàng)建數(shù)據(jù)  console.log('created', this.msg); //beforeCreate 1   console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>  // 異步處理得到渲染的dom數(shù)據(jù)  setTimeout(() => {   this.msg = 100   console.log('nextTick', document.getElementsByTagName('p')[0])   }, 100)  // nextTick <p>100</p> }, beforeMount() {  console.log('beforeMount', this.msg) //beforeMount 1  console.log('beforeMount: ', document.getElementsByTagName('p')[0]) // beforeMount <p>{{msg}}</p> }, mounted() {  // 渲染dom  console.log('mounted', this.msg) //mounted 1  console.log('mounted: ', document.getElementsByTagName('p')[0]) //mounted <p>1</p> }, beforeUpdate() {  console.log('beforeUpdate', this.msg) //beforeUpdate 100  console.log('beforeUpdate: ', document.getElementsByTagName('p')[0]) //beforeUpdate <p>100</p> }, updated() {  console.log('updated', this.msg) // updated 1  console.log('updated: ', document.getElementsByTagName('p')[0]) // updated <p>100</p> }})

  // 對象的形式  export default{   data: {    a:1   }  }  // 函數(shù)的形式  export default{   data(){    return {     a: 1    }   }  }

 export default{  methods: {   plus() {    this.a++   }  } }

 // 當(dāng)我們引用一個.vue文件的時候，就像使用這個文件來充當(dāng)我們主體的一部分 <div>   <hello></hello>  </div> import hello from './hello.vue' export default {  components: {   hello  } }

{{this.total}} //[3,4]<button @click='add'>添加數(shù)據(jù)</button> //點擊會更新this.total  export default　{ data: () => ({  a: 1,  b: [2,3] }), methods: {  add(){   this.b.push(8);  } }, computed: {  total(){   return this.b.map((item)=>{    return item+this.a   })  } }}

// 點擊后相應(yīng)的變化data(){  return {   a: 1,   b: [2,4,6],   c:{name:'hcc',age:22}  } },methods: {  add(){   this.a++   this.b.push(8)   this.c.name = 'yx'  } },watch: {  b: function(val, oldVal){    console.log('new', val) //[2,4,6,8]    console.log('new', oldVal) //[2,4,6,8]  },  a: function(val, oldVal){   console.log(val); //2   console.log(oldVal); //1  },  c:{   handler(val){    console.log(val); //{name: 'yx',age: 22}   }   }},

// 父組件<hello :formParent='num'></hello> //htmlcomponents: { hello},data(){ return {  num: 3 }}//子組件//1. 數(shù)組規(guī)定接受的數(shù)據(jù)props: ['hello']//2. 驗證的方式props:{ hello: Number, hello: [String, Number], hello: {  type: Object,  default(){   return {message: 'hello'}  } }}

// 子組件data () { return {  msg: 'Welcome to Your Vue.js App' }},methods: { change(){  this.$emit('sendMsg',this.msg) //把msg傳遞給父組件 }}// 父組件// 引入子組件，并定義componentscomponents: { hello},methods: { show(msg){   // 這里接受子組件傳遞的參數(shù)  console.log(msg); }}<hello @sendMsg='show'></hello> // 這里不用傳遞參數(shù)，不然會覆蓋子元素傳遞的參數(shù)

// html  <h1 ref="myElement">這是一個dom元素</h1> //dom元素 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子組件 >-- 組件中this.refs => {myElement: h1, child: VueComponent}// 運用(在父元素中調(diào)用子元素的方法)// html <hello ref='child'></hello> // 子元素hello methods: {  change() {   this.$emit('getson',this.msg)   this.obj.name = 'yx'  },   drop(el) {    el.style.background = 'red';   } },// 父元素methods: { add() {  console.log(this.refs); //{child: VueComponent}  this.$refs.child.drop('這里傳遞父元素的dom節(jié)點') }}//如果有一個需求是，一個父元素有2個子組件，其中一個子組件的方法要調(diào)用另一個子組件的dom元素//1. 一個子組件需要向父組件發(fā)送元素this.$emit('方法名',dom)//2. 父元素接受到子組件的傳遞得到對應(yīng)dom//3. 父元素通過this.$refs調(diào)用對應(yīng)的另一個子組件的方法并傳入?yún)?shù)// 子元素hello和world <div class="world">  <h1 ref="world">這是world的dom元素</h1>  <button @click='send'>給父元素傳遞dom</button> </div> methods: {  send(){   this.$emit('give',this.$refs.world); //給父元素發(fā)送dom }  <div class='hello'>  <button>改變dom</button> </div>  methods: {  changeDom(target){   console.log(target)  } } // 父元素 <world @give='父親自己的方法'></world> <hello ref='helloChild'></hello> methods: {  // 這里接受子元素傳遞過來的dom元素  '父親自己的方法'(target) {   this.refs.helloChild.changeDom(target) //調(diào)用另一個子元素的方法，并把dom傳遞過去  } }