iT邦幫忙

2023 iThome 鐵人賽

DAY 20
0
Vue.js

業主說給你30天學會Vue系列 第 20

V20_Vue in W3School

  • 分享至 

  • xImage
  •  

V20_Vue in W3School

之前的學習主要做用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>

https://ithelp.ithome.com.tw/upload/images/20231005/20152098lSmceop1k5.png

//----------------------------
突發奇想一下
是否可以同時新增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的範例,進行不同的奇怪測試來確認觀念


上一篇
V19_從Vue的範例做中學(3)_CRUD
下一篇
V21_直覺式理解_Vue_Directives(1)_v-bind
系列文
業主說給你30天學會Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言