一、制作跑马灯效果
<!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="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//注意： 在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名，或者this.方法名来访问，这里的this就表示我们new出来的VM实例对象
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪～～！',
intervalId: null //在data上定义定时器id
},
methods: {
lang() {
//箭头函数使内部的this指向与外部一致，普通函数的this指针会指向自身，与外部的this不一致。
//防止创建多个计时器
if (this.intervalId == null) {
this.intervalId = setInterval(() => {
//获取到第一个字符
var start = this.msg.substring(0, 1);
//获取到后面的所有字符
var end = this.msg.substring(1);
//重新拼接得到新的字符串，并赋值给this.msg
this.msg = end + start;
}, 400);
}
//注意： VM实例会监听自己身上的data中的所有数据的改变，只要数据已发生变化，就会自动把最新的数据从data中同步到页面上。
},
stop() {
clearInterval(this.intervalId);
//每当清除了计时器，需要重新把intervalId赋值为null
this.intervalId = null;
}
}
})
//分析
//1.给【浪起来】按钮绑定一个点击事件 v-on @
//2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后 调用字符串的substring 来进行字符串的截取操作，把第一个字符截取出来放到最后一个位置即可
//3.为了实现点击一下按钮自动截取的功能，需要吧2步骤中的代码放到计时器中
</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可实现捕获机制，即点击按钮时先触发外层div的点击事件再触发按钮的点击事件-->
<input type="button" value="戳他2" @click="btnHandler">
</div>
<div class="inner" @click.self="divHandler">
<!--使用.self实现只有点击当前元素时，才会触发时间处理函数-->
<!--注意：.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的发生。若有多层嵌套事件时阻止冒泡用.self的话就要给每一个父级添加，而.stop只添加一次即可-->
<input type="button" value="戳他3" @click="btnHandler">
</div>
<!--使用.prevent阻止默认行为-->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度1</a>
<!--使用.once 只触发一次事件处理函数，而且阻止默认事件机制也执行一次-->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度2</a>
</div>
<script>
//创建一个Vue实例，得到ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
divHandler() {
console.log("这是触发了 inner div 的点击事件");
},
btnHandler() {
console.log("这是触发了 btn 按钮 的点击事件");
},
linkClick(){
console.log("触发了链接的点击事件");
}
}
})
</script>
三、使用v-model实现双向数据绑定
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<h4>{{msg}}</h4>
<!--v-bind只能实现数据的单项绑定，从M（数据层）自动绑定到V（视图层）中，无法实现数据的双向绑定-->
<input type="text" :value="msg">
<!--使用v-model可以实现数据表单元素和Model中数据的双向数据绑定-->
<!--注意：v-model只能运用在表单元素中-->
<!-- input(radio,text,address,email...) select checkbox textarea-->
<input type="text" v-model="msg">
</div>
<script>
//创建Vue实例
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好学生'
}
})
</script>
四、简易计算器
<!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() {//计算器计算方法
var codeStr = 'parseFloat(this.n1)' + this.opt + 'parseFloat(this.n2)';
this.result = eval(codeStr);
}
}
})
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
