這篇文章主要介紹Vue中Options的使用方法是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
el：掛載點
與$mount有替換關系
new Vue({
el: "#app"
});
new Vue({}).$mount('#app')注：被你選為掛載點的那個元素，如果在index.html里那個元素里面本來就有內容，在渲染時會消失（網速慢可以看到），被這個vue實例的對應內容所覆蓋。
data：內部數據
支持對象和函數，優先用函數
new Vue({
//優先使用函數
data() {
return {
n: 0,
}
}
}).$mount("#app");注：能寫函數盡量寫函數，否則有可能有BUG；
methods：方法
事件處理函數
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
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/>
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");四個鉤子
created -- 實例出現在內存中后觸發
created(){
debugger
console.log('這玩意出現在內存中')
},mounted-- 實例出現在頁面中（掛載了）后觸發
mounted(){
debugger
console.log('這玩意兒已出現在頁面中')
},updated -- 實例更新了后觸發
updated(){
console.log('更新了')
console.log(this.n)
},
//當你+1的時候，能證明他在更新的時候觸發,還可以拿到最新的ndestroyed -- 實例從頁面和內存中消亡了后觸發
props：外部屬性
外部來傳值
message="n"傳入字符串
:message="n"傳入vue實例的this.n數據
:fn="add"傳入vue實例的this.add函數
示例
補充知識：vue $options初始化
vue實例化時，對$options進行初始化
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的使用方法是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
