构造选项
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 += 1
}
}
}).$mount('#app'