21.07.22笔记 —— Vue.js基础（一）

VUE基础

语雀课件地址 Vue.js框架

Vue中文文档 Vue.js

创建vue项目

①在一个空项目中引入vue的js文件

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

②语法格式

以上图的语法格式实现MVVM的关系

MVVM框架

M：指需要在前端显示的数据
V：前端的视图页面
VM：实现M与V的双向绑定

基础指令

不严格要求可以把框框的语句放在head里面
①严格要求用v-cloak来解决

v-cloak是标签体属性，在加载中添加，加载完成后自动删除
②v-text
③v-html

再次注意v-html和v-text的区别

事件绑定

出错：用let声明的VM实例重复，需要改名字

show（）函数省略了function；
alert中记得加this，因为调用的是VM的data中的变量
v-on:click可以改为@click

属性绑定

v-bind可以简写为:

用户名上没有数据，页面上显示为空

用v-bind进行单项绑定，用:进行简写

走马灯练习

如果在setInterval中直接写

let start = this.msg.substr(0,1);
let ene = this.msg.substr(1,this.mag.length-1);
this.msg = end + start ;

报错msg未定义
因为setInterval中的this指向的是window，此时要使用的this应该是vm的
或者可以用箭头函数获取到vm的this

把定时器放在data里面，在run和stop里面调用

当前问题：不停点击run会一直开启定时器，速度越来越快，stop停住不了所有的定时器
解决：加判断
当定时器不为NULL是无法开启

出现问题：停止后无法开启
原因，关闭后定时器仍有值，所以不为null无法开启
解决：在关闭时把定时器设为null

完整代码

<html>
	<head>
		<meta charset="UTF-8">
		<title>跑马灯</title>
		
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<button @click="go()">跑</button>
			<button @click="stop()">停止</button>
		</div>
		
		<script src="../js/vue-2.4.0.js"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data: {
					msg: "好好学习  天天向上！",
					intervalId: null
				},
				methods: {
					go() {
//						let _this = this;
//						//开启定时器
//						//setInterval 中的this指向的是window，此时要使用的this应该指向vm实例。
//						setInterval(function() {
//							//字符串处理
//							let start = _this.msg.substr(0,1);
//							let end = _this.msg.substr(1,_this.msg.length-1);
//							_this.msg = end + start ;
//						},1000);
						
						//判断intervalId是否为null，如果为null再开启定时器
						if(this.intervalId != null) {
							return;
						}

						//使用箭头函数，解决this指向问题
						this.intervalId = setInterval(() => {
							//字符串处理
							let start = this.msg.substr(0,1);
							let end = this.msg.substr(1,this.msg.length-1);
							this.msg = end + start ;
						},200);
					},
					stop() {
						clearInterval(this.intervalId);
						//把intervalId的值设置为null
						this.intervalId = null;
					}
				}
			});
		</script>
	</body>
</html>

事件修饰符

写一个三层嵌套的box

点击蓝色输出父亲的父亲
点击粉色输出father 父亲的父亲
点击child输出child father 父亲的父亲

称之为冒泡，点击内层事件会触发外层的
可以用stop停止

给father加上capture，点击child，先执行father

再给box加上capture，冒泡顺序反过来
.self只有点击自身菜触发，点击子事件不触发外层事件，也可以用来停止冒泡