Vue 即 Vue.js，它是流行的前端開發框架，目前已經發展成為優秀的前端生態，
學習 Vue 之前，需要具備：HTML, CSS, JavaScript 基礎知識，最好還擁有使用這些技術開發過網站的經驗，
如果不熟悉 JavaScript，基本上無法理解 Vue.js，所以讀者朋友，請根據自己的情況，做好學習 Vue.js 的準備作業吧，
一旦具備基礎知識后，便開始搭建環境，一邊使用一邊學習，
毫無疑問，一邊動手一邊看書，是掌握一門應用技能的最佳方法，
安裝
針對于小型專案，只需將 Vue.js 庫用于參考到專案中即可，
針對于大型專案，官方建議使用 NPM 安裝 Vue.js 以及配套的各種擴展工具，
參考
下面是官方提供的可供參考的方法：
#測驗環境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
#生產環境-指定版本
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
#原生 ES Modules 環境
<script type="module">
import Vue from https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>
安裝
NPM 是 JS/Node 的一個包管理工具，Vue 配套工具利用 NPM 安裝其他相關的 JS 包到本地專案，
下面列出從零開始的 Vue 安裝程序：
#安裝 Node 版本管理工具 [nvm](https://github.com/nvm-sh/nvm)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
#安裝最新版 Node
nvm install node
#安裝
原理
想做到把握 Vue 的本質，需要牢牢記住如下幾個要點：
虛擬DOM
虛擬 DOM 即虛擬出來的 DOM 元素，并不需要提前在 HTML 節點樹中定義，而是先充分把虛擬 DOM 想做的事情“構建”出來，再掛載到真實的 HTML 結構中，這樣便實作了所謂的前端的MVC化，
Vue 的根本原理是虛擬 DOM 技術，
根物件
不管你有沒有學習過 JS，你一定要明白，在 JS 中，一切皆物件，一個變數，一個類，一個函式，都具備物件的特征，
Vue 所謂的根實體，就是一個最基本的物件，對于 Vue 物件中定義的其他子項來說，Vue 根實體就是它們的父物件，
一般用 this 表示根實體本身，
格式 JSON 化
Vue 根實體中，主要將“資料+函陣列選項”通過JSON格式展現出來，其中，data 可以寫成物件，也可以寫成函式（Vue 組件中必須寫成函式）
var app = new vue({
el: '#app',
data:{
message: 'hello World'
},
data: function() {
return {
mess: 'hello World'
},
created: {
functionName1: function (){},
functionName2: function (){},
functionName3: function (){},
},
methonds: {
functionName1: function (){},
functionName2: function (){},
functionName3: function (){},
},
mounted: {
functionName1: function (){},
functionName2: function (){},
functionName3: function (){},
},
beforeDestory: {
functionName1: function (){},
functionName2: function (){},
functionName3: function (){},
},
filters: {
functionName1: function (){},
functionName2: function (){},
functionName3: function (){},
},
computed: {
functionName1: function (){},
functionName2: function (){},
functionName3: function (){},
},
}
)
Vue 生命周期
Vue 實體具有一個生命周期，具體參考下圖：
靈活的資料系結
Vue 實體是一起的根本，但需要必須與 HTML 的節點發生連接，才能產生作用，
這個連接程序，我們稱之為資料系結，
Vue 技術體系中，與資料系結相關的技術要素包括：
- 指令：v-model, v-on:click | dblclick | keyup | mousemove, v-bind, v-html, v-if, v-pre, 等，，
- 插值：{{ message }}, {{ message | filter }} 等，
本文由Websoft9原創發布，轉載請注明出處，創作不易，歡迎討論，感謝支持！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/228800.html
標籤：其他