vue：构造选项

vue实例
jq选择元素，得到一个jq实例就是对象，封装了jq的操作

const vm = new Vue(options)

这就是构造vue的实例，实例会根据选项得出一个对象，叫vm
封装了n+0 +1操作，事件绑定数据读写dom更新，没有ajax，视图层，不包括网络全部由vm负责，只要调用api就行

js原型
任何一个对象.proto ===其构造函数.prototype

vm.proto === Vue.prototype

内存地址
vm封装了dom对象和所有操作

new Vue是个函数，对象，地址是202，除了函数的基本性质还有那些
每个函数都有prototype

Vue.proto ==??.prototype

A Object B,arrray C Function D 其他
选 c Function.prototype 大写

任何函数proto === Funcrtion.prototype

1。new Vue(options)初始化时候能写进什么东西

options是new Vue的参数称选项构造选项（构造函数的选项）

文档搜options.5大类属性：数据 dom 生命周期钩子资源组合

image.png

propsData

方法method：面向对象方法一定是依附与一个对象 obj.sayhi()方法 sayhi()函数

template给完整版用的和render（非完整版）二选一

生命周期
createElement('div')还没出现在页面，没有append
created ：append（‘#app’）mount（挂载）

updated：更新n:0 =>1

destroyed:从页面中消亡

钩子：hooks 可以切入的点 created mount updated destroyed

函数fn：数学概念

入门属性

el-挂载点
和$mount有替换关系基本认为replace和append

data-内部数据

一个组件的data选项必须是一个函数

image.png

为了组件的复用，使得每份组件都可以有一份data的拷贝，防止不同组件修改数据时被互相覆盖
为什么用对象错的？
如果是对象，对象会在这个组件的所有实例中共享防止指向同一个内存地址

import Demo from './Demo.vue'

如果你的data是写在.vue文件中，里面的data必须是函数
这个demo实际上是个对象

const object = Demo

vue会自动把对象传个new.vue

render:h =>h(x,[h(Demo),h(Demo)])//new Vue(Demo)

出现问题，第二次把demo对象传给了newVue,同一个data传给俩个组件，如果修改其中一个，另一个也变化
结论：import一个.vue组件得到的demo,data不能写成对象
函数的画，会先调用一下Demo.data()得到demo真正的data
Demo._data = Demo.data()第二次调用时候还会执行这句话，好处是第一次执行data函数得到全新对象，第二次执行还是全新对象

method

作为事件处理函数或者普通函数，可以代替filter

image.png

add一定要写在method里

image.png

第二中写法

image.png

this.array == data.array,

每次渲染都调用一次

components

Vue实例 Vue对象

创建vue组件
引用
第一种组件 import vue文件

import Demo from './Demo.vue'

const vm = new Vue({
      components:{
          Frank :Demo
}
})

template:`
<Frank/>//写的frank，对应demo组件，demo.vue里面只有demo这个字，效果就是在hr水平线上显示红色demo
`

第二个组件声明一个全局

Vue.component(id:'Demo2', definition:{

          template:'
              <div>demo2</div>
'
}
const vm = new Vue({
      template:'
          <Demo2/>
          '
  })

第三种写法前两种结合

cosnt vm = new Vue({
    components:{
          Frank ：{
                data(){
return {n:0}
},
               template:'
          <div>Frank's n:{{n}}<./div>
  '
}
  }
  })

可以把复杂组件放到Vue.component函数的第二个参数，接受的东西和new Vue一模一样。可以认为component就是给一个实例取了一个名字。如果直接newVue(const vm = new Vue({})那就叫做实例
用vue.component或者.vue文件那就叫组件

vue：构造选项