vue知识点的梳理

最新推荐文章于 2022-09-14 15:41:06 发布

琴～～

最新推荐文章于 2022-09-14 15:41:06 发布

阅读量104

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/120058075

版权

vue知识点的梳理

1、在开发的过程中可以先进行打印，之后看看里面的数据是否是我们需要，在进行接下来的步骤

console.log(this.$router);
console.log(this.$route);
console.log(window);

2、localStorage和seeionStorage的区别？

3、过滤器？

（1）全局过滤器

/**
 * 1.参数一:过滤器的名称,自定义
 * 2.参数二:回调函数,回调函数中有一个系统自动注入的参数
 *         参数值为:要过滤的值
 */
  Vue.filter('过滤器的名称',(e)=>{
       return  e.slice(0,4)
 })

（2）局部过滤器

filters:{
     过滤器名称:function(e){
     	return  e.toFixed(2)
     }
 }

4、计算属性？

computed:{
	自定义的变量名:function(){
		return 操作
	}
}

5、监听？

（1）普通监听

watch:{
         监听的属性名:function(newVal,oldVal){
         // newVal参数一:修改后的新值
         // oldVal参数二:修改前的旧值
         // console.log(newVal);
         // console.log(oldVal);
         console.log(this.name);
         }
       }

（2）深度监听

watch:{
    监听的对象:{
        // handler是系统自动注入的方法
        handler(){
            console.log(this.user.name);
        },
        deep:true,//默认值为false
    }
 }

6、route和router的区别？

this.$router: 一般是用来做路由跳转；

this.$route : 一般来获取路由中的参数；

7、 $set

往对象或者数组对象中添加新的属性使得该属性必须赋予get和set方法,才能在视图中渲染, 往对象中添加新的属性的方式，在这里我们是在挂载完成的时候添加: 局部设置: 1.this. $s e t (操作的对象,^{'} 添加新的属性名^{'},^{'} 新的属性值^{'}) 2 . V u e . s e t (操作的对象,^{'} 添加新的属性名^{'},^{'} 新的属性值^{'}) 全局设置 3 . v m .$ set(操作的对象,‘添加新的属性名’,‘新的属性值’)

8、for…in…循环对象的时参数

（1）推荐使用hasOwnProperty方法，避免原型对象上带来的干扰

function allpro(obj){  
    var keys=[];   
    var values=[];    
    for(var key in obj){   
        //只遍历对象自身的属性，而不包含继承于原型链上的属性。  
        if (obj.hasOwnProperty(key) === true){  
            keys.push(key);    
            values.push(obj[key]);   
            }                 
        }  
    alert("keys is ："+keys+" and values is ："+values);    
}  
Object.prototype.bar = 1;// 修改Object.prototype  
var o={"name":"wjy","age":26,"sex":"female"};//定义一个object对象   
allpro(o);  
//keys is : name,age,sex and values is: wjy,26,female

（2）使用for循环遍历对象的属性时，原型链上的所有属性都将被访问‘

Object.prototype.bar = 10;// 修改Object.prototype  
var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象    
var keys=[];//定义一个数组用来接受key    
var values=[];//定义一个数组用来接受value    
  for(var key in obj){    
    keys.push(key);    
    values.push(obj[key]);//取得value      
    }    
alert("keys is ："+keys+" and values is ："+values);   
//keys is : name,age,sex,bar and values is : wjy,26,female,10

（3）第一个是key

for(let key in obj){
  
}
key:得到的是属性名
obj[key]:得到的是属性值
我们使用for...in里面的变量，我们喜欢用k或者key

9、watch和computed的作用和区别？

watch中的函数是不需要调用的

computed内部的函数调用的时候不需要加()

watch 属性监听监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用

computed:计算属性通过属性计算而得来的属性，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。

主要当作属性来使用； watch擅长处理的场景：一个数据影响多个数据；

computed擅长处理的场景：一个数据受多个数据影响。

10、class动态的属性

:class=“变量”

:class=“三元运算符”

:class="{类名1:ture,类名2:false,类名3:false}"

12、style样式

<!-- 静态样式 -->
<div style="background: red;color:green;">静态样式</div>
<hr>
<!-- 动态样式 -->
<div :style="{background: 'red',color:'green'}">动态样式</div>
<!-- 动态样式变形 -->
<div class="box" :style="styleN">动态样式变形</div>

13、key

在数组遍历时,需要绑定一个key,当元素改变时,虚拟DOM通过唯一的KEY进行判断修改了哪些元素,修改完成之后,再跟真实的DOM进行对比.将产生差异的部分通过浏览器修改即可,相同的部分不做修改.

注意:key值可以是number或者string类型