【Vue】Vue2.0+Vue3.0学习笔记day04

西西歪歪西歪

已于 2022-02-19 17:53:37 修改

阅读量392

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-01-05 13:32:35 首次发布

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122300967

版权

Vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

028.条件渲染

<!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>条件渲染</title>
    
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        条件渲染
          1.v-if
            写法：1 v-if="表达式"
                  2 v-else-if="表达式"
                  3 v-else="表达式"
            适用于：切换频率较低的场景
            特点：不展示的DOM元素直接移除
            注意：v-if可以和v-else-if，v-else一起使用，但要求结构不能被“打断”
          2.v-show
            写法：v-show="表达式"    
            适用于：切换频率较高的场景
            特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 
          3.备注：使用v-if时元素可能无法获取到，而使用v-show一定可以获取到     
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <!-- 使用v-show做条件渲染 -->
        <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
        <!-- <h2 v-show="1===1">欢迎来到{{name}}</h2> -->

        <!-- 使用v-if做条件渲染 -->
        <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
        <!-- <h2 v-if="1===1">欢迎来到{{name}}</h2> -->

        <!-- v-else和v-else-if -->
        <!-- <div v-if="n===1">a</div>
        <div v-else-if="n===2">b</div>
        <div v-else-if="n===3">c</div>
        <div v-else>哈哈</div> -->

        <!-- v-if和template的配合使用 -->
        <template v-if="n===1">
            <h2>你好</h2>
            <h2>西西歪</h2>
            <h2>广州</h2>
        </template>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪',
                n:0
            }  
        })
    </script>
</body>

</html>

029.列表渲染

<!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>基本列表</title>
    
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-for指令:
          1 用于展示列表数据
          2 语法：v-for="(item,index) in xxx" :key="yyy"  
          3 可遍历：数组，对象，字符串（用的很少），指定次数（用的很少） 
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(item,index) in persons" :key="index">
                {{item.name}}-{{item.age}}
            </li>
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,key) in car" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>
       
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) in 5" :key="index">
                {{number}}-{{index}}
            </li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                persons:[
                    {id:'1',name:'张三',age:'18'},
                    {id:'2',name:'李四',age:'19'},
                    {id:'3',name:'王五',age:'20'}
                ],
                car:{
                    name:'奥迪A8',
                    color:'黑色',
                    price:'70'
                },
                str:'hello'
            }  
        })
    </script>
</body>

</html>

030.key作用与原理

<body>
    <!-- 
        面试题：react、vue中的key有什么作用？（key的内部原理）
           1.虚拟DOM中key的作用：
              key是虚拟DOM对象的标识，当数据发生变化时，vue会根据【新数据】生成【新的虚拟DOM】，
              随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下
           2.对比规则：
              1 旧虚拟DOM中找到与新虚拟DOM相同的key：
                  若虚拟DOM中内容没变，直接使用之前的真实DOM
                  若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉之前的真实DOM
              2 旧虚拟DOM中未找到与新虚拟DOM相同的key：
                  创建新的真实DOM，随后渲染到页面
           3.用作为key可能会引发的问题：
              1 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
                  会产生没有必要真实DOM更新==>界面效果没问题，但效率低
              2 如果结构中海包含输入类的DOM：
                  会产生错误DOM更新==>界面有问题
           4.开发中如何选择key：
              1 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号码、学号等唯一值
              2 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用作展示，
                使用index作为key是没有问题的                    
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(item,index) in persons" :key="index">
                {{item.name}}-{{item.age}}
                <input type="text">
            </li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                persons:[
                    {id:'001',name:'张三',age:'18'},
                    {id:'002',name:'李四',age:'19'},
                    {id:'003',name:'王五',age:'20'}
                ]
            },
            methods: {
                add(){
                    const item ={id:'004',name:'老刘',age:'30'}
                    // unshift()向数组开头添加一个元素
                    this.persons.unshift(item)
                }
            },  
        })
    </script>
</body>

031.列表过滤

<!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>列表过滤</title>
    
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
                            
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(item,index) in filPersons" :key="index">
                {{item.name}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 用watch实现
       /*  const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:'18',sex:'女'},
                    {id:'002',name:'周冬雨',age:'19',sex:'女'},
                    {id:'003',name:'周杰伦',age:'20',sex:'男'},
                    {id:'004',name:'温兆伦',age:'21',sex:'男'}
                ],
                filPersons:[]
            },
            watch:{
                keyWord:{
                    // 字符串里包含空字符串，当一开始就监视时输入框没有值，所以为空字符串，也就显示了全部列表数据
                    immediate:true,
                    handler(val){
                        // filter 过滤数组返回新数组，不影响旧数组
                        this.filPersons=this.persons.filter(item=>{
                            // indexOf 判定一个字符串里是否包含指定字符，不包含返回-1，包含返回索引
                            return item.name.indexOf(val) !== -1
                        })
                    }                 
                }
            }
        }) */

        // 用computed实现
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:'18',sex:'女'},
                    {id:'002',name:'周冬雨',age:'19',sex:'女'},
                    {id:'003',name:'周杰伦',age:'20',sex:'男'},
                    {id:'004',name:'温兆伦',age:'21',sex:'男'}
                ]
            },
            computed:{
                filPersons(){
                     // 计算属性初次读取时会执行一次，当keyWord改变时再次调用
                    // filter 过滤数组返回新数组，不影响旧数组
                    return this.persons.filter(item=>{
                        // indexOf 判定一个字符串里是否包含指定字符，不包含返回-1，包含返回索引
                        return item.name.indexOf(this.keyWord) !== -1
                   })                                   
                }
            }
        })
    </script>
</body>

</html>

032.列表排序

