[鼠年全马] W18 - Vue心得笔记 - 起步篇

必须老实说, 写这篇时, 我已经把六角「Vue出一个电商网站」课程上完并实作作品出来了
BUT!!! 虽然已经做完, 但绝大部分都是跟着课程影片照本宣科
回头来看基础篇, 还是有一堆不会或是忘记或是完全没印象的观念
俗话说, 熟能生巧
于是乎我又把整个课程基础篇搭配官方文件再完整的複习了一遍, 也加强了自己不足的部分
而我也给自己订了一个年度目标, 在做完这些笔记心得后, 要来实作自己的作品
希望能实现我的目标xD

#Vue是什么?

万用起手式来了
虽然可能绝大部分的人都已经知道
不过我还是来充个版面

Vue (读音/vjuː/，类似于view )是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为複杂的单页应用提供驱动。 --取自Vue官网

((真的是超级大偷懒欸!!!

简而言之 Vue就是一个网页前端框架, 非常重视 View 的部分, 也就是使用者所看到的, 浏览器所呈现的部分

##为什么使用Vue

这边我只讲我个人观点, 我是先接触三大框架之一的 React, 所以有办法比较
而不得不说, 比起 React, Vue 对新手来说真的是友善许多
比较好理解, 使用上不複杂
重点是!!!官方文件有中文版 哈哈哈
(更新:React现在也有中文翻译了~)
对于英文能力差的我来说真是一大福音~

其它详细的三大框架比较, 网路上也有许多文章已经分享过了~
这边就不细讲直接进主题~

#开发环境

使用框架开发前, 都必须先建置好适合开发的环境
而 Vue 在环境建置上就真的是非常的友善简单
可以看到官方文件提到, 只需要引用一段 script 即可

<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

开发环境就是开发时使用的, 他会帮忙跳出所发生的错误讯息, 协助开发者釐清问题
生产环境就是开发完之后要发布时使用的, 错误讯息那些就不会跳出给使用者看到
两种环境版本使用上都是相同的, 差在错误提示讯息

当在一个 html 文件上引用之后, 就可以开始来使用 Vue 了

补充一点, 有看过我前面几篇文的人应该有印象, 我有提到公司网管会挡CDN引用的部分
如果说网管会挡就没办法, 必须只能把文件下载回来从本机端引用啰!!

#建立一个Vue应用

建立Vue应用的部分, 可以参考官方文件说明
首先 html 要準备一个命名为 'app' 的 div

<div id="app"></div>

接着 script 部分, 就可以来建立一个 Vue应用

var app = new Vue({  el: '#app'})

其中 el 对应到的就是刚才建立的命名为 'app' 的 div

但因为现在甚么资料都没有, 画面会是一片空白的
我们可以来帮这个应用加上资料
加资料的方式一样是写在Vue应用内, 在里面加上一个 data, 并在 data 内加上 message, 最后会长这样:

var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

加好之后, 就可以在 div 上使用这些资料, 直接使用的方式是把资料包两层花括弧{{资料}}

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

最后就可以看到这资料已经渲染在画面上了~

这时如果我们把 message 改变一下

var app = new Vue({  el: '#app',  data: {    message: 'Hello 我是来乱的!'  }})

可以看到画面会渲染成这样

如此就完成了建立Vue应用的基本範例

今天只能到这, 希望可以讲解的巨细靡遗, 也希望下次回顾时不要再有观念遗忘 哈哈哈哈