Vue基础2

监视属性(深度监视）

绑定样式(绑定class样式，style样式)

条件渲染

列表渲染

监视属性watch：

1.当监视属性变化时，回调函数自动调用，进行相关操作

2.监视属性必须存在，才能进行监视

3.监视属性的两种写法：

1）new Vue时传入watch配置

2）通过vm.$watch监视

<script src="../js/vue.js"></script>
    <div id="app">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot=!isHot">切换天气</button>
        <!--当click里的语句过于简单也可直接写在里面,不用methods-->
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false//阻止vue在启动时生成生产提示
        const vm=new Vue({
            el:"#app",
            data:{
              isHot:true
            },
            computed:{
                 info(){
                    return this.isHot?"炎热":"凉爽"
                 }
            },
           // watch:{
           //     isHot:{
            //        immediate:true,//初始时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时
                 //   handler(newValue,oldValue){
                  //      console.log("isHot被修改了",newValue,oldValue);
                 //   }

             //   }

           // }
        })
        vm.$watch("isHot",{
            immediate:true,//初始时让handler调用一下
                   //handler什么时候调用？当isHot发生改变时
                     handler(newValue,oldValue){
                      console.log("isHot被修改了",newValue,oldValue);
                     }
             
         })
   
    </script>

深度监视：

1.Vue中的watch默认不监测对象内部值的改变(一层）

2.配置deep:true可以监测对象内部值改变(多层）

备注：

1）Vue自身可以监测对象内部值改变，但Vue提供的watch默认不可以

2）使用watch时根据数据的具体结构，决定是否采用深度监视

当不用到immediate时 ：

idHot:{

handle(newValue,oldValue){

}

}

简写：

isHot(newValue,oldValue){

}

vm.$eatch("isHot",function(newValue,oldValue){

})

computed和watch之间的区别：

1.computed能完成的功能，watch都能实现

2.watch能完成的功能，computed不一定能完成

两个重要的小原则：

1.被vue管理的函数最好写成普通函数，这样this的指向才是vm或者组件实例对象

2.所有不被vue管理的函数(定时器的回调函数，ajax的回调函数，promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或者组件实例对象

---

绑定样式：

绑定class样式，字符串写法，适用于：样式的类名不确定，需要动态指定

 

 

绑定style样式：

绑定样式：

1.class样式：

写法：  :class=”xxx" xxx可以是字符串、对象、数组

字符串写法适用于：类名不确定，要动态获取

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

2.style样式：

:style="{fontSize:xxx}"其中xxx是动态值

:style="[a,b]"其中a、b是样式对象

---

条件渲染：

1.v-if

写法：v-if="表达式",v-else-if="表达式",v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的dom元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要注意配对

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的dom未被移除，仅仅是使用display:none样式隐藏掉

备注：使用v-if时，元素可能无法获取，使用v-show一定可以获取元素

 配合使用一下子可以操作好几个dom的显示或者隐藏

---

列表渲染

v-for指令：

1.用于展示列表数据

2.语法：v-for="(value,index) of xxx" :key="yyy"

3.常常遍历数组、对象

<div id="root">
        <h2>人员列表</h2>
        <!-- 遍历数组 -->
        <ul >
            <li v-for="p in persons" :key="p.id">
                <!-- 也可以v-for="(value,index) of persons" :key="index"这是用索引标记，默认是索引 -->
                {{p.name}}--{{p.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) in car" :key="k">
                <!-- k是键(key) -->
                {{k}}--{{value}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001",name:"张三",age:"18"},
                    {id:"002",name:"李四",age:"19"},
                    {id:"003",name:"王五",age:"20"}
                ],
                car:{
                    name:"奥迪A8",
                    price:"70万",
                    color:"黑色"
                }
            }
        })
</script>

key的原理：key是唯一的

 虚拟dom对比时，对比相同的key，张三和老刘不一样，采用老刘，文本框一样，直接把之前生成的拿过来，不自己另外生成，所以是张三的信息，于是发生了错乱

 id作为key时，新旧数据相同id的是它本身，所以信息在虚拟dom对比时拿到的还是原来的数据，不会发生错乱，新增添的数据会生成属于自己的信息，不会把之前生成的拿过来当自己的

面试题: 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.用index作为key可能会引发的问题:

①若对数据进行:逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。

②如果结构中还包含输入类的DOM:

会产生错误DOM更新==> 界面有问题。

4.开发中如何选择key?:

1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

列表过滤：

方法1，计算属性

<body>
    <div id="root">
        <input type="text" placeholder="输入姓名" v-model="keyWord">
        <ul>
            <li v-for="p in filPersons" :k="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
new Vue({
    el:"#root",
    data:{
        persons:[
            {id:"001",name:"马冬梅",age:19,sex:"女"},
            {id:"002",name:"周冬雨",age:20,sex:"女"},
            {id:"003",name:"周杰伦",age:21,sex:"男"},
            {id:"004",name:"温兆伦",age:22,sex:"男"}
        ],
        keyWord:"",
    },
    computed: {
        filPersons(){
            return this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord)!==-1//包含为0，不包含为-1
            })
        } 
    },
})
</script>

 方法2，监视属性

<body>
    <div id="root">
        <input type="text" placeholder="输入姓名" v-model="keyWord">
        <ul>
            <li v-for="p in filPersons" :k="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
new Vue({
    el:"#root",
    data:{
        persons:[
            {id:"001",name:"马冬梅",age:19,sex:"女"},
            {id:"002",name:"周冬雨",age:20,sex:"女"},
            {id:"003",name:"周杰伦",age:21,sex:"男"},
            {id:"004",name:"温兆伦",age:22,sex:"男"}
        ],
        keyWord:"",
        filPersons:[]
    },
    watch:{
        keyWord:{
            immediate:true,
            handler(val){
                this.filPersons=this.persons.filter((p)=>{
              return p.name.indexOf(val)!==-1
            })
        }
    }
}
})
</script>

 列表排序：

<body>
    <div id="root">
        <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="p in filPersons" :k="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
new Vue({
    el:"#root",
    data:{
        persons:[
            {id:"001",name:"马冬梅",age:19,sex:"女"},
            {id:"002",name:"周冬雨",age:20,sex:"女"},
            {id:"003",name:"周杰伦",age:21,sex:"男"},
            {id:"004",name:"温兆伦",age:22,sex:"男"}
        ],
        keyWord:"",
        sortType:0//0原顺序，1降序，2升序
    },
    computed: {
        filPersons(){
            const arr= this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord)!==-1//包含为0，不包含为-1
            })
            //判断是否需要排序
            if(this.sortType){
                arr.sort((p1,p2)=>{
                    return this.sortType===1?p2.age-p1.age:p1.age-p2.age
                })
            }
            return arr
        } 
    },
})
</script>

---