<!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>列表排序</title>
    
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
                            
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <ul>
            <li v-for="(item,index) in filPersons" :key="item.id">
                {{item.name}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:'32',sex:'女'},
                    {id:'002',name:'周冬雨',age:'19',sex:'女'},
                    {id:'003',name:'周杰伦',age:'42',sex:'男'},
                    {id:'004',name:'温兆伦',age:'40',sex:'男'}
                ],
                sortType:0 // 0原顺序，1降序，2升序
            },
            computed:{
                filPersons(){
                    // 计算属性初次读取时会执行一次，当keyWord改变时再次调用
                    // filter 过滤数组返回新数组，不影响旧数组
                    const arr = this.persons.filter(item=>{
                        // indexOf 判定一个字符串里是否包含指定字符，不包含返回-1，包含返回索引
                        return item.name.indexOf(this.keyWord) !== -1
                   })  
                    //  判断一下是否需要排序，0布尔值false
                    if(this.sortType){
                        // sort(a,b)排序函数，a-b表示升序，b-a表示降序,a和b是传入的两个形参
                        arr.sort((item1,item2)=>{
                            return this.sortType===1? item2.age-item1.age : item1.age-item2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>

</html>

033.更新时的一个问题

<body>
    <!-- 
                            
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click="updateMei">更新马冬梅的信息</button>
        <ul>
            <li v-for="(item,index) in persons" :key="item.id">
                {{item.name}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                persons:[
                    {id:'001',name:'马冬梅',age:'32',sex:'女'},
                    {id:'002',name:'周冬雨',age:'19',sex:'女'},
                    {id:'003',name:'周杰伦',age:'42',sex:'男'},
                    {id:'004',name:'温兆伦',age:'40',sex:'男'}
                ]
            },
            methods: {
                updateMei(){
                    // 这样改奏效
                    // this.persons[0].name='马老师'
                    // this.persons[0].age='69'
                    // this.persons[0].sex='男'
                    // 这样改Vue监测不到数据改变,但数据改了
                    this.persons[0]={id:'001',name:'马老师',age:'69',sex:'男'}
                }
            },
        })
    </script>
</body>

034.Vue监测数据的原理_对象

035.Vue.set()方法

<!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>Vue.set()方法</title>
    
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
                            
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称:{{school.name}}</h2>
        <h2>学校地址:{{school.address}}</h2>
        <h2 v-if="school.leader">校长是:{{school.leader}}</h2>
        <button @click="addLeader">添加项目</button>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                school:{
                    name:'西西歪',
                    address:'广州'
                }
            },
            methods: {
                addLeader(){
                    Vue.set(this.school,'leader','大帅哥')
                    // this.$set(this.school,'leader','大帅哥')
                }
            },
        })
    </script>
</body>

</html>

036.Vue监测数据的原理_数组

<!-- 
         如何监测数组中的数据：通过包裹数组更新元素的方法实现，本质就是做了两件事
             1 调用原生对应的方法对数组进行更新
             2 重新解析模板，进而更新页面

        能修改数组的方法：
           在数组最后位置新增元素使用 push(新增的值)                       
           在数组最后位置删除元素使用 pop()                       
           在数组第一个位置删除元素使用 shift()                       
           在数组第一个位置新增元素使用 unshift(新增的值)                       
           在数组指定位置插入、删除或替换某个元素使用 splice(索引，删除数量，切换的新值)                       
           在数组进行排序使用 sort()                       
           反转数组使用 reverse()

        不响应数组改变：（使用此方法要把过滤出来的新数组替换原来的数组） 
           过滤数组使用 filter()
    -->

037.总结Vue监视数据

<!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>总结Vue监视数据</title>
    
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
         Vue监视数据的原理：
          1.vue会监视data中所有层次的数据
          2.如何监测对象中的数据：通过setter实现监视，且要在new Vue时就传入要监测的数据
            1 对象中后追加的属性，vue中默认不做响应式处理
            2 如需给后添加的属性做响应式，请使用如下API：   
              Vue.set(target,propertyName/index,value) 或               
              vm.$set(target,propertyName/index,value)  
          3.如何监测数组中的数据：通过包裹数组更新元素的方法实现，本质就是做了两件事
             1 调用原生对应的方法对数组进行更新
             2 重新解析模板，进而更新页面
          4.在vue修改数组中的某个元素一定要用如下方法：
             1 使用这些API：push(),shift(),unshift(),splice(),sort(),reverse()
             2 Vue.set(),vm.$set()       
          特别注意：Vue.set()和vm.$set() 不能给vm或vm的根数据对象（vm._data）添加属性                 
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1</button>
        <button @click="addSex">添加性别属性，默认值：男</button>
        <button @click="student.sex='未知'">修改性别</button>
        <button @click="addFriend">在列表首位添加一个朋友</button><br/><br/>
        <button @click="updateFirsendName">修改第一个朋友名为：张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为：开车</button>
        <button @click="removeSmoke">过滤掉爱好中的抽烟</button>
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f}}
            </li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                student:{
                    name:'tom',
                    age:18,
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:15},
                        {name:'tony',age:20}
                    ]
                }
            },
            methods: {
                addSex(){
                    Vue.set(this.student,'sex','男')
                    // this.$set(this.student,'sex','男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'jack',age:'25'})
                },
                updateFirsendName(){
                    this.student.friends[0].name='张三'
                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                updateHobby(){
                    // Vue.set(this.student.hobby,0,'开车')
                    this.student.hobby.splice(0,1,'开车')
                },
                removeSmoke(){
                    this.student.hobby=this.student.hobby.filter(h=>{
                        return h !== '抽烟'
                    })
                }
            },
        })
    </script>
</body>

</html>