本文章未写完，将组织思路后以最简单的方式讲解

Vue实例的options属性

一、数据

data 内部数据

  1. // 对象形式
  2. data: {
  3.     n: 0
  4. }
  6. 或
  8. // 函数形式
  9. data() {
  10.     return {
  11.         n: 0
  12.     }
  13. }

优先使用函数，因为如果调用多次，会出现对象被多次引用的问题 使用数据可以使用 this.数据名

props 外部数据

接收外部数据

  1. <template>
  2.     <div>
  3.     {{外部数据名}}
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     porps: ['外部数据名']
  10. }
  11. </script>

传外部数据

  1. <组件名 外部数据名="数据"/>

如果你传的是变量或方法，需要加上冒号

  1. <组件名 :外部数据名="变量名或方法名"/>

propsData

computed 计算属性

methods 方法

  1. new Vue({
  2.     method: {
  3.         函数名(){
  4.             函数体
  5.         }
  6.     }
  7. })

watch 监听

二、DOM

el 挂载点

  1. new Vue({
  2.     el: '#app'
  3. })

执行后会将#app标签整个替换掉

还可以使用 new Vue({}).$mount(#app) 来挂载

template HTML

render 非完整版的HTML

renderError 用不到

三、生命周期

beforeCreate 创建前

created 创建后

beforeMount 挂载前

mounted 挂载后

beforeUpdate 更新前

updated 更新后

activated

deactivated

beforeDestroy 销毁前

destroyed 销毁后

errorCaptured 用不到

  1. new Vue({
  2.    beforeCreate(){
  3.     console.log('创建前执行')
  4.    },
  5.    created(){
  6.     console.log('创建后执行')
  7.    },
  8.    beforeMount(){
  9.     console.log('挂载到页面前执行')
  10.    },
  11.    mount(){
  12.     console.log('挂载到页面后执行')
  13.    }，
  14.    beforeUpdate(){
  15.     console.log('数据更新前执行')
  16.    },
  17.    update(){
  18.     console.log('数据更新后执行')
  19.    },
  20.    beforeDestroy(){
  21.     console.log('消亡前执行')
  22.    },
  23.    destroyed(){
  24.     console.log('消亡后执行')
  25.    },
  26. })

四、资源

directives 指令

filters 过滤器

components 组件

方法1

  1. Vue.component('组件名',{与Vue实例的属性一致})

方法2

创建单文件组件，以 .vue 结尾的文件，在Vue实例中引入

  1. import Demo from './Demo'
  3. new Vue({
  4.     components: {Demo}
  5. })

然后即可直接在HTML中使用

  1. <Demo/>

推荐优先使用方法2

五、组合

parent 父

mixins 混入

extends 拓展

provide 提供

inject 注入