1，事件
1、說明
- 綁定事件的兩種方法：
<button @click="showMsg">按鈕</button>
<button v-on:click="test('123', true, color, $event)">新的按鈕</button> <!-- $event 傳遞事件對象 -->
- 回調函數在vue的methods屬性中定義，如果參數集合()沒有定義，回調函數有一個默認參數 this
- 作用域是vue實例化對象，所以在回調函數中，可以通過this訪問vue上的數據
- 所以methods中定義的方法，可以在methods，以及computed等方法中使用
- vue綁定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<button @click="showMsg">按鈕</button>
<button v-on:click="test('123', true, color, $event)">新的按鈕</button> <!-- $event 傳遞事件對象 -->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定義vue實例化對象
var app = new Vue({
el: '#app',
data: {
color: 'red'
},
// 回調函數定義在methods屬性中
methods: {
// 每一個屬性代表一個方法
showMsg: function() {
console.log(this ,arguments)
},
// 定義回調函數
test: function() {
console.log(this, arguments) // arguments = ["123", true, "red", MouseEvent]
}
}
})
</script>
</body>
</html>
2、事件冒泡和默認行爲
事件冒泡：當內存外層都綁定 如 點擊事件時，只讓最內層事件執行
默認行爲：如 a 標籤點擊默認會跳轉到 href 地址中，然其點擊後不跳轉
一次觸發：<button @click.once="print"> 只觸發一次 </button>
- 事件冒泡和默認行爲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和默認行爲</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
// e.stopPropagation();
},
print(){
console.log(222);
},
write(){
console.log(333);
},
study(){
console.log(444);
// e.preventDefault();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<div @click="write">
<p @click="print">
<!-- <button @click="show($event)">點我</button> -->
<button @click.stop="show">點我</button>
</p>
</div>
<hr>
<!-- <a href="#" @click="study($event)">俺是鏈接</a> -->
<a href="#" @click.prevent="study">俺是鏈接</a>
</div>
</body>
</html>
3、事件修飾符(監控enter、up、down等鍵盤)
- 綁定鍵盤事件的時候，經常會判斷按鍵，通過 e.keyCode
- 事件修飾符語法 v-on:keyup.修飾符=”回調函數()”，表示，當按下的鍵是修飾符的時候纔會觸發
- 在vue中常見的有9個 esc， tab， space， enter， delete， up，down，left，right
- 監控enter鍵事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="showValue">
<h1>{{msg}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定義vue實例化對象
var app = new Vue({
el: "#app",
data: {
msg: ''
},
methods: {
showValue: function(e) {
// console.log(e.target.value)
// 判斷點擊回車鍵
// if (e.keyCode === 13) {
// // 作用域是vue實例化對象
// this.msg = e.target.value
// }
console.log(1111);
this.msg = e.target.value; // e.target.value 獲取的是輸入框的值
}
}
})
</script>
</body>
</html>
- 自定義鍵位別名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鍵盤事件</title>
<script src="js/vue.js"></script>
<script>
/**
* 自定義鍵位別名
*/
Vue.config.keyCodes={
a:65,
f1:112
}
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(e){
console.log(e.keyCode);
if(e.keyCode==13){
console.log('您按了回車');
}
},
print(){
// console.log('您按了回車');
// console.log('您按了方向鍵上');
console.log('11111');
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- 鍵盤事件：@keydown、@keypress、@keyup -->
<!-- 用戶名：<input type="text" @keydown="show($event)"> -->
<!-- 簡化按鍵的判斷 -->
<!-- 用戶名：<input type="text" @keydown="show($event)"> -->
<!-- 用戶名：<input type="text" @keydown.13="print"> -->
<!-- 用戶名：<input type="text" @keydown.enter="print"> -->
<!-- 用戶名：<input type="text" @keydown.up="print"> -->
用戶名：<input type="text" @keydown.f1="print">
<!-- 事件修飾符 -->
<button @click.once="print">只觸發一次</button>
</div>
</body>
</html>
4、事件修飾符
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
- 防止多次提交
<template>
<button @click="submit()" :disabled="isDisable">點擊</button>
</template>
<script>
export default {
name: 'TestButton',
data: function () {
return {
isDisable: false
}
},
methods: {
submit() {
this.isDisable = true
setTimeout(() => {
this.isDisable = false
}, 1000)
}
},
}
</script>
5、事件綁定常用方法
'''一：鼠標事件'''
# click 當用戶點擊某個對象時調用的事件句柄。
# contextmenu 在用戶點擊鼠標右鍵打開上下文菜單時觸發
# dblclick 當用戶雙擊某個對象時調用的事件句柄。
# mousedown 鼠標按鈕被按下。
# mouseenter 當鼠標指針移動到元素上時觸發。
# mouseleave 當鼠標指針移出元素時觸發
# mousemove 鼠標被移動。
# mouseover 鼠標移到某元素之上。
# mouseout 鼠標從某元素移開。
# mouseup 鼠標按鍵被鬆開。
'''二：鍵盤事件'''
# keydown 某個鍵盤按鍵被按下。
# keypress 某個鍵盤按鍵被按下並鬆開。
# keyup 某個鍵盤按鍵被鬆開。
2，模板
1、簡介
Vue.js使用基於HTML的模板語法，可以將DOM綁定到Vue實例中的數據
模板就是{{}}，用來進行數據綁定，顯示在頁面中，也稱爲Mustache語法
2、數據綁定的方式
a.雙向綁定
v-model
b.單向綁定
方式1：使用兩對大括號{{}}，可能會出現閃爍的問題，可以使用v-cloak解決
方式2：使用v-text、v-html
3、其他指令
v-once 數據只綁定一次
v-pre 不編譯，直接原樣顯示
官網指令： https://cn.vuejs.org/v2/api/#v-once
3，自定義過濾器
1、說明
- 在vue升級之後，vue不建議使用過濾器，而是用插值表達式，或者動態數據綁定替換
- 使用過濾器的目的是爲了在組件間複用處理數據的業務邏輯
- Vue類中存在一個靜態方法filter方法，用來定義過濾器
2、使用過濾器(過濾器定義必須在實例化vue對象前)
- 語法 {{數據 | 過濾器名稱 參數1 參數2 參數3 | 過濾器2 參數2}}
- 可以使用多個過濾器，前一個過濾器的輸出將作爲後一個過濾器的輸入
- 2.0版本的改動 {{數據 | 過濾器(參數1, 參數2)}} （2.0版本對過濾器的傳參做了改動）
- 自定義過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p> price: 數據 currency: 過濾器名稱 ￥和3：表示傳遞的參數 </p>
<h1>{{price | currency('￥', 3)}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
/**
* 自定義過濾器
* currency 過濾器名稱
* @price 價格
* @sign 價格標志
* @len 小數位保留的長度
**/
Vue.filter('currency', function(price, sign, len) { // 從第二個開始纔是傳遞的參數
price = Math.abs(price); // 保證是正數
sign = sign || '￥'; // 默認爲人命幣標誌
len = len || 2; // 默認保留兩位小數
var arr = String(parseInt(price)).split(''); // arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
for (var i = arr.length - 3; i > 0; i -= 3) { // 添加了成員後面的位置變了，所以從後向前遍歷，首位不能添加
arr.splice(i, 0, ',') // i(插入的索引位置)；0（刪除0個字符串）； ','(添加的符合)
} // for循環後 arr = [1, 2, ',', 3, 4, 5, ',', 6, 7, 8]
return sign + arr.join('') + (price - parseInt(price)).toFixed(len).slice(1)
// 轉化成小數 原數字減去整數 保留len位小數，去掉整數部分
// toFixed(len) 保留len位小數（得到結果是字符串）
// 0.23456.toFixed(3) = "0.235" "'0.235'.slice(1) = ".235"
});
new Vue({
el: '#app',
data: {
price: 1234567891.1234567,
msg: 'a hot day'
}
})
</script>
</body>
</html>
4，過度
1、說明
- 在元素切換狀態的時候（例如：元素的顯隱），我們可以爲元素添加動畫
- Transition屬性：Vue會根據屬性值自動創建三個css類，例如 transition=“demo”
demo-transition： 定義過渡的
demo-enter 進入樣式
demo-leave 移出樣式- 注意：2.0類的名稱變了
.demo-transition => .demo-enter-active, .demo-leave-active
.demo-enter => .demo-enter
.demo-leave => .demo-leave-to
Transition屬性 變成了 transition組件了，通過name定義過渡名稱
- 過度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo {
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
}
/*定義過渡*/
.demo-enter-active,
.demo-leave-active {
transition: all 1s;
}
/*定義進場動畫和出場動畫*/
.demo-enter,
.demo-leave-to {
width: 0;
height: 0;
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="toggle">切換顯隱</button>
<transition name="demo">
<div class="demo" transition="demo" v-if="isShow">這是內容</div>
</transition>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定義vue實例化對象
var app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
// 切換isShow
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
5，支付寶註冊
- 支付寶註冊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #ccc;
}
#app {
width: 800px;
margin: 50px auto;
border: 1px solid #ccc;
background: #fff;
height: 600px;
padding-top: 80px;
}
label {
margin-left: 100px;
margin-right: 20px;
}
input {
padding: 8px 15px;
width: 300px;
}
ul {
width: 330px;
margin-left: 176px;
border: 2px solid #ccc;
margin-top: -1px;
}
ul li {
padding: 0 15px;
height: 26px;
line-height: 26px;
}
ul li:hover,
ul li.hover {
background: #efefef;
}
</style>
</head>
<body>
<div id="app">
<label>賬戶名</label>
<input
type="text"
v-model="msg"
@keydown.up="showPrevLi"
@keyup.down="showNextLi"
@keyup.enter="chooseLi"
>
<!-- ul的顯示與msg有關 -->
<ul v-show="msg">
<li v-for="item in dealMail" v-on:click="chooseCurrentLi">{{dealMsg}}@{{item}}.<template v-if="item == 189">cn</template><template v-else>com</template></li>
</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 創建vue實例化對象
var app = new Vue({
el: '#app',
data: { // 定義綁定的數據
msg: '',
num: -1,
isFirst: true, // 是否是第一次
email: ['qq', 163, 126, 189, 'sina', 'hotmail', 'gmail', 'sohu', '21cn']
},
// 動態數據綁定
computed: {
dealMsg: function(vue) { // 處理msg, 截取@符號之前的
if (this.msg.indexOf('@') >= 0){ // 是否存在@
// 截取@符號之前的，不包括@, slice, substring, substr, 哪個參數表示長度，出現負數，第一個參數大於第二個參數怎麼辦，李鵬濤
return this.msg.slice(0, this.msg.indexOf('@'))
}
return this.msg // 否則返回msg
},
// 過濾mail集合
dealMail: function() {
if (this.msg.indexOf('@') > 0) { // 判斷是否包含@, 包含@，根據@符號後面的內容過濾
var str = this.msg.slice(this.msg.indexOf('@') + 1); // 截取@後面的內容
var result = []; // 過濾email集合
for (var i = 0; i < this.email.length; i++) { // 遍歷email找到符號條件的
var mail = this.email[i] + (this.email[i] == 189 ? '.c' : '.co'); // 每一個成員要帶上後綴，例如sina => sina.co
if (mail.indexOf(str) === 0) { // 什麼成員符合條件：以str開頭,
result.push(this.email[i]) // 存儲這個成員
}
}
return result; // 返回過濾的結果
}else {
return this.email // 不包含，直接返回email
}
}
},
// 定義事件回調函數
methods: {
chooseCurrentLi: function(e) { // 點擊li，然後選中li
var val = e.target.innerHTML; // 獲取li的內容
this.msg = val; // 更新msg
},
// 點擊向上鍵，顯示前一個li
showPrevLi: function(e) {
e.preventDefault(e); // 阻止默認行爲
if (this.isFirst) { // 如果是第一次，不用減了
this.isFirst = false; // 這次過去了，就不是第一次了
} else {
this.num--;
}
this.changeCurrentLiStyle(); // 更新li的樣式
},
// 點擊向下鍵，顯示後一個li
showNextLi: function() {
this.num++; // 更改num
this.changeCurrentLiStyle(); // 更新li的樣式
this.isFirst = false; // 第一次已經過去了
},
getNum: function(len) { // 獲取num對應的li的索引值
// 對於任意一個數（正數和負數）
// 對len取餘之後，保證在-len到len之間
// var num = this.num % len;
// // 此時加上len，保證是0到2*len之間，一定是正數了
// num += len;
// // 此時再取餘，就保證是0到len之間了
// num %= len
return (this.num % len + len) % len;
},
// 改變當前li的樣式
changeCurrentLiStyle: function() {
var lis = this.$el.getElementsByTagName('li'); // 獲取所有的li
if (lis.length === 0) { // 判斷li是否存在
return;
}
var num = this.getNum(lis.length); // 獲取索引值
for (var i = 0; i < lis.length; i++) { // 排他法設置類
lis[i].className = '';
}
lis[num].className = 'hover'; // 當前li選中
},
// 點擊enter鍵，顯示當前li
chooseLi: function() {
var lis = this.$el.getElementsByTagName('li'); // 獲取對應的li
if (lis.length === 0) { // 判斷li是否存在
return;
}
var num = this.getNum(lis.length); // 獲取索引值
var value = lis[num].innerHTML; // 獲取li的值
this.msg = value;
}
}
})
</script>
</body>
</html>
