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