Vue组件化通讯的实例代码

1. Vue的组成文件(.vue)

分为三部分，分别对应html,js,css

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

2. Vue的生命周期函数

beforeCreate() 创建数据之前 created() 创建数据 我们在这里的得到我们在data里面创建的数据 beforeMount() // Dom渲染完成前 mounted() //Dom渲染完成 beforeUpdate() // 更新视图 在beforeUpdate触发时，视图已经更新完成 Updated() //更新数据调用的函数、。

<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() {  // 创建数据  console.log('created', this.msg); //beforeCreate 1   console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>  // 异步处理得到渲染的dom数据  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> }})

生命周期参考链接

3. export default

每一个模块都是自己的作用域，相应的属性来处理数据和函数

data(声明数据，可以是函数和属性)

类型：Object | Function

组件只接受函数

  // 对象的形式  export default{   data: {    a:1   }  }  // 函数的形式  export default{   data(){    return {     a: 1    }   }  }

methods(一些指令和其他属性的调用方法)

不要用箭头函数来写里面的函数 this指向Vue的实例

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

1、components (组件化定义)

类型： Object

自定义元素，增加代码的复用性

 // 当我们引用一个.vue文件的时候，就像使用这个文件来充当我们主体的一部分 <div>   <hello></hello>  </div> import hello from './hello.vue' export default {  components: {   hello  } }