Vue构造选项--options--（一）--Vue概览、options入门属性如果我们用jQuery选择一个元素，比如

Vue实例是什么

1.实例是什么？回顾jQuery

如果我们用jQuery选择一个元素，比如"#app"，得到的是一个实例，即得到一个jQuery的对象。

实例就是对象。

2.得到的这个对象是干什么的？

这个对象封装了对元素div的所有操作。

在Vue这里也是一样的，先要构造vue的实例。

3.如何得到vue的实例？

const vm = new Vue(options)

new Vue(options)这就是构造Vue的实例，实例根据你给的选项options得出一个对象，这个对象命名为vm。

对象vm封装了一个dom对象以及对视图的所有操作。不管是事件绑定，数据读写，dom更新，全部由vm这个对象负责，只需要调用对应的api即可。

4.回顾原型知识点

对象.__proto__ ===构造函数.prototype

那么在这里相应的有

vm.__proto__ === Vue.prototype

vm.__proto__ 的地址指向 Vue.prototype 的地址。

5.回顾函数知识

每个函数都有一个属性叫prototype

每个对象都有一个属性叫__prototype__

函数.__ prototype __ ===Function.prototype

6.什么是组件？

Vue需要搞清楚的五个问题

options（参数）:初始化的时候写些什么？
vm这个对象有哪些属性
Vue这个函数对象里面除了函数的基本性之外，还有哪些属性
Vue.prototype这个对象里面有哪些属性
Vue.prototype.__ prototype __有哪些属性

Vue构造选项是什么？

options是new Vue的参数，一般称之为选项或构造选项。

为什么叫构造选项？

构造函数后面的选项，简称构造选项。

options按重要程度分为五大类

数据
DOM
生命周期钩子
资源
组合

重点关注红色入门属性和黄色进阶属性。

一、入门属性：

1、el-挂载点

与$mount有替换关系，等同于replace和append。

new Vue({
   el: "元素名称",
   })

2、data-内部数据/支持对象和函数

data:{
    n:0
},//对象写法

data:function(){
    return{
      n:0
    }
  },//函数写法
  
data(){
    return{
      n:0
    }
  },//省掉":function"的函数写法

data优先使用函数

如果当前环境是在实例里面，data可以用对象来写，也可以用函数来写。

const vm = new Vue({
data:{
    n:0
  },//当前环境不是组件，data可以用对象来写
  })

如果当前环境是在组件里面，data要用函数来写。

export default {
    data: function () {
        return {n: 0};
    },//当前环境是组件，所以data要用函数来写。

为什么使用data的时候优先使用函数？

这里涉及到组件的概念。

为了组件的复用，使得每份组件都可以有一份data的拷贝，防止不同组件修改数据时被相互覆盖。

简单说，尽量使用函数。用对象写，bug更多。

3、methods

事件处理函数或者是普通函数

4、components组件

可以认为是实例的实例。创建组件有两种方法。

方法1：直接创建一个demo.vue，这个文件就是一个组件。然后在main.js里面使用。

import demo from "./demo.vue";//第一种引入components的方法
const vm = new Vue({
    components: {
        frank:demo,//我要使用的组件，名字为frank，值为demo
    },
    template:`
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <frank/>//在模板使用组件  
    </div>        
  `
  }).$mount("#frank")

方法2：用js的方式使用组件，不用.vue文件的方式

//定义组件↓
Vue.component(//定义要使用的组件
   "demo2", //组件名
   {
   template: `
     <div>组件内容</div>
     `,//组件内容
 });

//使用组件↓ 
const vm = new Vue({ 
 template: `
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <frank/>
      <demo2/>//在模板使用组件
    </div>        
  `,
}).$mount("#frank");

方法3：将方法1和方法2结合起来。

const vm = new Vue({
  components: {
    demo3:{
      data(){
        return {n:108}
      },
      template:
          `
     <div class="red">组件内容
     <br>
       data使用:{{n}} 
     </div>          
     `
    }
  },
  template:`
  <div class="red">
    <demo3/>
  <div/>
  `
  }).$mount("#frank");

注意事项：

为了代码的模块化，一般使用第一种方法。
组件命名首字母一般为大写，以区分于html原生的标签。

5、四个钩子

created() {//实例出现在内存中
    },
mounted() {//实例出现在页面中
    },
updated() {//实例更新
    },
destroyed() {//实例消亡
    },

问题：怎样使用钩子`destroyed() {//实例消亡}`?

1、先在demo.vue中写一个demo组件，在main.js中引入demo组件
2、在main.js中再写一个toggle按钮来点击隐藏这个demo组件。

import demo from  "./demo.vue"
const vm = new Vue({
components:{demo},
  data:{
    visible:true
  },//当前环境不是组件，data可以用对象来写。
  template:`
  <div>
    <button @click="toggle">toggle</button>
    <hr>
    <demo v-if = "visible === true"/>
  </div>
  `,
  methods:{
    toggle(){
      this.visible = !this.visible
    }
  }
  // render:h => h(demo)
}).$mount("#frank");

6、props—外部属性

问题：外部和内部有什么区别？

外部属性由外部来传值。内部数据由内部自己传值。
外部指从组件外部传入组件内部。从main.js把参数传入demo.vue。
传的内容可以是参数/普通变量，可以是methods/函数，也可以是字符串等等。

<div>
    <demo :message="n"/>
<!--    传数字的时候demo后面要加":",表示后面接的不是字符串-->
</div>

加了冒号后，引号内是JS代码。

<div>
 <demo :message="  '0'  "/>
 <!--    上下两个demo等价，都是传的字符串0-->
 <demo message="0"/>
</div>

传methods（vue-demo-1）

import demo from  "./demo.vue"
const vm = new Vue({
components:{demo},
template:`
  <div>
  {{n}}
    <demo :message="n" :fn ="add"/>
<!--    add从右边更新n，n再传给message,message再映射到demo.vue里面的{{message}}-->
</div>
  `,
  methods:{
    add(){
      this.n += 1
    },
    }
}).$mount("#frank");

Vue构造选项--options--（一）--Vue概览、options入门属性