之前的學習主要做用Vue的線上編輯器來做練習
接下來的發文,要切換到以W3School做為編輯器的模式
同時,學習的網站要從Vue的官網轉換到W3School
的網站了
W3School是一個具有巨量的網站科技所需學習資源,
到目前為止幾乎絕大部份的主題都有整理出來了,
不意外地,Vue的相關學習資料也在最近整理好了
除了簡單易懂的說明外,也有提供線上編輯工具,
不過,最終還要是回歸到本機端的練習
目前,在W3School的線上編輯工具是採用 Vue 的HTML模式
而且是 Options+HTML
模式
因此在練習上,會轉換成 Composition+HTML
模式
等於同時練習。
有時候經由不斷等反覆練習,直到可以很直覺地寫出Vue程式
才算是真正有學到自己身上
W3School的Vue的學習網站
https://www.w3schools.com/vue/index.php
W3School的Vue的範例
https://www.w3schools.com/vue/vue_examples.php
因為是採用 Composition+HTML
模式
需要在index.html匯入 vue.global.js
以下是基本的Vue的網頁模式
<!DOCTYPE html>
<html>
<head>
<title>My first Vue page</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
})
app.mount('#app')
</script>
</body>
</html>
以下是 Options+HTML
<!DOCTYPE html>
<html>
<head>
<title>My first Vue page</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
const app = createApp({
data() {
const message = ref('Hello vue!')
return {
message
}
}
})
app.mount('#app')
</script>
</body>
</html>
//----------------------------
突發奇想一下
是否可以同時新增2個不同的vue app
經測試是可以的
如下所示
<!DOCTYPE html>
<html>
<head>
<title>My first Vue page</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<div id="app1">{{ message1 }}</div>
<script>
const { createApp, ref } = Vue
//-------------
const app = createApp({
data() {
const message = ref('Hello vue 1!')
return {
message
}
}
})
app.mount('#app')
//-------------
const app1 = createApp({
data() {
const message1 = ref('Hello vue 2!')
return {
message1
}
}
})
app1.mount('#app1')
</script>
</body>
</html>
若沒有使用 ref()
的話
可以編寫如下
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
採用HTML的模式
可以很容易地將vue整合到現有的網頁上
適合輕量的專案
若是大型專案需要大量分工執行的話,
可以採用SFC模式
另外,想到可以嘗試與jQuery, p5.js, Bootstrap 5
整合看看
//---------
const app = Vue.createApp({
data(){
return {
msg : "ABC"
}
},
methods: {
showMsg(){
alert("OK");
}
}
});
app.mount('#app')
其中 <div id="app" v-on:click="showMsg">{{ msg }}</div>
會顯示出 {{ msg }}
但是 v-on:click="showMsg"
不會有作用,
要改寫成
<div id="app">
<div v-on:click="showMsg">
{{ msg }}
</div>
</div>
才可以
//--------
接下來的幾篇發文,會朝向釐清一些比較疑惑的想法
透過W3School的範例,進行不同的奇怪測試來確認觀念