1.Vue实例如何创建

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

2.Vue实例内存图

options是选项，图中有几个问号我们在接下来的文章中一一来介绍

image.png

3.Vue options中有哪些属性

数据：data、 props、 propsData、 computed、methods、 Watch
DOM: el、 template、 render、 renderError
生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、 updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured
资源: directives、 filters、 components
组合: parent, mixins、 extends、 provide、 inject

3.1 options中的入门属性

目录：
1- el 挂载点
2 - data 内部数据
3 - methods 方法
4 - components
5 - 生命周期钩子
6 - prosp 外部属性（数据）

3.1.1el 挂载点

只在用new创建实例时生效

html
  <div id="app"></div>

js
new Vue({
    el:'#app'
})

这样Vue就挂载到了#app上
可以用$mount() 来代替

new Vue().$mount('#app')

3.1.2data 内部数据

支持对象和函数，优先使用函数

const vm =new Vue({
data(){
  return{
     n:0,
  }
},
template:`
<div class="red">
   {{n}}
   <button @click="add">+1</button>
   </div>
`,
methods:{
  add(){
    this.n+=1
  },
}
})
vm.$mount("#frank")  

3.1.3methods 方法

事件处理函数或者是普通函数。
还是拿上面代码举例，如果将代码写成下面的样子：

const vm =new Vue({
data(){
  return{
     n:0,
  }
},
template:`
<div class="red">
   {{n}}
   <button @click="add">+1</button>
   </div>
`,
})
vm.$mount("#frank")  

写成上面这种况的话一定会报错“add没有定义” ，我们只需要把add放到methods里面就可以了。

3.1.4components属性

组件有三种方式引用

引用的第一种方式
const Vue=window.Vue
Vue.config.productionTip=false
//引用文件
 import Demo from './Demo.vue' 
const vm =new Vue({
//给组件起名字，表示我需要用这个组件
  components:{
   Frank1:Demo //等同于{Demo}
},  
data(){
  return{
     n:0,
  }
},
template:`
<div class="red">
   {{n}}
   <button @click="add">+1</button>
   //直接用这个组件
<Frank1/>
   <hr>
   </div>
`,
methods:{
  add(){
    this.n+=1
  },
})
vm.$mount("#frank") 

引用的第二种方式
const Vue=window.Vue
Vue.config.productionTip=false
//直接生成组件
Vue.component('Demo2',{
  template:`
  <div>demo22</div>  `
})
const vm =new Vue({
data(){
  return{
     n:0,
  }
},
template:`
<div class="red">
   {{n}}
   <button @click="add">+1</button>
   <demo2/>
   </div>
`,
methods:{
  add(){
    this.n+=1
  },
})
vm.$mount("#frank")  

第三种方法
const Vue=window.Vue
Vue.config.productionTip=fals

const vm =new Vue({
//前面两种方法的结合
components:{
  Frank2:{
    data(){
      return {n:0}
    },
    template:`
    <div>Frank's n :{{n}}<div/>
    `
  }
},
data(){
  return{
     n:0,
  }
},
template:`
<div class="red">
   {{n}}
   <button @click="add">+1</button>
   <Frank2/>
   </div>
`,
methods:{
  add(){
    this.n+=1
  },
})
vm.$mount("#frank")  

3.1.5生命周期钩子

created - 实例出现在内存当中
mounted - 实例出现在页面当中
updated - 实例更新了
destroyed - 实例从页面和内存当中消亡

3.1.6prosp 外部属性（数据）

内部属性和外部属性的区别在于，外部的属性是由外部来来进行传值的，内部属性当然就是依靠内部自己传值的。

<template>
<div class="red">
 这里是Demo的内部
  {{message}}
</div>
</template>
<script>
export default{
//从外部传入一个message
  props:['message']
}
</script>
<style>
.red{
  color: red;
  border:1px solid red;
}
</style>

  <div>
  <Demo :message="n"/>
  </div>
  })
  vm.$mount("#frank") */
})

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.