Vue构造选项

构造选项

V2 options文档
内容:new Vue(options)options取值详解
查看示例代码

Vue实例

什么是Vue实例？
Vue实例就如同jQuery实例:
封装了对DOM的所有操作
封装了对data的所有操作

比如，如果我们用jQuery选择一个元素，会得到一个jQuery的实例(实例就是对象)，而不是得到这个元素。这个对象封装了对那个<div>的所有操作。Vue也是一样的，我们要做的就是用Vue去搞出一个Vue实例来。

new Vue() 这就是构造一个Vue的实例。
这个实例会根据你给的选项得出一个对象(vm)，vm封装了这个DOM对象以及对应的所有操作，不管是事件绑定还是数据的读写、DOM更新，全部都由vm这个对象负责。你只需要去调用它的API就好了。

原型:对象.__proto__===其构造函数.prototype
推出vm.__proto__===Vue.prototype

函数也是对象，所以Vue函数对象的内存图如上。
函数.__proto__===Function.prototype推出Vue.__proto__===Function.prototype

问题一: 初始化时可以写些什么对象进去(options)？
问题二: vm自己有哪些属性？
问题三: Vue函数本身有哪些属性?
问题四: 每个函数都有个属性叫prototype，同时每个对象都有个属性叫__proto__。假设Vue.prototype对应的对象的地址是#419，那请问这个#419里面有哪些属性呢？
问题五:Vue.prototype.__proto__= ?

Vue实例的作用

vm对象封装了对视图的所有操作但不包括ajax,因为ajax是网络层的。

按照ES6的说法，构造函数也可以说是类，所以vm所属的类是Vue。
new Vue(options)options是new Vue的参数，一般称之为选项或构造选项。

一.options里面有什么？

V2 options文档
options的五类属性

第1类属性 Data:

data 数据 
props 属性
computed 计算属性 //被计算出来的
methods 方法，用来定义方法的
watch 观察 //当data变化时做某些事情就用watch
propsData //很少用,单元测试会用

方法和函数的区别？
1.概念:方法是属于面向对象概念，函数属于数学概念。
在面向对象里叫方法,有对象才有方法，方法依附于对象即对象.方法，比如说obj.sayhi()sayhi就叫方法也是函数，一般叫方法。
如果sayhi()这样写就叫函数
在数学里叫函数。
2.都指同一个东西

function(p1,p2){
   
  return 
}

第2类属性 DOM:

el 挂载点 //你要用你的模版替换页面上的哪一块，你的挂载点
template //你的HTML内容。着重讲语法v-if、v-for
render  渲染 //⚠️注意template和render只能二选一！
//template是给完整版用的，render是给非完整版用的。一起用必然有一个会失效！
renderError //很少用

第3类属性 生命周期钩子:
生命周期:Vue组件在页面中插入一个<div>监听它的事件，然后用户点击按钮时变化。可以切入的点叫做钩子。

beforeCreate  创建之前
created  创建之后
beforeMount
mounted 挂在之后
beforeUpdate
updated 更新之后
activated
deactivated
beforeDestroy
destroyed 失败之后
errorCaptured //很少用

第4类属性 资源

directives 指令
filters 过滤器 //尽量不去用，用methods代替
components 组件 
//如果要在一个文件引用另一个Vue的文件就用组建。Demo.vue就叫组件,英文名叫components。

第5类属性 组合:

parent //很少用
mixins 混入
extends 扩展
provide 提供
inject 注入

入门属性

1.el 挂载点

可以用$mount代替

你要用你的模版替换页面上的哪一块,可以用$mount代替。组件或者实例的挂载点。

index.html
<div id="app"> {
   {
   n}} </div>

main.js
new Vue({
    
  el: '#app',
  render(h) {
   
    return h(Demo)
  }
})
可以用$mount替代:
new Vue({
    
  render: h => h(Demo)
}).$mount('#app')

//const vm = new Vue({
   
//  render: h => h(Demo)
//})
//vm.$mount('#app')

总结
特点1.名字要保持一致
特点2.如果在<div>内加内容，那么多半用户是看不见的。js加载完后会把hello干掉。
特点3.可以用$mount替代。挂载基本等同于replace或append

2.data 内部数据

组件的定义只接受函数。

用vue完整版来示例

main.js
console.log(window.Vue)
// import Vue from 'vue' 删掉,这次不从npm引入,直接使用全局的Vue
const Vue = window.Vue
Vue.config.productionTip = false

new Vue({
    //实例
  data: {
    //内部数据，只支持函数
    n: 0
  },
  template: `
  <div class="red">
    {
    {n}}
    <button @click="add">+1</button>
  </div>
  `,
  methods: {
   
    add() {
    //add要先定义好，不然会报错
      this.n