03-Vue: v-for就地更新、过滤器

1.v-for就地更新

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">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    
    <div id="app">
         <ul>
             <li v-for="item in arr">
                 {{item}}
             li>
         ul>
         <button @click="add">新增button>
    div>

    
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:['老大','老二','老三']
            },
            methods:{
               add(){
                   this.arr.splice(1,0,"新来的")
               }
            }
        })
    script>
body>
html>

js原生数组变化
数组变化,把数组重新渲染,会影响重绘和回流(页面布局)
v-for更新
循环出新的虚拟DOM结构,和旧的虚拟DOM解构对比,复用标签就地更新内容
真实DOM
在document对象上,渲染到浏览器上显示的标签
虚拟DOM
本质是保存节点信息,属性和内容的一个js对象
好处:
1.提高DOM更新的性能,不频繁的操作真实Dom,在内存中找到变化的部分,再更新真实DOM(打补丁);

2.diff算法

1.同级比较—根元素变化,整个DOM数删除重建;
2.同级比较—根元素不变,属性改变 更新属性(dom复用,只更新属性);

标签内子标签/内容改变,diff算法如何对比?
1.无key值:从第二个往后更新内容,性能不高;
2.有key,值为索引:先产生新旧虚拟dom,根据key比较,还是就地复用;
3.有key,值为id:先产生新旧虚拟dom,根据key比较
(key值是唯一的的不重复的字符串或数值,有id就一定用id,没有就用index,key值配合虚拟dom,有更好的性能)

3.过滤器

转换格式:过滤器就是一个函数,传入值返回处理后的值;
过滤器只能用在:插值表达式和v-bind动态属性值;
使用场景:字符串翻转;字母转大写;时间对象转日期格式;
语法:
1.全局:vue.filter(‘过滤器名字’,(值)=>{return “处理后的值”});
2.局部:
filters:{
过滤器名字:(值)=>{return “处理后的值”}
}
使用:
{{表达式 | 过滤器名}};
<标签 :title="变量 | 过滤器’>

4.过滤器传参和多过滤器

传参 {{变量 | 过滤器(参数)}}
多过滤器{{变量 | 过滤器1 | 过滤器2}}

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">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    
    <div id="app">
         {{str | toUp}}

         <p :title="str| toUp">大写hellop>
         {{price | toFix(3)}}
    div>

    
    <script>
        // 局部
        
        new Vue({
            el:"#app",
            data:{
                str:"hello",
                price:7890
            },
            methods:{
               
            },
            filters:{
                // 只能在当前实例使用
                'toUp':(val)=>{
                    return val.toUpperCase()
                },
                'toFix':(val,n)=>{
                    return val.toFixed(n)
                }
            }
        })
    script>
body>
html>

你可能感兴趣的:(前端学习,vue.js,前端,javascript,前端框架)