Vue学习笔记2(各类指令和配置对象)

热爱可抵岁月mrx

已于 2022-06-30 09:50:39 修改

阅读量286

点赞数

分类专栏： web前端文章标签： vue.js 学习 javascript

于 2022-06-30 09:49:47 首次发布

本文链接：https://blog.csdn.net/qq_55695208/article/details/125351142

版权

本文详细探讨了Vue.js中的计算属性、监视属性、条件渲染、列表过滤、Vue.set()方法以及数据劫持等核心概念。通过实例解析了get调用时机、v-show与v-if的区别、v-for的key使用细节，并介绍了如何使用dayjs库处理时间戳。此外，还讲解了ES6的形参默认值、全局过滤器以及如何避免在Vue中错误地使用window方法。

摘要由CSDN通过智能技术生成

计算属性


		<script>
			const testt = new Vue({
				el:".test",
				data:{
					firstName:"张张",
					lastName:"三"
				},
				computed:{
					fullname:{
						get(){
							return "熊见";
						}
					}
				},
				methods:{
					shoeInfo(e){
				// console.log(e.keyCode) //keyCode是自带的按键编码，回车的编码是13，我们可以根据这个判断是否回车，回车后在去输出目标值
				// if(e.keyCode != 13)return;
						 console.log(this);
					}
				},
				
			});
			
		</script>

记住，在使用计算属性时computed一定要在methods的前面。

get什么时候被调用？

1.初次读取值时，会被调用，然后值会被缓存，方便我们下一次读写，

2.数据发生改变时了吗'

这里只是让我们能查取这个值，如果需要修改还需要加入一个set函数并返回修改后的数据。与methods相比，内部有缓存，效率更高，调试方便。

@click后面可以写一些简单的表达式。当也不是什么都能写，alert弹窗是属于window的，但你们是归Vue管理的话，就会报错。

因为window是一个内置对象，我们也可以在实例里加上它。这样就能正常的使用window的函数了/

	const testt = new Vue({
				el:".test",
				data:{
					firstName:"张张",
					lastName:"三",
					window
				},

切换天气小案列，学习思维
		<div class="test">
			<p>今天天气很{
  {flag?'凉爽':'炎热'}}</p>
			<button @click="switchover">点击我，切换天气</button>
		</div>
		
		<script>
			const test = new Vue(
			{
				el:".test",
				data:{
					flag:true,
				},
				methods:{
					switchover(){
						this.flag = !this.flag;
					}
				}
			});		
		</script>

监视属性

	   watch: {
			    		// 监视属性可监视正常属性，也能检测计算属性
					flag:{
						setImmediate:false,
						handler(newvalue,oldvalue){
						console.log("flag被修改了",newvalue,oldvalue);
					}
					}
				}

1.当监视属性变化时，回调函数自动调用。
2.监视属性必须存在才能调用
3.监视属性的两种写法
       第一种：在new Vue的时候写
        第二种：用实例.$watch('监视属性'，{  })
                注意：这里必须加引号，key和value本来都是需要加引号的，但是key引号往往被我们忽略。

4.监视多级结构中某个属性的变化：
const test = new Vue(
			{
				el:".test",
				data:{
					flag:true,
					numbers:
					{
						a:1,
						b:0
					}
				},
				methods:{
					switchover(){
						this.flag = !this.flag;
					}
				},
				watch:{
					'numbers.a':{
						handler(){
							console.log("a被修改啦")
						}
					}
				}
				
			})
    
5.如果需要检测对象的属性，直接写对象名是没有用的，因为对象的value值是指针，
我们改变属性的值，但指针地址不变。因此检测不到。但我们可以开启深度检测deep,默认值为false.
deep:true

Vue默认可以检测多层级数据大的改变的，但watch是不可以的&#