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

分為三部分，分別對應html,js,css

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

2. Vue的生命周期函數(shù)

beforeCreate() 創(chuàng)建數(shù)據(jù)之前 created() 創(chuàng)建數(shù)據(jù) 我們在這里的得到我們在data里面創(chuàng)建的數(shù)據(jù) beforeMount() // Dom渲染完成前 mounted() //Dom渲染完成 beforeUpdate() // 更新視圖 在beforeUpdate觸發(fā)時，視圖已經(jīng)更新完成 Updated() //更新數(shù)據(jù)調(diào)用的函數(shù)、。

<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> }})

生命周期參考鏈接

3. export default

每一個模塊都是自己的作用域，相應的屬性來處理數(shù)據(jù)和函數(shù)

data(聲明數(shù)據(jù)，可以是函數(shù)和屬性)

類型：Object | Function

組件只接受函數(shù)

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

methods(一些指令和其他屬性的調(diào)用方法)

不要用箭頭函數(shù)來寫里面的函數(shù) 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  } }