Vue 实例化
const vm = new Vue
把Vue的实例命名为
vm是尤雨溪的习惯,我们应该沿用
vm对象封装了对视图的所有操作,包括数据读写、事件绑定、DOM更新
vm的构造函数是Vue,按照ES6的说法,vm所属的类是Vue
optioins是new Vue的参数,一般称之 为选项或构造选项。
options里面有什么
数据: data、props、propsData、computed、methods、watch
DOM: el、 template、 render、 renderError
生命周期钩子: beforeCreate、 created、beforeMount、mounted、 beforeUpdate、 updated、activated、deactivated、 beforeDestroy、 destroyed、errorCaptured
资源: directives、 filters、 components
组合:parent、mixins、 extends、 provide、 inject
el(挂载点)
你想挂在到那个节点上
// 网页上有个#app节点
<div id="app">{{n}}</div>
// 挂载节点
new Vue({
el: "#app"
})
data(内部数据)
尽量使用函数。
原因:假如引入的是一个以xxx.vue
结尾了。在同一个网页引用2次。
render: h一h(X, [h(Demo), h( Demo)])
// new Vue( Demo), Demo._ data = Demo.data( );
// new Vue(Demo), Demo._ data = Demo.data( );
会出现在同一个数据引用2次,如果其中一次修改了data数据 那么机会将xxx.vue
里面的data数据修改;如果它是一个函数,那么外部的引用就是调用这个函数,不会修改它。
data() {
return {
n: 0
}
}
组件:可以组合的物件
methods
在methods的方法中进行声明,我们声明一个add方法 用于加1操作。
var vm = new Vue({
data: { a: 1 },
methods: {
add: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
调用就是
<div id="app">
{{ a }}
<p><button @click="add">add</button></p>
</div>
components(构造器)
用于引用其他的Vue组件的
components: {
Frank:{
template:`
<div>demo2222</div>
`
}
},
引用
template: `
<div>
<button @click="toggle">toggle</button>
<hr>
<Demo v-if="visible === true"/>
<Frank/>
</div>
`,
四个钩子
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。
mounted
实例被挂载后调用,这时 el 被新创建的 vm.el 也在文档内。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用 vm.$nextTick:
destroyed
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
props(外部属性)
Demo.vue代码
<template>
<div class="red">
这里是Demo的内部
{{ message }}
</div>
</template>
<script>
export default {
props: ["message"],
};
</script>
<style scoped>
.red {
color: red;
}
</style>
main.js代码
const Vue = window.Vue
Vue.config.productionTip = false
import Demo from './Demo.vue'
new Vue({
components: {
Demo
},
data: {
visible: true
},
template: `
<div>
// 如果这里的message传的不是字符串,那么就得写如下代码
// <Demo :message="n">
<Demo message="你好 props">
</div>
`,
}).$mount('#app')