Vue.js 快速入门 (一) —— Vue基础
記錄自己學習Vue.js的過程，如果有什么地方寫的不好或者寫錯的，歡迎探討和指正。
Vue.js 快速入門 (二) —— Vue常用指令
Vue.js 快速入門 (三) —— Vue本地應用
Vue.js 快速入門 (四) —— Vue網絡應用
目錄
-
Vue簡介
-
第一個Vue程序
-
el：設置掛載點
-
data：數據對象?
?
簡介
Vue.js官網:? ?https://cn.vuejs.org/
Vue.js介紹以及起步:??https://cn.vuejs.org/v2/guide/
Vue.js是國人(作者：尤雨溪)開發的一個用于構建用戶界面的JavaScript漸進式框架，核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統，有如下的優點：
(感覺官網說的比我詳細多了，大家可以看看官網上面關于Vue的簡介)
學習Vue.js之前需要你對 CSS / HTML / JavaScript??等有一定的了解。
?
第一個Vue程序
本次入門采用的編輯器為VS Code，同時使用了一款名為live?server的插件，該插件可以實時的把你編寫的內容渲染到網頁上，能極大的提高效率，安裝完VS Code后可以在Extensions中搜索該插件名字進行安裝。
就拿官網的例子來入門吧。
首先打開vs?code，新建一個html文件，然后按照官網的教程，我們需要引入Vue。
官網：
可引入的Vue文件有兩個，選哪個一個呢？
個人認為這開發環境版本和生產環境版本，舉個不太恰當的例子，就是完整版本的js和min.js的區別，第一種適合學習階段的使用，因為其內置了許多有意義的提示，第二種速度較快，代碼也經過壓縮，但是幫助的提示信息則無法看到。
我們在學習的時候肯定是選擇開發環境版本會好些，故選擇引入開發環境版本。
同時在<html></html>標簽中中寫一個id為app的div，同時在<script></script>標簽中通過var關鍵字創建一個vue實例，并設置el屬性和data屬性(后面有講解)。
安裝完插件后，在代碼界面右鍵選擇Open?with?live?server打開瀏覽器，通過live server插件，我們寫完代碼后按ctrl+s進行保存，瀏覽器上面就會實時更新數據。
這樣我們就完成了我們的第一個Vue.js應用。
其中，div標簽中的{{message}}，實質上這是一個插值表達式，也是Vue的語法，作用就是將data中的數據和頁面結構關聯起來。
那么，vue是怎樣知道要去操縱某個元素的呢？
答案是：通過el屬性(作用：設置掛載點)
?
el：設置掛載點
通過css選擇器設置vue實例管理的元素，設置完畢后，el命中的元素內部使用兩個大括號( {{? ?}} )修飾的部分就會被data中同名的數據所替換。
到此，我們提出以下幾個疑問：
第一個問題?Vue實例的作用范圍？ 看代碼：
我們在id為app的div標簽外新建一個{{message}},同時在div中新建一個<H1>標簽，在標簽中設置{{message}}，運行。
可以看出，Vue只會管理el選項命中的元素及其內部的后代元素。
?
第二個問題，是否可以使用其他的選擇器？?看代碼：
我們在id為app的div標簽添加一個class屬性，名字也為app，同時修改el屬性的值，運行成功。
可以看出，可以使用其他的選擇器。(建議使用ID選擇器,因為他是唯一的)
?
第三個問題， 是否可以設置其他Dom元素？看代碼：
給body添加id屬性，名字為body，運行，結果如下。
結果不顯示，按F12，進入控制臺查看，發現
提示，不要vue掛載到body標簽和html標簽。
?
從上面的例子中，可以看出：
- el是用來設置Vue實例掛載(管理)的元素
- Vue會管理el選項命中的元素及其內部的后代元素（Vue實例的作用范圍）
- 可以使用其他的選擇器，但是建議使用ID選擇器。
- 可以使用其他的雙標簽，不能使用HTML和BODY元素。（可設置其他DOM元素，除了HTML和BODY）
?
data：數據對象?
Vue實例中需要使用的數據我們都定義在data中。
如果在data中添加數組，對象等復雜類型，需要怎么使用呢？
用法如下：
?
通過以上例子可以得到：
總結
以上是生活随笔為你收集整理的Vue.js 快速入门 (一) —— Vue基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机重装系统后黑屏,电脑重装系统后开机
- 下一篇： vue.js快速入门