[Day25] Vue 3 - 认识框架

铁人赛剩最後６天，回顾前面装了这麽多工具和指令，还欠缺实际的应用，手上还有一本 Kuro大的『008天绝对看不完的 Vue.js 3』一直没有好好研读，决定在剩下的几天来学习框架，虽然都说８天学不完了，６天更是不可能，到时候就继续写下去吧。

初探 Vue.js

先提供官网连结：
Vue.js官网

• 相信许多跟我一样的前端新手在入门 Javascript的时候都会使用各种的 querySelector, getElementById 搭配 addEventListener 来操控 DOM（jQuery也是一样的操作方式），当网页的元素越来越多整个事件和 DOM 的操作就会越来越复杂，特别是选取 DOM 时超长的 .nextNode.nextSibling.......会让人看的眼花撩乱。

• Vue 的特色

  1. 宣告式渲染
     相对於『宣告式渲染』的就是『指令式渲染』，指令式渲染就如前面所说的，利用 JS 或是 jQuery 针对 DOM 监听和变更资料，内容复杂时会写许多程序码来触发 n 个事件 > 取得 n 个资料状态 > 更新到 n 个 DOM 上。
     宣告式渲染则是把资料和状态都交由 JS 的物件来管理，只要指定好网页的内容，Vue 物件会管理状态并且完成内容更新，可以参考下面 Vue３ 的基本程序码：

  <!-- HTML 部分 -->
  <div id="test"> <!-- Vue 物件的进入点d，通常在最外层，才能操控里面所有物件 -->
      <h1>{{message}}</h1> <!-- 用两个大括号来将对应资料放入textContent -->
      <input type="text" v-model="message"> <!-- 用 v-model 来绑定标签属性 -->
  </div>
  

  // JS 部分
  const vm = Vue.createApp({ // 起手式，建立一个 Vue 物件
    data() { //各种资料操作和控制的区块
      return {
        message: 'Test'
      }
    }
  }).mount('#test'); // 用指定 vue 物件挂载到 html 指定标签位置
  

  2. MVVM 架构
     MVVM 四个字母代表的是 Model、View 和 ViewModel 三个部分，分别代表的是：

     • Model - Plain JavaScript Objects
     • View - DOM
     • ViewModel - Vue (DOM Listeners, Data Bindings)

     接续上一段落介绍的宣告式渲染和上面三点，可以看到 Vue 包办了监听和资料绑定，画面 (View) 触发事件或是状态 (Model)变更了，都会由 Vue (ViewModel)来处理并且同步更新画面 (View)。

安装 Vue.js

• Vue 非常简易上手，只要使用 标签引入 CDN 就可以(cdnjs）。

• 也可以用进阶的方式来建置 Vue 环境：

  1. 透过 vite 安装 Vue 3

  $ npm init vite-app hello-vue3
  

  2. 安装 vue-cli

  $ npm install -g @vue/cli
  

  3. 建置 Vue 3 环境

  vue create hello-vue3
  

• 除此之外也可以在 VS Code 安装 Vetur 套件，撰写 Vue 的时候也能有高亮的效果。

  VSCode Vetur

• 上面用到的 Vite 是 Vue 的作者开发出的另外一套开发工具，Vite 的 dev server 速度一流，但前面几天主要还是先学习 Vue 的运用，後面有机会再尝试使用 Vite。