从零开始学WEB前端——VUE介绍
📓項目介紹
先做個自我介紹，本人是一個沒人寫前端所以就自學前端的后端程序員🙇。在此項目中我會和大家一起從零基礎開始學習前端，從后端程序員的視角來看前端，受限于作者的水平本項目暫時只會更新到前端框架VUE，不會涉及node.js。該項目適合零基礎的小白或者和我一樣開發網站沒人寫前端所以自學前端的后端程序員😂。
該項目的學習順序是按照我自己學習時總結出來的，其中的每個知識點都是我認真去理解的，同時也查了很多的資料，所有的參考資料我都放在了文章末尾。尊重開源，尊重知識產權。每一個案例我都親手寫過并覺得不錯才放上去的。每次的代碼和筆記我都放在了開源倉庫里，有需要的同學請不要吝嗇給我一個star。如果覺得本文寫的不錯的話記得點贊+關注，你們的支持是我堅持下去的動力😃。
秋風清，秋月明，
落葉聚還散，寒鴉棲復驚。
相思相見知何日？此時此夜難為情！
入我相思門，知我相思苦，
長相思兮長相憶，短相思兮無窮極，
早知如此絆人心，何如當初莫相識。
——李白《三五七言》
語雀地址：https://www.yuque.com/beilayanmen
Github地址：https://github.com/SuZui-cn/my-web
Gitee地址：https://gitee.com/north_gate/my-web
個人博客地址：https://foollyone.cn/
?本文知識點
- 什么是VUE
- VUE的特點
- 我們的第一個VUE程序
- 什么是MVVM
從本節開始我們就要介紹前端框架VUE，并且需要逐漸的適應前端工程化的開發。VUE作為國人開發的框架，本人是非常喜歡的，但是由于本人的水平一般，所以很多地方講的不好而且內容較少。如果要深入前端學習的同學建議多花點時間在JavaScript上面，有了良好的JavaScript基礎，再來學習前端框架會非常的輕松。
什么是VUE
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
——VUE官方文檔
VUE由國人尤雨溪所開發。
尤雨溪是一位美籍華人，在上海復旦大學附中讀完高中后，在美國完成大學學業，本科畢業于 Colgate University，后在 Parsons 設計學院獲得 Design & Technology 藝術碩士學位。他是 Vue Technology LLC 創始人，曾經在 Google Creative Lab 就職，參與過多個項目的界面原型研發，后加入 Meteor，參與 Meteor 框架本身的維護和 Meteor Galaxy 平臺的交互設計與前端開發。
2014 年 2 月，尤雨溪開源了一個前端開發庫 Vue.js。Vue.js 是構建 Web 界面的 JavaScript 庫，也是一個通過簡潔的 API 提供高效數據綁定和靈活組件的系統。
2016 年 9 月 3 日，在南京的 JSConf 上，尤雨溪正式宣布以技術顧問的身份加盟阿里巴巴 Weex 團隊，來做 Vue 和 Weex 的 JavaScript runtime 整合，目標是讓大家能用 Vue 的語法跨三端。
目前，尤雨溪全職投入 Vue.js 的開發與維護，立志將 Vue.js 打造成與 Angular/React 平起平坐的世界頂級框架。
VUE的特點
以下取自C語言中文網：http://c.biancheng.net/view/6714.html
-
輕量級的框架——Vue.js 能夠自動追蹤依賴的模板表達式和計算屬性，提供 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API，使讀者更加容易理解，能夠更快上手。
-
雙向數據綁定——聲明式渲染是數據雙向綁定的主要體現，同樣也是 Vue.js 的核心，它允許采用簡潔的模板語法將數據聲明式渲染整合進 DOM。
-
指令——Vue.js 與頁面進行交互，主要就是通過內置指令來完成的，指令的作用是當其表達式的值改變時相應地將某些行為應用到 DOM 上。
-
組件化——組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在 Vue 中，父子組件通過 props 傳遞通信，從父向子單向傳遞。子組件與父組件通信，通過觸發事件通知父組件改變數據。這樣就形成了一個基本的父子通信模式。在開發中組件和 HTML、JavaScript 等有非常緊密的關系時，可以根據實際的需要自定義組件，使開發變得更加便利，可大量減少代碼編寫量。組件還支持熱重載（hotreload）。當我們做了修改時，不會刷新頁面，只是對組件本身進行立刻重載，不會影響整個應用當前的狀態。CSS 也支持熱重載。
-
客戶端路由——Vue-router 是 Vue.js 官方的路由插件，與 Vue.js 深度集成，用于構建單頁面應用。Vue 單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來，傳統的頁面是通過超鏈接實現頁面的切換和跳轉的。
-
狀態管理——狀態管理實際就是一個單向的數據流，State 驅動 View 的渲染，而用戶對 View 進行操作產生 Action，使 State 產生變化，從而使 View 重新渲染，形成一個單獨的組件。
我們的第一個VUE程序
我們先打開VUE的官網
地址：https://cn.vuejs.org/
之后點擊“起步”
在這個位置，我們將CDN復制下來。
之后我們創建一個.html結尾的文件并寫入下面的內容。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><body><!-- 這里的{{}}是插值表達式，用于將data里的數據渲染到頁面上 --><!-- VUE2需要一個根節點，以這個根節點為基礎來編寫代碼 --><div id="app">{{msg}}</div><script>// 這里實例化了一個Vue對象，注意V是大寫的。new Vue({// 掛載剛剛到根節點。el: '#app',// data對象用于存放數據。data: {msg: '帥者的肯定',},});</script></body> </html>什么是MVVM
- Model是代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。
- View是代表UI組件，它負責將數據模型轉化成UI展現出來。
- ViewModel是一個同步View和Model的對象。
代碼演示如下：
總結
以上是生活随笔為你收集整理的从零开始学WEB前端——VUE介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： T-SQL 字符串前加 N 是什么意思
- 下一篇： Python __slots__ 作用