el：掛載點(diǎn)

與$mount有替換關(guān)系

new Vue({ el: '#app'});new Vue({}).$mount(’#app’)

注：被你選為掛載點(diǎn)的那個(gè)元素，如果在index.html里那個(gè)元素里面本來就有內(nèi)容，在渲染時(shí)會(huì)消失（網(wǎng)速慢可以看到），被這個(gè)vue實(shí)例的對應(yīng)內(nèi)容所覆蓋。

data：內(nèi)部數(shù)據(jù)

支持對象和函數(shù)，優(yōu)先用函數(shù)

new Vue({ //優(yōu)先使用函數(shù) data() { return { n: 0, } }}).$mount('#app');

注：能寫函數(shù)盡量寫函數(shù)，否則有可能有BUG；

methods：方法

事件處理函數(shù)

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’)

普通函數(shù)：methods代替filter

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> //事件處理函數(shù) <hr> {{filter()}} //普通函數(shù)(JS的filter直接在視圖里調(diào)用，每一次更新渲染都會(huì)調(diào)用一次) </div> `,//主動(dòng)在模板里面調(diào)用 methods: { add() { this.n += 1; //事件處理函數(shù) }, filter() { return this.array.filter(i => i % 2 === 0); //普通函數(shù) } }}).$mount('#app');

components：方法

使用Vue組件，注意大小寫

（建議用法） 模塊化：

新建一個(gè)vue文件Demo.vue，這個(gè)vue文件就是一個(gè)組件

在main.js中引入這個(gè)vue文件

在vue實(shí)例的components中聲明這是我要用的組件，并且命名為Demo

這樣在這個(gè)Vue實(shí)例的template中就可以直接使用這個(gè)組件<Demo/>

import Vue from 'vue';import Demo from './Demo.vue'; //引入這個(gè)vue文件 ---文件名最好小寫 組件名最好大寫Vue.config.productionTip = false;new Vue({ components: { Demo //在vue實(shí)例的components中聲明這是我要用的組件，并且命名為Demo //如果組件名就叫Demo，即Demo：Demo，那就寫Demo --ES6縮寫 //components: {Demo}, }, data() { return { n: 0 }; }, template: ` <div class=red> {{n}} <button @click='add'>+1</button> <Demo/> //這樣在這個(gè)Vue實(shí)例的template中就可以直接使用這個(gè)組件`<Demo/>` </div> `, methods: { add() { this.n += 1; }, }}).$mount('#app');

四個(gè)鉤子

created -- 實(shí)例出現(xiàn)在內(nèi)存中后觸發(fā)created(){ debugger console.log(’這玩意出現(xiàn)在內(nèi)存中’) },

mounted-- 實(shí)例出現(xiàn)在頁面中（掛載了）后觸發(fā)

mounted(){ debugger console.log(’這玩意兒已出現(xiàn)在頁面中’) },

updated -- 實(shí)例更新了后觸發(fā)

updated(){ console.log(’更新了’) console.log(this.n) }, //當(dāng)你+1的時(shí)候，能證明他在更新的時(shí)候觸發(fā),還可以拿到最新的n

destroyed -- 實(shí)例從頁面和內(nèi)存中消亡了后觸發(fā)

props：外部屬性

外部來傳值

message='n'傳入字符串

:message='n'傳入vue實(shí)例的this.n數(shù)據(jù)

:fn='add'傳入vue實(shí)例的this.add函數(shù)

示例

補(bǔ)充知識：vue $options初始化

vue實(shí)例化時(shí)，對$options進(jìn)行初始化

vue/src/core/instance/init.js

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用法說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。