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 生命周期钩子 资源 组合
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选项必须是一个函数
为了组件的复用,使得每份组件都可以有一份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
add一定要写在method里
第二中写法
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
文件那就叫组件
四个钩子
created