Vue笔记三

目录

一绑定样式

绑定class样式

 绑定style样式

二 条件渲染

v-if

v- show

三 列表渲染

v- for指令

四 列表的过滤

五 列表排序

六 Vue监视数据

---

一绑定样式

绑定class样式

写法:class="xxx“，xxx可以是字符串、对象、数组。
（1）字符串写法适用于:类名不确定，要动态获取。
（2）数组写法适用于:要绑定多个样式，个数不确定，名字也不确定。
（3）对象写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

 绑定style样式

:style="{fontSize: xxx}" 其中xx是动态值。
:style="[a,b]"其中a、b是样式对象。

    
    
    
    
    
    


    

        
        
{{name}}
         


         

        
{{name}}


        
        


        
{{name}}


 

              
        
       
{{name}}


                
       
{{name}}
    

二 条件渲染

v-if

写法:
(1).v-if="表达式”
(2).v-else-if="表达式”
(3).v-else="表达式”
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else起使用， 但要求结构不能被“打断”。

v- show

写法: v-show=" 表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注意：使用v-if的时，元素可能无法获取到，而使用v-show 定可以获取到。

 





 
    
当前的值是：{{n}}
    点我n+1
       
 

       
 



     
   
       
   

三 列表渲染

v- for指令

1.用于展示列表数据
2.语法: v-for="(item, index) in xxx"   :key="yy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

    
    
    
    
    


    

        
  
遍历人员列表
  

      
      

          {{p.name}}-{{p.age}}
      
  

        
        
遍历麻辣信息
        

            

                {{k}}-{{value}}
            
        

        
        
遍历字符串
        

            

                {{char}}-{{index}}
            
        
        
        
遍历指定次数
        

            

                {{index}}-{{number}}
            
        
    

面试题: react、 vue中的key有什么作用? (key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，
随后Vue进行[ 新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
    1)若虚拟DOM中内容没变，直接使用之前的真实DOM!
     2)若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3.用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
(2).如果结构中还包含输入类的DOM:
会产生错误DOM更新==> 界面有问题。
4.开发中如何选择key?:
(1)最好使用每条数据的唯一标 识作为key,比如id、手机号、身份证号、学号等唯一值。
(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。

四 列表的过滤

    
    
    
    
    


    

  
遍历人员列表
  
  

      

          {{p.name}}-{{p.age}}-{{p.sex}}
      
  
  

五 列表排序

    
    
    
    
    


    

  
遍历人员列表
  
  升序排列
  降序排列
  原顺序
  

      

          {{p.name}}-{{p.age}}-{{p.sex}}
      
  
  

六 Vue监视数据

Vue监视数据的原理:
1.vue会监视data中所有层次的数据。
2.如何监测对象中的数据?
通过setter实现监视，且要在newVue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API: 
Vue.set(target, propertyName/index, value) 或
vm . $set(target, propertyName/ index, value )
3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如 下方法:
1.使用这些API:push()、pop()、 shift()、 unshift()、 splice()、 sort()、 reverse()
2.Vue.set()或vm.$set()
特别注意: Vue.set() 和vm.$set() 不能给vm或vm的根数据对象添加属性!

看懂下面例子就基本掌握上面这些话：

    
    
    
    
    


    

       
        年龄+1岁 

        添加性别属性，默认值:男 

        在列表首位添加个朋友 

        修改第一个朋友的名字为:张三 

        添加一个爱好 

        修改第一个爱好为:购物 

        过滤掉爱好中的打游戏 

        
姓名: {{ students. name}}
        
年龄: {{students. age}}
        
学生性别:{{students.sex}}
        
爱好: 
        

        

        {{h}}
        
 
        
        
朋友们: 
        

        

        {{f.name}}--{{f.age}}
        
     
    

补充：

变更方法，顾名思义,会变更调用了这些方法的原始数组。怊比之下，也有非变更方法，例如
filter()、concat（）和 slice() 。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组: