Vue 基礎應用

在我們使用 vue 之前我們需要事先得到乙個 vue 例項物件，我們需要傳遞乙個物件用於描述你的 vue 例項。

new

vue();

dom 相關

給已有的物件資料新增新的屬性

data:,}
,// 下面兩種方式都能監聽資料變化
vue.
set'gender'
,'男');
// 例項.$set 是 vue.set 的別名
'gender'
,'男'
);

new

vue(}"

, data:

,// 當然如果是後面再去新增 watch，還需要手動刪除監聽

/* uw() // 只需要執行一遍返回的函式，就不再監聽 title 的變化

*/watch:,}

,});

console.

log;

// data 的部分

console.

log;

// 掛載節點

console.

log;

// 傳入vue的整個物件【包含預設屬性】在這裡面對 data 重新賦值是無效

render

=(h)

,"test");

};console.

log;

// true

// 自定義事件監聽

$on(

"someeventname",(

...args)

=>);

/*// 只監聽一次

// do something

});*/

// 在適當的時候觸發事件【常用於父子元件通訊】

$emit

("someeventname",1

,2);

// 如果在 data 中沒有定義屬性，那麼在後面新增屬性的時候並不會監聽變化

data:

}123

;// 可以採取強制元件渲染的方式【會降低效能】

$forceupdate()

;/*// 當然更好的方式是

*//*這裡直接引入官網的示例*/

methods:)}

}

// 先執行了 init 【 new vue 之後會自動呼叫 】先去執行了 beforecreate
beforecreate()
// 然後在 init 的注入和 reactive 時會呼叫 created
created()
beforemount()
// render function 會在這之間執行
render()
// render 出錯的時候，但是只捕獲本元件的錯誤，子元件中的錯誤不會**獲
rendererror()
mounted()
beforeupdate()
updated()
/*// 一般在 keep-alive 元件的活躍狀態和非活躍狀態時觸發
*/activated()
deactivated()
/*// 一般在需要銷毀乙個元件例項的時候使用
*/beforedestroy()
destroyed()
// 會向上冒泡，捕獲錯誤，也可以用於正式環境
errorcaptured()

new
vue(}}
}  `
,  data:
,  methods:,}
,});

computed 是經過快取處理的，針對於計算量比較大的操作而言比較合適

computed:
}// or
computed:
// 當然這是不推薦的方式【computed中最好只用於處理資料之後返回，而不要在這裡進行資料的變更】
set(newval)
}}

主要的運用場景是，監聽到某個資料的變化，然後執行某個指定的操作（比如 ajax 等）

watch:,} ,// 當然上面的 watch 只是一種簡寫形式，其實它的內部也會編譯成為下面中形式 watch: ,// 是否立即執行 handler ，如果沒有此項就表明需要等待 input 資料項變化的時候才執行 immediate: true,} },// 監聽物件屬性的變化 watch: ,// 當然這個配置的開銷會比較大，畢竟要去監聽物件中每一層每乙個屬性的變化 deep: true ,// 是否深度監聽}} ,// 如果只想監聽物件中某乙個屬性的變化 watch:,}

},

new vue( } template: ` `,// data: , // 這樣只有a 和 c 會被選中，:value 和 value 的區別是後者是單純的字串，前者會解析數值。 template:` abc單選：de `*///修飾符 /* 只有在失去焦點時才會觸發 onchange *//* 只會資料繫結的內容只會執行一次，再有資料變化不會更新檢視 } */})

;

new

vue(

}*/},

str: string,

other:,}

,}, template:``,

},},

data:

,mounted()

, template:

` 00

1`,})

.$mount

(root)

;

const com1 =
,  template:"",
data()
,};const com2 =;}
,  methods:,}
;new
vue(
,  templates:``,
});

const com1 =;}
,};new
vue(
,  components:
,  template:`  
}-}  `
,});

const com1 =;}
,};new
vue(
,  components:
,// template: `
// //   
//     hello
//   
// `,// 上面的 template 會走下面的流程
// 而這裡的 createelement 其實就是在建立虛擬 dom，儲存在記憶體中，
// 會跟真正的 dom 結構進行對比，如果對比的結果是需要更新原來的dom結構，
// 就會將 虛擬 dom 轉換成為真正的 dom
render
(createelement),[
createelement
("p",,
"hello"),
]);}
,});

Vue 基礎應用

vue基礎簡介以及本地應用 one

Vue基礎應用實現計數器

Vue單頁面應用手動搭建基礎

Vue 基礎應用

vue基礎簡介以及本地應用 one

Vue基礎應用 實現計數器

Vue單頁面應用手動搭建基礎

相關推薦

Vue基礎應用實現計數器