iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
Vue.js

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

V03_直接在網頁上使用Vue

  • 分享至 

  • xImage
  •  

V03_直接在網頁上使用Vue

今天要來探索直接在網頁上使用Vue的方法
首先同樣參考Vue官網上 Quick Start 上的說明
https://vuejs.org/guide/quick-start.html

稱之為 Using Vue from CDN
在網頁中加上以下script,就可以載入Vue的套件

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

這裡有提到CDN 就是 Content Delivery Network的縮寫,也就是「內容傳遞網路」
也就是提供js套件的傳遞網路,目前常用的有 unpkg, jsdelivr, cdnjs
像是上面的vue.js的套件就是從unpkg CDN載入的

以下列出這3個CDN的網址

unpkg

https://unpkg.com/
在unpkg的官網上,寫到
unpkg is a fast, global content delivery network for everything on npm.
這又出現npm, 可以想見很多透過npm下載的js套件,其CDN就在unpkg

這個是下載套件的 網址格式

 unpkg.com/:package@:version/:file
 unpkg.com/vue@3/dist/vue.global.js

jsdelivr

https://www.jsdelivr.com/
這是jsdelivr官網的介紹
A free CDN for open source projects
Optimized for JS and ESM delivery from npm and GitHub.

以下是透過 jsdelivr 載入的vue.js套件

<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>

cdnjs

https://cdnjs.com/
這是cdnjs官網的介紹
cdnjs is a free and open-source CDN service

以下是透過 cdnjs 載入的vue.js套件

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js"></script>

//------------------------

透過在網頁上載入vue.js套件,就可以當作是一般網頁直接在瀏覽器中開啟,而不用經過build的過程
以下示範語法格式

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

const { createApp, ref } = Vue 是指從vue.js套件中
提取 createApp, ref 的功能函式來使用

程式的進入點,從 createApp 的 setup() 開始
接著
const message = ref('Hello vue!')
是指透過 ref() 讓變數 message 與 網頁中 的 {{ message }} 連動起來

ref('Hello vue!') 是指初始值是 'Hello vue!' 其設定給message, 然後再反應給{{ message }}
如此只要在程式中 message 的數值被改變了,就會即時反應在 網頁<div>上了

以下還有另外不同的寫法
這是使用ES Module語法的寫法

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

ES Module 就是將js程式碼模組化的概念,像是
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
是指 從vue.esm-browser.js套件或模組,引入 createApp, ref 的功能

模組化是很重要的概念,將程式碼打包成模組後,可以匯出及匯入
這部份會再另一篇中來研究

以下是使用CDN的完整的 HTML 的程式碼
index_vue_cdn.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Using Vue from CDN</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>

    <script>
      const { createApp, ref } = Vue
    
      createApp({
        setup() {
          const message = ref('Hello vue!')
          return {
            message
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>

以下是使用 ES Module 的完整的 HTML 的程式碼
index_vue_es.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using the ES Module Build</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script type="module">
      import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

      createApp({
        setup() {
          const message = ref('Hello Vue!')
          return {
            message
          }
        }
      }).mount('#app')
    </script>

  </body>
</html>

另一種寫法
index_vue_es.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using the ES Module Build</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>

    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>

    <script type="module">
      import { createApp, ref } from 'vue'

      createApp({
        setup() {
          const message = ref('Hello Vue!')
          return {
            message
          }
        }
      }).mount('#app')
    </script>

  </body>
</html>

另一種分離成ES元件的寫法

index_vue_es1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splitting Up the Modules</title>
  </head>
  <body>
    <div id="app"></div>

    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>

    <script type="module">

      import { createApp } from 'vue'
      import MyComponent from './index_vue_es1.js'

      createApp(MyComponent).mount('#app')
    </script>
  </body>
</html>

index_vue_es1.js

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is {{ count }}</div>`
}

整理一下
CDN
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

ES Module -> Type1

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

ES Module -> Type2

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

上一篇
V02_最小規模的Vue的開發流程
下一篇
V04_在Vue之前_必備的JS基礎(1)_模組 module 的操作
系列文
業主說給你30天學會Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言