Vue.js檔案---介紹
1. Vue.js是什么？
- 用于構建用戶界面的漸進式框架（漸進式JavaScript框架）
- 和其他大型框架的區別：自底層向上，逐層應用
- 核心庫只關注視圖層，易上手，便于和第三方庫和既有專案整合
- 為復雜單頁提供驅動（結合其他工具和支持類別庫）
Vue和其他庫/框架的區別：等檔案學完，最后來總結理解
視頻要點：
Vue.js優點：
1. 體積小：壓縮后33K
2. 更要的運行效率：基于虛擬DOM
（DOM操作屬于預處理操作，預先通過JavaScript進行計算，把最終的DOM操作計算出來并優化的技術）
3. 雙向資料系結：不用再去操作DOM物件，更多精力投入到業務邏輯上
4. 生態豐富、學習成本低：
市場上有大量成熟、穩定的基于vue.js的UI框架和常用組件（例如element UI），實作快讀開發
5. 對初學者友好，入門容易、學習資料多
Vue.js對有前端開發來說：
1. 使用場景廣泛：web端，移動端，跨平臺應用開發
2. 招聘市場需求大、前景好
2. 起步
引入Vue
1. 命令列工具CLI(官方CLI腳手架)
2. 直接用<script>引入
<!-- 引入Vue：命令列工具CLI(官方CLI腳手架), 直接用<script>引入 --> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了大小和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
console: 安裝成功
3. 宣告式渲染
Vue.js的核心是一個允許采用簡潔的模板語法來宣告式地將資料渲染進DOM系統：
文本插值
console:
系結元素attibute:
<div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒查看此處動態系結的提示資訊！ </span> </div>
Vue實體
var app2 = new Vue({
el: "#app-2",
data: {
message: '頁面加載于' + new Date().toLocaleString()
}
})
console:
v-bind:title="message"
"將這個元素節點的title attribute和Vue實體的message屬性保持一致"
如果你再次打開瀏覽器的 JavaScript 控制臺，輸入 app2.message = '新訊息'，就會再一次看到這個系結了 title attribute 的 HTML 已經進行了更新
4. 條件與回圈
<div id="app-3"> <p v-if="seen">現在你看到我了</p> </div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
console:
繼續在控制臺輸入 app3.seen = false，你會發現之前顯示的訊息消失了，
我們不僅可以把資料系結到DOM文本或attribute，還可以系結到DOM結構
v-for指令可以系結陣列的資料來渲染一個專案串列：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{todo.text}} </li> </ol> </div>
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{ text: '學習JavaScript' },
{ text: '學習Vue' },
{ text: '整個專案' }
]
}
})
console:
在控制臺里，輸入 app4.todos.push({ text: '新專案' })，你會發現串列最后添加了一個新專案，
5. 處理用戶回圈
為了讓用戶和你的應用進行互動，我們可以用 v-on 指令添加一個事件監聽器，通過它呼叫在 Vue 實體中定義的方法：
<div id="app-5"> <p>{{message}}</p> <button v-on:click="reverseMessage">反轉訊息</button> </div>
var app5 = new Vue({ el: "#app-5", data: { message: 'hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
console:
注意在 reverseMessage 方法中，我們更新了應用的狀態，但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你撰寫的代碼只需要關注邏輯層面即可，
Vue 還提供了 v-model 指令，它能輕松實作表單輸入和應用狀態之間的雙向系結，
<div id="app-6"> <p> {{message}} </p> <input v-model="message"> </div>
var app6 = new Vue({ el: '#app-6', data: { message: 'Hellow Vue!' } })
console:
6. 組件化應用架構
組件系統是Vue的另一個重要概念，允許我們使用小型、獨立和通常可復用的組件構建大型應用
在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實體，在 Vue 中注冊組件很簡單：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109923.html
標籤：JavaScript