Vue基本的事件
- v-bind事件vue提供的屬性系結機制，可以簡寫為:
- v-cloak事件防止閃爍
- v-text事件只顯示data內定義的內容
- v-html事件顯示北html渲染后的內容
- v-on事件vue提供的時間系結機制，可以簡寫為@（v-mouseover:click 等價于v-on:click等價于@click）
- =>可以解決this指向問題
事件修飾符
- .stop阻止冒泡事件的產生（阻止所有冒泡）
- .prevent阻止默認行為的發生
- .capture捕獲出發事件的機制
- .self只有點擊當前元素才能處理函式（阻止當前元素冒泡）
- .once只觸發一次處理函式
復習：
- alter事件彈出彈框
- substring字串截取
案例：跑馬燈
分析
- 給button系結點擊事件
- 在按鈕的時間處理函式中，寫相關邏輯代碼(首先獲取msg內的字串，然后呼叫substring方法截取字串，將第一個截取放置末尾)
- 為了實作點擊后自動截取功能，需要將2中的步驟防止一個定時器中
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>//引入Vue包
</head>
<body>
<!--創建一個要控制的區域-->
<div id="app">
<input type="button" value="浪起來" @click="lang">
<input type="button" value="低調" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
var vm = new Vue({//定義變數
el:'#app',
data:{
msg:'猥瑣發育，別浪~~！',
intervalId:null
},
methods:{
lang(){
// console.log(this.msg)
// var _this=this//this指向
if(this.intervalId !=null) return;
this.intervalId= setInterval(()=> {//setInterval實作定時呼叫的函式
var start = this.msg.substring(0,1)//截取
var end = this.msg.substring(1)
this.msg = end + start
},400)
},
stop(){
clearInterval(this.intervalId)
this.intervalId=null;
}
}
})
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304117.html
標籤：其他
上一篇：vue-ELement：前端遞回組件，組成評論展示效果
下一篇：vue一二級路由配置