Vue介紹與入門(一篇入門)

Vue.js 是一個流行的 JavaScript 框架，專門用于構建用戶界面和單頁面應用程序。它簡單易學，但功能強大，能夠幫助開發者快速構建交互性強的 Web 應用。

本教程旨在幫助那些剛開始學習 Vue.js 的開發者快速入門，并掌握一些基礎知識。在這個教程中，我們將介紹 Vue.js 的一些重要概念，比如組件、數據綁定、指令等，幫助你了解如何使用 Vue.js 來構建應用程序。

請注意，本教程假設你已經具有一定的 JavaScript 和 HTML/CSS 基礎知識。如果你想要更好地理解本教程內容，建議在繼續學習之前先學習一些基礎知識。

作者建議:學習知識在于深度理解，多動手、多動腦，總能更快地領悟。不要僅僅停留在閱讀代碼的層面，親自動手敲打一遍，會帶來更豐富的收獲。通過實踐，我們能夠更深入地理解知識，掌握技能，并且在解決問題時更加得心應手。相信自己的能力，堅持不懈地實踐，你將會取得更大的進步和成就。讓學習成為一種習慣，讓動手實踐成為你提升的捷徑，加油！你是最棒的!

本篇博客的編輯工具:HBuilderX文檔

建議學完:HTML? Css? ?JavaScript 再來學習Vue

Vue.js是什么

Vue(讀音 /vju? /，類似于view) 是一套用于構建用戶界面的漸進式框架。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合.?Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成為前端三大主流框架！

Vue官網:Vue.js

Vue.js優點

1.體積小--->壓縮后33k

2.更高的運行效率

? ? ?用JQuery或者原生的JavaScriptDOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。

? ? 基于虛擬dom，一種可以預先通過JavaScript進行各種計算，把最終的 DOM操作計算出來并優化的技術，最后在計算完畢才真正將DOM操作提交。

3.雙向數據綁定,簡化Dom操作

? ? ? 通過MVVM思想實現數據的雙向綁定，讓開發者不用再操作dom對象, 把更多的精力投入到業務邏輯上.

? ? ? MVVM是Model-View-ViewModel的簡寫。MVVM 就是將其中的View的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開.

4.生態豐富,學習成本低

? ? ? ?市場上擁有大量成熟、穩定的基于vue.js的ui框架、常用組件！來即用實現快速開發！對初學者友好、入門容易、學習資料多.

Vue安裝

1.下載Vue.js文件并導入js文件

2.在HTML文件中引用vue.js文件

這樣一個基礎的vue項目(vue項目有進階版)就完成了

第一個Vue程序

效果演示:

代碼:?

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app">{{message}}</div><script>var app = new Vue({el:'#app',data:{message: 'Hello Vue!'}})</script></body>
</html>

語法解釋:

{{ 變量 }} ,插值表達式獲取data數據

new Vue();創建Vue對象(VM對象)

el:數據掛載的dom對象

Vue會管理el選項命中的元素及其內部的后代元素

可以使用其他的選擇器，但是建議使用ID選擇器

可以使用其他的閉合標簽，不能使用HTML和BODY

Vue中用到的數據定義在data中

data 中可以寫復雜類型的數據,如對象,數組

Vue指令

指令帶有前綴 v- 開頭，以表示它們是 Vue 提供的特殊屬性

1.v-text

作用是設置標簽的文本內容

默認寫法會替換全部內容，使用差值表達式可以替換指定內容

內部支持寫表達式

代碼演示：<div v-text="message"><p>你好</p></div>

這個v-text與{{message}}有區別，我們在下面與v-html一起討論

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><p v-text="message">你好</p><p>你好{{message}}</p></div><script>var app = new Vue({el:'#app',data:{message: 'Hello Vue!'}})</script></body>
</html>

效果演示：

2.v-html

作用是設置元素的innerHTML

內容中有html結構會被解析為標簽

內部支持寫表達式

