Vue 3 真有意思。
用 Vue 3 做了幾個簡單的 Web 頁面了，本文 展示其 createApp 函數 的一些使用。
createApp 函數
官文：
https://cn.vuejs.org/api/application.html
|
function createApp(rootComponent: Component, rootProps?: object): App 第一個參數是根組件。第二個參數可選，它是要傳遞給根組件的 props。 |
菜鳥教程（感謝！強烈推薦！）
Vue3 教程
https://www.runoob.com/vue3/vue3-tutorial.html
下面使用 Vue 3（下載的 vue_3.2.36_vue.global.min.js）開發的一個頁面，展示了 createApp 函數 的 rootComponent 參數 下自己用過的 元素：
data() 函數、mounted() 函數、methods 屬性、watch 屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試Vue-0719</title>
<script src="js/vue_3.2.36_vue.global.min.js"></script>
</head>
<body>
<div id="root">
<label>{{ formData.selected }}</label><br>
<label>{{ p1 }}</label><br>
<label>{{ arr }}</label><br>
<p>v-for 指令（1）</p>
<div v-for="item in arr">{{ item }}</div>
<p>v-for 指令（2）</p>
<select v-model="formData.selected">
<option v-for="(item,index) in arr" :value="index">
{{ item }}
</option>
</select>
</div>
<script>
const root = {
data() {
return {
formData: {
selected: '0'
},
p1: '123',
arr: ['a', 'b'],
};
},
mounted() {
console.log("in mounted()...");
this.funcA();
this.funcB('input param1');
},
methods: {
funcA() {
console.log("in funcA...");
},
funcB(param1) {
console.log("in funcB...param1=" + param1);
},
},
watch: {
// 多級使用 單引號包裹
'formData.selected': function(nv, ov) {
// 處理
console.log("nv=" + nv + ", ov=" + ov + ", this.formData.selected=" + this.formData.selected);
},
// nv 新值，ov 舊值
p1: function(nv, ov) {
// 處理
},
}
}
const app = Vue.createApp(root);
app.mount("#root");
</script>
</body>
</html>
測試結果：
vue_3.2.36_vue.global.min.js 下載地址：
https://unpkg.com/browse/[email protected]/dist/
注意，奇怪，沒有 *.min.js 了，大家可以下載 vue.global.prod.js。
--
---END---
本文鏈接：
https://www.cnblogs.com/luo630/p/17566926.html
感謝 菜鳥教程！
ben發佈於博客園