el：挂载点
与$mount有替换关系
|
1
2
3
4
5
|
注：被你选为挂载点的那个元素，如果在index.html里那个元素里面本来就有内容，在渲染时会消失（网速慢可以看到），被这个vue实例的对应内容所覆盖。
data：内部数据
支持对象和函数，优先用函数
|
1
2
3
4
5
6
7
8
|
new Vue({ //优先使用函数 data() { return { n: 0, } }}).$mount("#app"); |
注：能写函数尽量写函数，否则有可能有BUG；
methods：方法
事件处理函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
new Vue({ data (){ return{ n:0 } }, template:` <div class="red"> {{n}} <button @click="add">+1</button> </div> `, //add必须写到methods里面 methods:{ add(){ this.n+=1 } }}).$mount('#app') |
普通函数：methods代替filter
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
import Vue from "vue";Vue.config.productionTip = false;new Vue({ data() { return { n: 0, array: [1, 2, 3, 4, 5, 6, 7, 8] }; }, template: ` <div class=red> {{n}} <button @click="add">+1</button> //事件处理函数 <hr> {{filter()}} //普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次) </div> `,//主动在模板里面调用 methods: { add() { this.n += 1; //事件处理函数 }, filter() { return this.array.filter(i => i % 2 === 0); //普通函数 } }}).$mount("#app"); |
components：方法
使用Vue组件，注意大小写
（建议用法） 模块化：
新建一个vue文件Demo.vue，这个vue文件就是一个组件
在main.js中引入这个vue文件
在vue实例的components中声明这是我要用的组件，并且命名为Demo
这样在这个Vue实例的template中就可以直接使用这个组件<Demo/>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import Vue from "vue";import Demo from "./Demo.vue"; //引入这个vue文件 ---文件名最好小写 组件名最好大写Vue.config.productionTip = false;new Vue({ components: { Demo //在vue实例的components中声明这是我要用的组件，并且命名为Demo //如果组件名就叫Demo，即Demo：Demo，那就写Demo --ES6缩写 //components: {Demo}, }, data() { return { n: 0 }; }, template: ` <div class=red> {{n}} <button @click="add">+1</button> <Demo/> //这样在这个Vue实例的template中就可以直接使用这个组件`<Demo/>` </div> `, methods: { add() { this.n += 1; }, }}).$mount("#app"); |
四个钩子
|
1
2
3
4
5
|
created -- 实例出现在内存中后触发created(){ debugger console.log('这玩意出现在内存中') }, |
mounted-- 实例出现在页面中（挂载了）后触发
|
1
2
3
4
|
mounted(){ debugger console.log('这玩意儿已出现在页面中') }, |
updated -- 实例更新了后触发
|
1
2
3
4
5
|
updated(){ console.log('更新了') console.log(this.n) }, //当你+1的时候，能证明他在更新的时候触发,还可以拿到最新的n |
destroyed -- 实例从页面和内存中消亡了后触发
props：外部属性
外部来传值
message="n"传入字符串
:message="n"传入vue实例的this.n数据
:fn="add"传入vue实例的this.add函数
补充知识：vue $options初始化
vue实例化时，对$options进行初始化
vue/src/core/instance/init.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { //初始化$options vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } }} |
以上这篇Vue的Options用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/justcho/p/13472847.html
