2020-5-13 前端達(dá)人
文章目錄
小白學(xué)VUE——快速入門
前言：什么是VUE?
環(huán)境準(zhǔn)備：
vue的js文件
vscode
Vue入門程序
抽取代碼片段
vue標(biāo)準(zhǔn)語法：
什么是vue指令？
v-bind指令
事件單向綁定
v-model:事件雙向綁定
v-on事件監(jiān)聽指令
v: on:submit.prevent指令
v-if 判斷指令
v-for 循環(huán)渲染指令
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。 Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計。 Vue 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
環(huán)境準(zhǔn)備：
vue的js文件
使用CDN外部導(dǎo)入方法
以下推薦國外比較穩(wěn)定的兩個 CDN，把這些網(wǎng)址放進(jìn)script標(biāo)簽的src屬性下即可，國內(nèi)還沒發(fā)現(xiàn)哪一家比較好，目前還是建議下載到本地。
Staticfile CDN（國內(nèi)） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發(fā)布的的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2.VSCODE軟件
(2).使用內(nèi)部導(dǎo)入方法（自行下載js文件放進(jìn)工作區(qū)js文件夾即可）
前往vscode官網(wǎng)下載對應(yīng)版本的vscode
Vue入門程序
首先了解一下什么是插值
插值：數(shù)據(jù)綁定最常見的形式就是使用 **{{…}}（雙大括號）**的文本插值：
單獨抽出這段來看一下：
Vue即是vue內(nèi)置的對象，el(element)指的是綁定的元素，可以用#id綁定元素，data指的是定義頁面中顯示的模型數(shù)據(jù)，還有未展示的methods，指的是方法
var app = new Vue({
el: "#app",//綁定VUE作用的范圍
data: {//定義頁面中顯示的模型數(shù)據(jù)
message: 'hello vue'
}
});
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<!-- 插值表達(dá)式 獲取data里面定義的值 {{message}} -->
<div id="app">{{ message }}</div>
<script>
//創(chuàng)建一個VUE對象
var app = new Vue({
el: "#app",//綁定VUE作用的范圍
data: {//定義頁面中顯示的模型數(shù)據(jù)
message: 'hello vue'
}
});
</script>
</body>
</html>
步驟：文件-首選項-用戶片段
輸入片段名稱回車
{
"vh": {
"prefix": "vh", // 觸發(fā)的關(guān)鍵字 輸入vh按下tab鍵
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
" <script src=\"js/vue.min.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\"></div>",
" <script>",
" var vm=new Vue({",
" el:'#app',",
" data:{},",
" methods:{}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}
此時，新建一個html文件，輸入vh在按下tab鍵即可快速填充內(nèi)容
vue標(biāo)準(zhǔn)語法：
什么是vue指令？
在vue中提供了一些對于頁面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
類似于html頁面中的屬性 `
比如在angular中 以ng-xxx開頭的就叫做指令
在vue中 以v-xxx開頭的就叫做指令
指令中封裝了一些DOM行為, 結(jié)合屬性作為一個暗號, 暗號有對應(yīng)的值,根據(jù)不同的值，框架會進(jìn)行相關(guān)DOM操作的綁定
下面簡單介紹一下vue的幾個基礎(chǔ)指令： v-bind v-if v-for v-on等
v-bind指令
作用：
給元素的屬性賦值
可以給已經(jīng)存在的屬性賦值 input value
也可以給自定義屬性賦值 mydata
語法
在元素上 v-bind:屬性名="常量||變量名"
簡寫形式 :屬性名="變量名"
例：
<div v-bind:原屬性名="變量"></div> <div :屬性名="變量"></div>
事件單向綁定，可以用 v-bind:屬性名="常量||變量名，綁定事件，用插值表達(dá)式取出值
<body>
效果：
————————————————
版權(quán)聲明：本文為CSDN博主「熱愛旅行的小李同學(xué)」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_46275020/java/article/details/106055312
藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com