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快速入门