一、制作跑馬燈效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.6.10.js"></script>
</head>
<body>
<!--創(chuàng)建一個(gè)要控制的區(qū)域-->
<div id="app">
<input type="button" value="浪起來" @click="lang">
<input type="button" value="低調(diào)" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//注意： 在vm實(shí)例中航攒，如果想要獲取data上的數(shù)據(jù)磺陡，或者想要調(diào)用methods中的方法，必須通過this.數(shù)據(jù)屬性名漠畜，或者this.方法名來訪問币他，這里的this就表示我們new出來的VM實(shí)例對(duì)象
var vm = new Vue({
el: '#app',
data: {
msg: '猥瑣發(fā)育，別浪～～憔狞！',
intervalId: null //在data上定義定時(shí)器id
},
methods: {
lang() {
//箭頭函數(shù)使內(nèi)部的this指向與外部一致蝴悉，普通函數(shù)的this指針會(huì)指向自身，與外部的this不一致瘾敢。
//防止創(chuàng)建多個(gè)計(jì)時(shí)器
if (this.intervalId == null) {
this.intervalId = setInterval(() => {
//獲取到第一個(gè)字符
var start = this.msg.substring(0, 1);
//獲取到后面的所有字符
var end = this.msg.substring(1);
//重新拼接得到新的字符串拍冠，并賦值給this.msg
this.msg = end + start;
}, 400);
}
//注意： VM實(shí)例會(huì)監(jiān)聽自己身上的data中的所有數(shù)據(jù)的改變，只要數(shù)據(jù)已發(fā)生變化廉丽，就會(huì)自動(dòng)把最新的數(shù)據(jù)從data中同步到頁面上倦微。
},
stop() {
clearInterval(this.intervalId);
//每當(dāng)清除了計(jì)時(shí)器妻味，需要重新把intervalId賦值為null
this.intervalId = null;
}
}
})
//分析
//1.給【浪起來】按鈕綁定一個(gè)點(diǎn)擊事件 v-on @
//2.在按鈕的事件處理函數(shù)中正压，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到msg字符串，然后 調(diào)用字符串的substring 來進(jìn)行字符串的截取操作责球，把第一個(gè)字符截取出來放到最后一個(gè)位置即可
//3.為了實(shí)現(xiàn)點(diǎn)擊一下按鈕自動(dòng)截取的功能焦履，需要吧2步驟中的代碼放到計(jì)時(shí)器中
</script>
</body>
</html>
二、事件修飾符
<script src="lib/vue-2.6.10.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
</style>
<div id="app">
<div class="inner" @click="divHandler">
<!--使用.stop阻止冒泡-->
<input type="button" value="戳他1" @click.stop="btnHandler">
</div>
<div class="inner" @click.capture="divHandler">
<!--使用.capture可實(shí)現(xiàn)捕獲機(jī)制雏逾，即點(diǎn)擊按鈕時(shí)先觸發(fā)外層div的點(diǎn)擊事件再觸發(fā)按鈕的點(diǎn)擊事件-->
<input type="button" value="戳他2" @click="btnHandler">
</div>
<div class="inner" @click.self="divHandler">
<!--使用.self實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)嘉裤，才會(huì)觸發(fā)時(shí)間處理函數(shù)-->
<!--注意：.self只會(huì)阻止自己身上冒泡行為的觸發(fā)，并不會(huì)真正阻止冒泡的發(fā)生栖博。若有多層嵌套事件時(shí)阻止冒泡用.self的話就要給每一個(gè)父級(jí)添加屑宠，而.stop只添加一次即可-->
<input type="button" value="戳他3" @click="btnHandler">
</div>
<!--使用.prevent阻止默認(rèn)行為-->
<a @click.prevent="linkClick">有問題，先去百度1</a>
<!--使用.once 只觸發(fā)一次事件處理函數(shù)仇让，而且阻止默認(rèn)事件機(jī)制也執(zhí)行一次-->
<a @click.prevent.once="linkClick">有問題典奉，先去百度2</a>
</div>
<script>
//創(chuàng)建一個(gè)Vue實(shí)例，得到ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
divHandler() {
console.log("這是觸發(fā)了 inner div 的點(diǎn)擊事件");
},
btnHandler() {
console.log("這是觸發(fā)了 btn 按鈕 的點(diǎn)擊事件");
},
linkClick(){
console.log("觸發(fā)了鏈接的點(diǎn)擊事件");
}
}
})
</script>
三丧叽、使用v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<h4>{{msg}}</h4>
<!--v-bind只能實(shí)現(xiàn)數(shù)據(jù)的單項(xiàng)綁定卫玖，從M（數(shù)據(jù)層）自動(dòng)綁定到V（視圖層）中，無法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定-->
<input type="text" :value="msg">
<!--使用v-model可以實(shí)現(xiàn)數(shù)據(jù)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定-->
<!--注意：v-model只能運(yùn)用在表單元素中-->
<!-- input(radio,text,address,email...) select checkbox textarea-->
<input type="text" v-model="msg">
</div>
<script>
//創(chuàng)建Vue實(shí)例
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好學(xué)生'
}
})
</script>
四踊淳、簡易計(jì)算器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {//計(jì)算器計(jì)算方法
var codeStr = 'parseFloat(this.n1)' + this.opt + 'parseFloat(this.n2)';
this.result = eval(codeStr);
}
}
})
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
