Hello, Vue

安装

Vue.js 可以各种不同方式整合进专案中，~~可以像Library一样，随装随用~~

主要有四种安装方式:

1. CDN

页面中加入script

ex:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

建议要指定特定版本，避免有些功能或是语法不支援

2. 下载 js 档案

自行 Host js 档案，一样使用script在页面中引入

3. npm

使用 npm 套件管理工具，安装指定版本的 Vue

ex:

$ npm install vue@next

Vue Package 版本一览表
套件名称+@<tag> 或 套件名称+@<version>

4. CLI

使用 Vue CLI 最新版本，执行 yarn global add @vue/cli 或是 npm install -g @vue/cli
安装完成後，进到专案资料夹中执行 vue create project-name

Vue.js Command-Line Interface，由 Vue.js 团队开发，透过 CLI 建置的专案，会帮你把常用的档案和资料夹都备好好。
输入 vue create <专案名称> 後，会询问专案相关的设定

ex:

$ vue create hello-vue

// 选择 Vue 版本及搭配套件 或是 要手动安装
$ Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select feature

若是选择手动会再跳出常用的安装选项
ex: Router、Vuex、CSS预处理器、单元测试 ...等

选择预设 Vue 2 後，生成的专案结构如下:
专案结构参考

每个语言都从这里开始- Hello

每个 Vue 的应用程序都需要从建立一个实体物件 (application instance) 开始！可使用 createApp() 或是 new Vue()。

ex:

const app = Vue.createApp({
  /* options */
})

这个建立的实体物件会被注册在全域中，所有的 component 都可以使用它！

透过createApp() 或是 new Vue()，得到实体物件，须把这个物件绑定在 DOM 节点上，透过这样的绑定来控制或是取得网页上的内容！

传入 createApp() 的 options 物件会定义各种与 UI画面有关的状态、事件或方法。

使用 CDN 方式范例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@next"></script>
  <title>Hello, Vue</title>
</head>
<body>
  <div id="app">{{title}}</div>
  <script>
    const vm = Vue.createApp({
      data () {
        return {
          title: 'Hello, Vue'
        }
      }
    });

    // 建立连结 (DOM内容载入才能绑定)
    vm.mount('#app');
  </script>
</body>
</html>

这里用到的 data 属性用来定义状态，并且记得需使用 function 方式！而 Vue 使用的模板语法是透过{{}}，来将内容渲染在画面中。