Vue學習筆記--基礎語法(1)
最近在學習Vue2.x框架，把本身的學習筆記整理一下，方便本身的回顧和總結，本人也是初學，其中不免出現本身理解的錯誤和思考不周全的，但願你們可以多多指教。鑑於Vue不一樣版本之間存在差別，本人的筆記是以Vue2.x來學習的，後續會在2.x版本的基礎上對比最新版本Vue的特性來增長新的文章來講明。html
Vue使用步驟
- 引入 vue.js 文件
- 指定用於填充數據的標籤
- 在script標籤裏建立Vue對象
<!--1. 導入Vue的包-->
<script src="js/vue.js"></script>
<body>
<!--2. div#app 就是 Vue實例綁定的html元素，在這裏能夠顯示Vue對象的data屬性中的配置的數據-->
<!--該區域就是MVVM模型中那個的V層-->
<div id="app">
{{msg}}
</div>
<script>
//3. 建立一個Vue實例
// Vue實例就是MVVM模型中的vm層，也就是將M中的數據渲染到V的調度者
var vm = new Vue({
// el表示的是當前實例化的Vue對象要控制的元素的id值
el: '#app',
// data就是MVVM模型中的m層， data的數據就是要渲染到#app元素中
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
說明
- 經過Vue提供的指令，能夠很方便的吧元素渲染到頁面上，不一樣手動操做DOM元素了，Vue等框架的目的就是提倡開發人員不在手動操做DOM，簡化代碼編寫的複雜程度
- {{msg}} 是Vue提供的插值表達式，用來向html頁面傳遞變量 Mustache
Vue模板語法
1. 插值表達式:
{{msg}} 是Vue提供的，用來向html頁面傳遞變量vue
2. 指令：
以v-開始: 指令自己是html元素的自定義屬性
html5
v-cloak指令:
插值表達式存在‘閃動’問題，解決原理：先隱藏，替換好值之後再顯示最終值
bootstrap
<style>
[v-cloak] {
display: none;
}
</style>
<p v-cloak>{{msg}}</p>
其餘代碼與'Vue使用步驟'處代碼一致
v-text指令: 文本填充指令
與Mustache插值表達式做用同樣用來向html元素傳遞Vue對象數據的，不存在‘閃動’問題
segmentfault
<script src="js/vue.js"></script>
<body>
<div id="app">
這是Mustache表達式輸出的內容：{{msg}} <br>
這是v-text指令輸出的內容：<span v-text="msg"></span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-text指令示例'
}
});
</script>
</body>
v-html指令: 填充html片斷指令
用來向指定的html元素內部填html片斷內容
存在安全問題， 容易受到XSS攻擊
原則上網站內的數據能夠經過v-html指令添加，第三方的數據不能夠經過v-html指令添加
數組
<script src="js/vue.js"></script>
<body>
<div id="app">
這是Mustache表達式輸出的結果: {{msg}} <br>
這是v-text指令輸出的結果：<span v-text="msg"></span> <br>
這是v-html指令輸出的結果：<span v-html="msg"></span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '<h1>這是一個html元素 h1 格式的標題</h1>'
}
});
</script>
</body>
v-pre指令
跳過Vue的編譯，顯示Vue模板原始內容
安全
<script src="js/vue.js"></script>
<body>
<div id="app">
{{msg}}
<div v-pre>{{msg}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Vue的v-pre指令的處理',
msg1: '<h1>aaa</h1>'
}
});
</script>
</body>
v-once指令
應用的場景，是對應的數據，在後續不須要修改，可使用v-once指令，這樣能夠提升性能。
app
<script src="js/vue.js"></script>
<body>
<div id="app">
<span></span>普通的mustache表達是，能夠在console中修改變量值，而且會在頁面顯示修改後的值：{{msg}}</span>
<div v-once>使用v-once指令的表達式，在console中修改該變量的值，但頁面的顯示內容沒有變化：{{msg}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!'
}
});
</script>
</body>
3. 數據響應式
- 與html5中的響應式相似，如bootstrap樣式框架，會根據不一樣屏幕尺寸動態調整樣式變化
- 數據響應式，則是若是經過 Mustache 表達式使用到了Vue對象中的一個變量，若是該變量的值被修改，把麼在網頁中顯示的內容也會作出相應的變化
4. 數據綁定
經過 Mustache 表達式或是經過 v-text 等指令把Vue對象中的數據顯示的網頁中，就是數據綁定框架
5. 雙向數據綁定指令
經過v-model指令來實現數據的雙向綁定，雙向是指：dom
- 表單組件到Vue對象中的數據字段的關聯；
- Vue對象關聯的Mustache插值的關聯
使用方式
<script src="js/vue.js"></script>
<body>
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model="msg">
</div>
</div>
<script>
var vue = new Vue({
el: '#app',
data: {
msg: 'hello Vue!'
},
methods: {
}
});
</script>
</body>
6. MVVM設計思想
M: Model V: View VM: View-Model 
7. 事件綁定指令
7-1. v-on指令，實現事件的綁定，簡寫形式：'@'
7-2. vue中的函數是定義在methods屬性中：
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle() {
this.num ++;
}
}
});
7-3. Vue中函數的調用：
-
直接經過函數名稱調用
<button @click="handle">點擊2</button>
-
經過函數調用的方式: 能夠傳遞參數
<button @click="handle()">點擊3</button>
Vue中函數調用的不一樣形式：
<body>
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click="num++">點擊</button>
<button @click="num++">點擊1</button>
<button @click="handle">點擊2</button>
<button @click="handle()">點擊3</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle() {
this.num ++;
}
}
});
</script>
</body>
7-4. Vue中函數的參數傳遞
- 若是v-on指令，綁定的是函數的名稱，那麼這種方式默認傳遞事件對象做爲函數的第一個參數，事件參數名稱固定爲：$event
- 若是v-on指令，綁定的函數調用的形式，那麼事件對象必須是函數參數列表中的最後一個，且參數名稱固定爲：$event
<body>
<div id="app">
<div>
<button @click="handle1('123', '456')">Btn1</button>
<button @click="handle2">Btn2</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
handle1(p1, p2, $event) {
console.log(p1, p2, event);
},
handle2($event) {
console.log(event);
}
},
});
</script>
</body>
7-5. Vue事件修飾符
- .stop 中止冒泡
- .prevent 阻止默認行爲
- 更多vue事件修飾符參考官方文檔
<body>
<div id="app">
<div @click="handle0">
<div>阻止冒泡 {{num}}</div>
<button @click="handle1">正常冒泡</button>
<button @click="handle2">傳統阻止冒泡</button>
<button @click.stop="handle3">Vue阻止冒泡</button>
</div>
<a href="http://www.baidu.com">a標籤默認行爲</a>
<a href="http://www.baidu.com" @click="preventHandle">a標籤傳統方式默認行爲</a>
<a href="http://www.baidu.com" @click.prevent="vuePrevent">a標籤Vue方式阻止默認行爲</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
num: 0
},
methods: {
handle0(){
this.num++;
},
handle1() {
console.log("nothing to do, 冒泡觸發，num+1");
},
handle2(event) {
console.log("傳統方式阻止冒泡");
event.stopPropagation();
},
handle3() {
console.log("使用vue提供的.stop修飾符阻止冒泡");
},
preventHandle(event) {
console.log("使用傳統方式阻止默認行爲");
event.preventDefault();
},
vuePrevent() {
console.log("vue使用.prevent修飾符來阻止默認行爲");
}
},
});
</script>
</body>
7-6. 按鍵修飾符
- .enter 回車按鍵修飾符
- .delete 刪除按鍵修飾符
- 更多按鍵修飾符參考官方文檔
<body>
<div id="app">
<form action="">
<div>
<input type="text" name="username" id="" v-model="username" v-on:keyup.delete="clearHandler">
</div>
<div>
<input type="text" name="password" id="" v-model="password" v-on:keyup.enter="submitHandler">
</div>
<div>
<input type="button" value="Submit" @click="submitHandler">
</div>
</form>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
clearHandler() {
this.username = "";
},
submitHandler() {
console.log("username=%s, password=%s", this.username, this.password);
}
},
});
</script>
</body>
7-7. 自定義按鍵修飾符
- 每一個按鍵都是能夠經過event對象的keyCode屬性來獲取到的，每一個按鍵都有一個惟一的keyCode值
- 因爲經過數字來綁定相關的事件函數不能有效地表示其業務邏輯，因此Vue提供了自定義按鍵修飾符，來定義相關按鍵的名稱
<body>
<div id="app">
<div>
針對全部按鍵的事件：<input type="text" @keyup="keyHandler" name="" id="">
</div>
<div>
經過keyCode來綁定指定按鍵的事件(只對按鍵a有效)：<input type="text" @keyup.65="keyHandler">
</div>
<div>
經過自定義按鍵修飾符來幫頂按鍵事件(只對a有效)：<input type="text" @keyup.akey="keyHandler">
</div>
</div>
<script>
// 對a按鍵定義事件別名
Vue.config.keyCodes.akey = 65;
var vm = new Vue({
el: '#app',
data: {
},
methods: {
keyHandler(event) {
console.log(event.keyCode);
}
}
});
</script>
</body>
8.事件處理相關案例
8-1. 經過 v-model 指令實現數據的雙向綁定
8-2. 給計算按鈕綁定事件函數，實現計算邏輯
8-3. 經過 v-text 指令將結果在指定位置顯示
<div id="app">
<h1>簡單加法計算器</h1>
<div>
<span>數值A:</span>
<span><input type="text" v-model="a"></span>
</div>
<div>
<span>數值B:</span>
<span><input type="text" v-model="b"></span>
</div>
<div>
<span><input type="button" value="計算" @click="calculate"></span>
</div>
<div>
<span>計算結果</span>
<span v-text="result"></span>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
calculate() {
this.result = parseFloat(this.a) + parseFloat(this.b);
}
},
});
</script>
</body>
9. 屬性綁定
9-1. v-bind指令
經過 v-bind 指令來實現對html元素屬性值的綁定，從而實現數據動態改變的目的。v-bind 指令的簡寫形式是 「:」
9-2. v-bind指令簡單應用
經過 v-bind 指令和 v-on 指令實現 v-model指令
<input type="text" :value="msg" @input="handleInput">
// 事件處理函數
handleInput(event) {
this.msg = event.target.value;
}
簡寫形式
<input type="text" :value="msg" @input="msg=$event.target.value">
經過上述代碼咱們會發現v-model指令的底層實現原理
9-3. v-text v-model v-bind之間的區別
- v-text 是將vue對象中的變量值放入到html標籤元素的content部分，主要是用於數據的顯示
- v-bind 是將vue對象中的變量值放入到html元素標籤的屬性部分，主要是用來定義標籤的元素屬性的，而不是直觀的數據顯示
-
v-model 則是實現雙向數據綁定的，是基於 v-bind 指令和 v-on 指令實現的
<body> <div id="app"> <div> 超連接的地址：{{url}} </div> <div v-text="url"></div> <div> <a v-bind:href="url">連接1</a> <input type="button" @click="changeHref" value="切換地址"> </div> <h1> 經過 v-bind 指令和 v-on 指令實現 v-model 指令的雙向數據綁定功能 </h1> <div>變量msg內容是：{{msg}}</div> v-on 和 v-bind：<input type="text" :value="msg" @input="handleInput"> <br> 簡寫形式：<input type="text" :value="msg" @input="msg=$event.target.value"> <br> v-model形式： <input type="text" v-model="msg"> <br> </div> <script> var vm = new Vue({ el: '#app', data: { url: 'http://www.baidu.com', msg: 'Hello Vue!!!' }, methods: { changeHref() { this.url = "http://www.google.com" }, handleInput(event) { this.msg = event.target.value; } } }); </script> </body>
10. 樣式綁定
10-1. 經過class實現樣式綁定
控制樣式變化：
首先，要定義一個樣式名稱；
而後，經過v-bind指令將html元素的class屬性與樣式進行綁定；
定義一個事件函數來實現html元素的動態切換
/*1. 定義樣式規則*/
.active {
border: 1px solid red;
height: 100px;
width: 100px;
}
.error {
background-color: orange;
}
<!--2-1. 經過Vue規定的方式實現樣式綁定 對象形式-->
<div :class="{active:isActive, error: isError}">
測試v-bind指令+class屬性實現樣式綁定 對象形式
</div>
<div>
<!-- 5-1. 將動態切換樣式的事件方法綁定到html元-->素
對象形式：<button @click="switchClass">切換樣式</button>
</div>
<!--2-2. 經過Vue規定的方式實現樣式綁定 數組形式-->
<div v-bind:class="[activeClass, errorClass]">
測試v-bind指令+class屬性實現樣式綁定 數組形式
</div>
<div>
<!--5-1. 將動態切換樣式的事件方法綁定到html元素-->
數組形式：<button @click="switchClassArray">切換樣式</button>
</div>
var vm = new Vue({
el: '#app',
data: {
// 3-1. 定義 對象形式 對應樣式變量名
isActive: true,
isError: true,
// 3-2. 定義 數組形式 對應樣式變量名
activeClass: 'active',
errorClass: 'error'
},
methods: {
// 4-1. 定義動態切換樣式的事件方法
switchClass() {
this.isActive = !this.isActive;
},
// 4-2. 定義動態切換數組 數組形式 樣式的名稱
switchClassArray() {
this.activeClass = '';
this.errorClass = '';
}
},
});
經過v-bind指令 + class屬性實現樣式綁定的細節：
- 對象形式 和 數組形式 結合使用；
- class 綁定值的簡寫：數組形式 和 對向行駛 兩種；
- class 屬性默認值的處理
10-2. 經過style屬性，控制樣式變化
<div id="app">
v-bind指令+style屬性實現樣式綁定
<div :style="{border: borderStyle, width: widthStyle, height: heightStyle}"></div>
v-bind指令+style屬性 簡寫形式
<div :style="objectStyles"></div>
v-bind指令+style屬性 數組形式
<div :style="[objectStyles, overrideStyles]"></div>
<div>
<button @click="switchStyles">切換</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid red',
widthStyle: '100px',
heightStyle: '200px',
objectStyles: {
border: '3px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px, solid blue',
width: '500px',
height: '100px',
backgroundColor:'orange'
}
},
methods: {
switchStyles() {
this.widthStyle = '200px';
this.objectStyles.height = '200px';
}
}
});
</script>
</body>
11.Vue分支結構
11-1. v-if v-else-if v-else
控制的是條件分支對應的dom元素是否渲染到頁面上，適用於元素渲染出來後不怎麼變化的
11-2. v-show
dom元素已經渲染到頁面經過style樣式來控制元素是否顯示，適用於元素頻繁的顯示和隱藏時使用
<body>
<div id="app">
v-if v-else-if v-else 指令
<div v-if="score>90">優秀</div>
<div v-else-if="score>80&&score<=90">良好 </div>
<div v-else-if="score<=80&&score>70">通常</div>
<div v-else-if="score<=70&&score>=60">及格</div>
<div v-else>不及格</div>
v-show指令
<div v-show="showFlag">show指令控制的內容</div>
<div>
<button @click="switchShowFlag">切換</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99,
showFlag: true
},
methods: {
switchShowFlag() {
this.showFlag = !this.showFlag;
}
}
});
</script>
</body>
12.Vue循環結構
12-1. v-for 循環簡單數組數組
v-for="item in [array]" v-for="(item, index) in [array]"
其中 item 就是簡單數組中的一個元素，index是當前元素在數組中的位置
12-2. v-for指令相關的key屬性
<li v-bind:key="item.id" v-for="item in fruitObjects">{{item.id}} --- {{item.ename}} --- {{item.cname}}</li>
v-for指令相關的key用來方便vue定位區分遍歷的集合中的元素
12-3. v-for 循環對象
<li v-for="(value, key, index) in obj">
{{key + '---' + value + '---' + index}}
</li>
代碼中 value, key, index 的位置是固定不變的，能夠變換名字可是，對應位置分別表明的含義是：屬性值、屬性名、屬性位置
<body>
<div id="app">
循環簡單數組
<div>
<li v-for="item in fruitArray">{{item}}</li>
</div>
循環帶下標
<div>
<li v-for="(item, index) in fruitArray">{{item}} --- {{index}}</li>
</div>
循環對象數組
<div>
<li v-for="item in fruitObjects">{{item.ename}} --- {{item.cname}}</li>
</div>
v-for指令相關的key用來方便vue定位區分遍歷的集合中的元素
<div>
<li v-bind:key="item.id" v-for="item in fruitObjects">{{item.id}} --- {{item.ename}} --- {{item.cname}}</li>
</div>
遍歷對象中各個屬性及對應的取值
<div>
<li v-for="(value, key, index) in obj">
{{key + '---' + value + '---' + index}}
</li>
</div>
v-for 指令 和 v-if 指令 結合使用
<div>
<li v-if='item == "apple"' v-for="item in fruitArray">{{item}}</li>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
fruitArray: ['apple', 'orange', 'banana'],
fruitObjects: [
{
id: 1,
ename: 'apple',
cname: '蘋果'
},
{
id: 2,
ename: 'orange',
cname: '橘子'
},
{
id: 3,
ename: 'banana',
cname: '香蕉'
}
],
obj: {
uname: 'lisi',
age: 12,
gender: 'male'
}
},
methods: {
}
});
</script>
</body>
相關文章
- 1. VUE學習筆記（1）：基礎語法
- 2. python學習筆記(1基礎語法）
- 3. React 學習筆記（1） 基礎語法
- 4. JS基礎語法 學習筆記1
- 5. Vue.js學習筆記1 - Vue基礎
- 6. VUE基礎語法學習
- 7. VUE學習筆記——基礎
- 8. vue學習筆記——基礎
- 9. VUE基本語法（學習筆記）
- 10. vue 學習筆記(二.基本語法)
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. VUE學習筆記（1）：基礎語法
- 2. python學習筆記(1基礎語法）
- 3. React 學習筆記（1） 基礎語法
- 4. JS基礎語法 學習筆記1
- 5. Vue.js學習筆記1 - Vue基礎
- 6. VUE基礎語法學習
- 7. VUE學習筆記——基礎
- 8. vue學習筆記——基礎
- 9. VUE基本語法（學習筆記）
- 10. vue 學習筆記(二.基本語法)