Vue 2.0基礎語法:系統指令
以下是正文。
Vue初體驗
新建一個空的專案,引入vue.js檔案。寫如下程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--vue的版本:2.5.15--> <script src="vue.js"></script> </head> <body> <!--這個div區域就是MVVM中的 View--> <div id="div1"> {{name}} </div> </body> <script> //new出來的物件就是MVVM中的 View Module var myVue = new Vue({ el: '#div1', //當前vue物件將接管上面的div區域 data: {//data就是MVVM中的 module name: 'smyhvae' } }); </script> </html>
顯示效果:
如果我們在控制檯輸入myVue.data+='123'
,頁面會自動更新name的值。
下面來講一下Vue的各種系統指令。
v-on:註冊事件
v-on 的用法舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--vue的版本:2.5.15--> <script src="vue.js"></script> </head> <body> <!--這個div區域就是MVVM中的 View--> <div id="div1"> <!-- 給button節點繫結按鈕的點選事件 --> {{name}} <button v-on:click="change">改變name的值</button> </div> </body> <script> //new出來的物件就是MVVM中的 View Module var myVue = new Vue({ el: '#div1', //當前vue物件將接管上面的div區域 data: { //data就是MVVM中的 module name: 'smyhvae' }, //注意,下方這個 `methods` 是Vue中定義方法的關鍵字,不能改 methods: { change: function() { //上面的button按鈕的點選事件 this.name += '1'; } } }); </script> </html>
上方程式碼中,我們給button按鈕綁定了點選事件。注意,這個button標籤要寫在div區域裡(否則點選事件不生效),因為下方的View module接管的是div區域。
v-on
的簡寫形式
例如:
<button v-on:click="change">改變name的值</button>
可以簡寫成:
<button @click="change">改變name的值</button>
v-on的常用事件
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....
v-on的事件修飾符
v-on
提供了很多事件修飾符來輔助實現一些功能。事件修飾符有如下:
.stop
阻止冒泡。本質是呼叫 event.stopPropagation()。.prevent
阻止預設事件。本質是呼叫 event.preventDefault()。.capture
新增事件監聽器時,使用 capture 模式。.self
只有當事件是從偵聽器繫結的元素本身觸發時,才觸發回撥。`
.{keyCode | keyAlias}
只當事件是從偵聽器繫結的元素本身觸發時,才觸發回撥。`
.native
監聽元件根元素的原生事件。
寫法示範:
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止預設行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止預設行為,沒有表示式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
舉例:(.prevent
的用法舉例)
現在有一個form表單:
<form action="http://www.baidu.com">
<input type="submit" value="表單提交">
</form>
我們知道,上面這個表單因為type="submit"
,因此它是一個提交按鈕,點選按鈕後,這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。這是表單的預設行為。
現在,我們可以用.prevent
來阻止這種預設行為。修改為:點選按鈕後,不提交到伺服器,而是執行我們自己想要的事件(在submit方法中另行定義)。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 阻止表單中submit的預設事件 -->
<form @submit.prevent action="http://www.baidu.com">
<!-- 執行自定義的click事件 -->
<input type="submit" @click="mySubmit" value="表單提交">
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
mySubmit: function() {
alert('ok');
}
}
});
</script>
</html>
上方程式碼中,我們通過.prevent
阻止了提交按鈕的預設事件,點選按鈕後,執行的是mySubmit()
方法裡的內容。這個方法名是可以隨便起的,我們甚至可以起名為submit
,反正預設的submit已經失效了。
插值表示式 {{}}
資料繫結最常見的形式就是使用 “Mustache” 語法(雙大括號)的文字插值。例如:
<span>Message: {{ msg }}</span>
Mustache 標籤將會被替代為對應資料物件上 msg 屬性(msg定義在data物件中)的值。
無論何時,繫結的資料物件上 msg 屬性發生了改變,插值處的內容都會自動更新。
{{}}
對JavaScript 表示式支援,例如:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
但是有個限制就是,每個繫結都只能包含單個表示式,如下表達式無效:
<!-- 這是語句,不是表示式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效,請使用三元表示式 -->
{{ if (ok) { return message } }}
v-text
v-text可以將一個變數的值渲染到指定的元素中。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本:2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<span v-text="name"></span>
</div>
</body>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello smyhvae'
}
});
</script>
</html>
結果:
v-html
v-text
是純文字,而v-html
會被解析成html元素。
注意:使用v-html渲染資料可能會非常危險,因為它很容易導致 XSS(跨站指令碼) 攻擊,使用的時候請謹慎,能夠使用{{}}或者v-text實現的不要使用v-html。
v-cloak
v-cloak
:保持和元素例項的關聯,直到結束編譯後自動消失。
這個指令和CSS 規則一起用的時候,可以隱藏未編譯的標籤直到例項準備完畢。比如說,在網路很慢的情況下,通過v-cloak
隱藏元素,當載入完畢後,再顯示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
/*網路很慢時,在span上加上 v-cloak和css樣式控制以後,瀏覽器在載入時會先把span隱藏起來。
直到 Vue例項化完畢以後,v-cloak 會自動消失,那麼對應的css樣式就會失去作用,最終將span中的內容呈現給使用者 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="div1">
<span v-cloak>{{name}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello1 smyhvae22'
}
});
</script>
</html>
v-bind
v-bind
:給html元素或者元件動態繫結一個或多個特性,例如動態繫結style和class。
比如說:
<img v-bind:src="imageSrc">
<div v-bind:style="{ fontSize: size + 'px' }"></div>
上方程式碼中的imageSrc
和size
其實是Vue例項裡面的變數。
上面兩行程式碼可以簡寫成:
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
舉例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<!-- value裡的值只是簡單的字串 -->
<input type="text" value="name">
<!-- 加上 v-bind 之後,value裡的值是 Vue 裡的變數 -->
<input type="text" v-bind:value="name">
<!-- 超連結後面的path是 Vue 裡面的變數 -->
<a v-bind="{href:'http://www.baidu.com/'+path}">超連結</a>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'smyhvae',
path: `2.html`
}
});
</script>
</html>
效果:
v-model:雙向資料繫結
上面的一段中,我們通過v-bind,給<input>
標籤綁定了data
物件裡的name
屬性。當data -> name
的值發生改變時,<input>
標籤裡的內容會自動更新。
可我現在要做的是:我在<input>
標籤裡修改內容,要求data -> name
的值自動更新。從而實現雙向資料繫結。該怎麼做呢?這就可以利用v-model
這個屬性。
程式碼舉例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<form action="#">
<input type="text" id="username" v-model="myAccount.username">
<input type="password" id="pwd" v-model="myAccount.userpwd">
<input type="submit" v-on:click="submit1" value="註冊">
</form>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
//上面的標籤中採用v-model進行雙向資料繫結,資料會自動更新到data裡面來
data: {
name: 'smyhvae',
myAccount: {username: '', userpwd: ''}
},
//在methods裡繫結各種方法,根據業務需要進行操作
methods: {
submit1: function () {
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
}
}
});
</script>
</html>
此時,便可實現我們剛剛要求的雙向資料繫結的效果。
v-for:for迴圈
作用:根據陣列中的元素遍歷指定模板內容生成內容。
引入
比如說,如果我想給一個ul
中的多個li
分別賦值1、2、3...。如果不用迴圈,就要挨個賦值:
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
});
</script>
效果:
為了實現上面的效果,如果我用v-for
進行賦值,程式碼就簡潔很多了:
<body>
<div id="app">
<ul>
<!-- 使用v-for對多個li進行遍歷賦值 -->
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3]
}
});
</script>
接下來,我們詳細講一下v-for
的用法。需要宣告的是,Vue 1.0的寫法和Vue 2.0的寫法是不一樣的。本文全部採用Vue 2.0的寫法
陣列的遍歷賦值
針對下面這樣的陣列:
<script>
new Vue({
el: '#app',
data: {
arr1: [2, 5, 3, 1, 1],
}
});
</script>
將陣列中的值賦給li:
<li v-for="item in arr1">{{item}}</li>
將陣列中的值和index賦給li:
<!-- 括號裡如果寫兩個引數:第一個引數代表值,第二個引數代表index -->
<li v-for="(item,index) in arr1">值:{{item}} --- 索引:{{index}}</li>
效果如下:
物件的遍歷賦值
針對下面這樣的物件:
<script>
new Vue({
el: '#app',
data: {
obj1: {
name: 'smyhvae',
age: '26',
gender: '男'
}
}
});
</script>
將上面的obj1
物件的資料賦值給li,寫法如下:
<body>
<div id="app">
<ul>
<!-- 括號裡如果寫兩個引數:則第一個引數代表value,第二個引數代表key -->
<li v-for="(value,key) in obj1">值:{{value}} --- 鍵:{{key}} </li>
<h3>---分隔線---</h3>
<!-- 括號裡如果寫三個引數:則第一個引數代表value,第二個引數代表key,第三個引數代表index -->
<li v-for="(value,key,index) in obj1">值:{{value}} --- 鍵:{{key}} --- index:{{index}} </li>
</ul>
</div>
</body>
效果如下:
v-if:設定元素的顯示和隱藏
作用:根據表示式的值的真假條件,來決定是否渲染元素,如果為false則不渲染(達到隱藏元素的目的),如果為true則渲染。
在切換時,元素和它的資料繫結會被銷燬並重建。
舉例如下:(點選按鈕時,切換和隱藏盒子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">顯示/隱藏</button>
<div v-if="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
效果如下:
v-show:設定元素的顯示和隱藏
作用:根據表示式的真假條件,來切換元素的 display 屬性。如果為false,則在元素上新增 display:none
屬性;否則移除display:none
屬性。
舉例如下:(點選按鈕時,切換和隱藏盒子)
我們直接把上一段程式碼中的v-if
改成v-show
就可以了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="toggle">顯示/隱藏</button>
<div v-show="isShow">我是盒子</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
this.isShow = !this.isShow;
}
}
});
</script>
</html>
效果如下:
v-if和v-show的區別:
v-if
和v-show
都能夠實現對一個元素的隱藏和顯示操作。但是v-if
是新增/刪除DOM元素,而v-show
是在這個元素上新增/移除style="display:none"
屬性。
我的公眾號
想學習程式碼之外的軟技能?不妨關注我的微信公眾號:生命團隊(id:vitateam
)。
掃一掃,你將發現另一個全新的世界,而這將是一場美麗的意外: