您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue的options選項有什么作用”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue的options選項有什么作用”吧!
在vue中,options選項是指“構(gòu)造選項”,是在創(chuàng)建Vue實例時傳入的參數(shù),是一個對象,語法“const vm = new Vue(options)”。通過“new Vue(options)”來創(chuàng)建出一個Vue實例,也稱為Vue對象,該Vue實例封裝了操作元素視圖的所有操作,可通過Vue實例來輕松操作對應(yīng)區(qū)域的視圖。
options是什么
options
顧名思義就是“選項”的意思, 或稱為構(gòu)造選項. 是在創(chuàng)建Vue實例時傳入的參數(shù), 是一個對象.const vm = new Vue(options)
無論是jquery.js 還是 Vue.js, 都是在 js 的基礎(chǔ)上再次封裝對應(yīng)的操作。如: 通過$(‘div’)獲得一個jQuery的div元素實例, 也稱為jQuery對象, jQuery對象包含了對選項中的div元素的各種操作API,因此jQuery實例封裝的是對選項中元素的各種操作;
而Vue.js 在此基礎(chǔ)上更進一步, 封裝了對視圖的所有操作, 包括數(shù)據(jù)的讀寫、數(shù)據(jù)變化的監(jiān)聽、DOM元素的更新等等, 通過 new Vue(options) 來創(chuàng)建出一個 Vue實例, 也稱為Vue對象, 該Vue實例封裝了操作元素視圖的所有操作, 可通過 Vue實例 來輕松操作對應(yīng)區(qū)域的視圖;
options的五類屬性
數(shù)據(jù): data, props, propsData, computed, 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(掛在點)
new Vue({
el:"#app"
template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
template:`<div>我是小明</div>`
}).$mount("#app")
data(內(nèi)部數(shù)據(jù))支持對象和函數(shù),優(yōu)先使用函數(shù)
會被Vue監(jiān)聽
會被Vue實例代理
每次data的讀寫都會被Vue監(jiān)聽
Vue會在data變化是更新UI
對象
new Vue({
template:"<div>{{n}}</div>",
data:{
n:0
}
}).$mount('#app')
函數(shù)
vue非完整版只支持函數(shù)
new Vue({
template:"<div>{{n}}</div>",
data(){
return {
m:5
}
}
})$mount('#app')
methods(方法)事件處理函數(shù)或者普通函數(shù)
new Vue({
template:"<div>{{n}}{{ add()}} <button @click="add">按鈕</button></div>",
data:{
n:0
},
methods:{
add(){
console.log('我可以是事件處理函數(shù)也可以是普通函數(shù)')
}
}
}).$mount('#app')
components(vue組件:注意大小寫)三種方式
注冊全局組件
Vue.component('Deon1', {
template: "<h3>全局組件</h3>"
})
注冊局部組件
const deon2 = {
template: "<h3>局部組件 {{n}}</h3>",
//在組建中data必須使用函數(shù)
data() {
return {
n: "小明"
}
}
}
new Vue({
components: {
Deon2: deon2,
Deon3:{
template:"<h3>組件3</h4>"
}
},
template: `
<div>頁面
<Deon1></Deon1>
<Deon2></Deon2>
<Deon3></Deon3>
</div>
`
}).$mount('#app')
使用vue文件添加組件
deon4.vue文件
<template>
<div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
data() {
name: "組件4";
},
};
</script>
<style scoped>
div {
border: 1px solid red;
}
</style>
main.js
import Deon4 from './deon4.vue'
Vue.component('Deon1', {
template: "<h3>全局組件</h3>"
})
const deon2 = {
template: "<h3>局部組件 {{n}}</h3>",
//在組建中data必須使用函數(shù)
data() {
return {
n: "小明"
}
}
}
new Vue({
components: {
Deon2: deon2,
Deon3: {
template: "<h3>組件3</h4>"
},
Deon4
},
template: `
<div>頁面
<Deon1></Deon1>
<Deon2></Deon2>
<Deon3></Deon3>
<Deon4><Deon4>
</div>
`
}).$mount('#app')
常用的四個生命周鉤子函數(shù)
created: 實例出現(xiàn)在內(nèi)存中
mounted:實例出現(xiàn)在頁面中觸發(fā)
updated:實例出現(xiàn)了變化觸發(fā)
destroyed:實例被銷毀了觸發(fā)
new Vue({
template:"<div>{{n}}</div>",
data:{
n:0
},
created() {
console.log("實例出現(xiàn)在內(nèi)存中了觸發(fā)");
},
mounted() {
console.log("實例出現(xiàn)在頁面中觸發(fā)");
},
updated() {
console.log("實例出現(xiàn)了變化觸發(fā)");
},
destroyed() {
console.log("實例被銷毀了觸發(fā)");
}
}).$mount('#app')
props(外部數(shù)據(jù))父組件想子組傳值
name="n"(傳入字符串)
:name="n"(傳入this.n數(shù)據(jù))
:fn="add":(傳入this.add函數(shù))
new Vue({
components: {
Deon1: {
props: ["m"],
template: "<div>{{m}}</div>"
}
},
template: `<div><Deon1 :m="m"></Deon1></div>`,
data: {
m: 666
}
}).$mount('#app')
感謝各位的閱讀,以上就是“vue的options選項有什么作用”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vue的options選項有什么作用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。