站長資訊網(wǎng)
在vue中，options選項(xiàng)是指“構(gòu)造選項(xiàng)”，是在創(chuàng)建Vue實(shí)例時(shí)傳入的參數(shù)，是一個(gè)對象，語法“const vm = new Vue(options)”。通過“new Vue(options)”來創(chuàng)建出一個(gè)Vue實(shí)例，也稱為Vue對象，該Vue實(shí)例封裝了操作元素視圖的所有操作，可通過Vue實(shí)例來輕松操作對應(yīng)區(qū)域的視圖。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
Vue中options的作用
options
顧名思義就是“選項(xiàng)”的意思, 或稱為構(gòu)造選項(xiàng). 是在創(chuàng)建Vue實(shí)例時(shí)傳入的參數(shù), 是一個(gè)對象.const vm = new Vue(options)
- 無論是jquery.js 還是 Vue.js, 都是在 js 的基礎(chǔ)上再次封裝對應(yīng)的操作。如: 通過$(‘div’)獲得一個(gè)jQuery的div元素實(shí)例, 也稱為jQuery對象, jQuery對象包含了對選項(xiàng)中的div元素的各種操作API,因此jQuery實(shí)例封裝的是對選項(xiàng)中元素的各種操作;
- 而Vue.js 在此基礎(chǔ)上更進(jìn)一步, 封裝了對視圖的所有操作, 包括數(shù)據(jù)的讀寫、數(shù)據(jù)變化的監(jiān)聽、DOM元素的更新等等, 通過 new Vue(options) 來創(chuàng)建出一個(gè) Vue實(shí)例, 也稱為Vue對象, 該Vue實(shí)例封裝了操作元素視圖的所有操作, 可通過 Vue實(shí)例 來輕松操作對應(yīng)區(qū)域的視圖;
-
數(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（掛在點(diǎn)）
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實(shí)例代理
- 每次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: "<h2>全局組件</h2>" }) 注冊局部組件 const deon2 = { template: "<h2>局部組件 {{n}}</h2>", //在組建中data必須使用函數(shù) data() { return { n: "小明" } } } new Vue({ components: { Deon2: deon2, Deon3:{ template:"<h2>組件3</h3>" } }, 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: "<h2>全局組件</h2>" }) const deon2 = { template: "<h2>局部組件 {{n}}</h2>", //在組建中data必須使用函數(shù) data() { return { n: "小明" } } } new Vue({ components: { Deon2: deon2, Deon3: { template: "<h2>組件3</h3>" }, Deon4 }, template: ` <div>頁面 <Deon1></Deon1> <Deon2></Deon2> <Deon3></Deon3> <Deon4><Deon4> </div> ` }).$mount('#app')
- 常用的四個(gè)生命周鉤子函數(shù)
- created: 實(shí)例出現(xiàn)在內(nèi)存中
- mounted:實(shí)例出現(xiàn)在頁面中觸發(fā)
- updated:實(shí)例出現(xiàn)了變化觸發(fā)
- destroyed:實(shí)例被銷毀了觸發(fā)
new Vue({ template:"<div>{{n}}</div>", data:{ n:0 }， created() { console.log("實(shí)例出現(xiàn)在內(nèi)存中了觸發(fā)"); }, mounted() { console.log("實(shí)例出現(xiàn)在頁面中觸發(fā)"); }, updated() { console.log("實(shí)例出現(xiàn)了變化觸發(fā)"); }, destroyed() { console.log("實(shí)例被銷毀了觸發(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')
【