代碼演示:<div v-html="message">你好</div>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><div v-text="message"><p>你好</p></div><div>你好{{message}}</div><div v-html="message">你好</div></div><script>var app = new Vue({el:'#app',data:{message: '<p>Hello vue</p>'}})</script></body>
</html>

效果演示:

3.{{message}}? v-text v-html區別

{{message}}:這個語法也就是將message的值插在網頁中(他不會覆蓋其他的值);

v-text v-html:會將這個標簽的內容修改或者填入message中的值

v-text:不能識別message中的標簽

v-html:可以識別message中的標簽

4.v-on

作用是為元素綁定事件(這里的事件指的是JavaScript中學習的事件,如果不知道可以跳轉:JavaScript學習)

事件名不需要寫on指令可以簡寫為@

綁定的方法定義在methods屬性中,可以傳入自定義參數

代碼演示:

?? ??? ??? ?<input type="button" value="測試1" v-on:click = "test()"/>
?? ??? ??? ?<input type="button" value="測試2" @click="test()"/>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><input type="button" value="測試1" v-on:click = "test()"/><input type="button" value="測試2" @click="test()"/></div><script>var app = new Vue({el:'#app',data:{message: '<p>Hello vue</p>'},methods:{test(){alert("你好登山者");}}})</script></body>
</html>

效果演示:

?5.v-model

作用是便捷的設置和獲取表單元素的值

綁定的數據會和表單元素值相關聯

綁定的數據表單元素的值雙向數據綁定

代碼演示:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><input type="button" value="測試1" @click = "test()"/><div>{{message}}</div></div><script>var app = new Vue({el:'#app',data:{message: ''},methods:{test(){this.message = "加油登山者";}}})</script></body>
</html>

效果演示:

6.v-show

作用是根據真假切換元素的顯示狀態

原理是修改元素的display，實現顯示隱藏

指令后面的內容，最終都會解析為布爾值

值為true元素顯示，值為false元素隱藏

數據改變之后，對應元素的顯示狀態會同步更新

代碼演示:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><img src="img/1.jpg" v-show="key" /><input type="button" value="測試1" @click="test()" /></div><script>var app = new Vue({el: '#app',data: {message: '',key: true},methods: {test() {this.key = false;}}})</script></body>
</html>

效果演示:

?7.v-if

作用是根據表達式的真假切換元素的顯示狀態

本質是通過操縱dom元素來切換

顯示狀態表達式的值為true，元素存在于dom中，為false，從dom中移除頻繁的切換v-show，反之使用v-if，前者的切換消耗小

代碼:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><img src="img/1.jpg" v-if="key" /><div v-else>隱藏</div><input type="button" value="測試1" @click="test()" /></div><script>var app = new Vue({el: '#app',data: {message: '',key: true},methods: {test() {this.key = false;}}})</script></body>
</html>

效果:

8.v-bind

作用是為元素綁定屬性

完整寫法是v-bind：屬性名

簡寫的話可以直接省略v-bind，只保留：屬性名

代碼:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><script src="js/vue.js"></script><body><div id="app"><img v-bind:src="img"/><img :src="img" :title="title"/></div><script>var app = new Vue({el: '#app',data: {img:"img/1.jpg",title:"這是一個手機"}})</script></body>
</html>

效果:

9.v-for

作用是根據數據生成列表結構

數組經常和v-for結合

使用語法是（item，index）in數據

item 和index 可以結合其他指令一起使用

數組長度的更新會同步到頁面上是響應式的

為循環綁定一個key值 :key=”值” 盡可能唯一

代碼:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><select><option>請選擇</option><option v-for="city in citys">{{city}}</option></select><table border="1"><tr><td>序號</td><td>姓名</td><td>年齡</td></tr><tr v-for="(obj,index) in objs"><td>{{index+1}}</td><td>{{obj.name}}</td><td>{{obj.age}}</td></tr></table></div><script>var app = new Vue({el:'#app',data:{citys:['上海','陜西','四川'],objs:[{name:'張三',age:19},{name:'李四',age:18}]}})</script></body>
</html>

效果: