Vue(三)

绑定样式：

1. class样式
   写法 :class=“xxx” xxx可以是字符串、对象、数组。
   （1）字符串写法适用于：类名不确定，要动态获取。
   （2）数组写法适用于：要绑定的样式个数不确定、名字也不确定。
   （3）对象写法适用于：绑定的样式个数确定、名字也确定，但要动态决定用不用。
2. style样式
   （1）:style="{fontSize: xxx}“其中xxx是动态值。
   （2）:style=”[a,b]"其中a、b是样式对象。

例子

<div id="app">
        <!-- 字符串写法适用于：类名不确定，要动态获取。 -->
        <!-- <div class="basic" :class="mood">{{name}}</div> -->

        <!-- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 -->
        <!-- <div class="basic" :class="classArr">{{name}}</div> -->

        <!-- 对象写法适用于：绑定的样式个数确定、名字也确定，但要动态决定用不用。 -->
        <!-- <div class="basic" :class="classObj">{{name}}</div> -->

        <!-- 绑定style样式--对象写法 -->
        <!-- <div class="basic" :style="styleObj">{{name}}</div> -->

        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>

    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#app',
            data: {
                name: 'iNuist',
                mood: 'normal',
                classArr: ['test1', 'test2', 'test3'],
                classObj: {
                    test1: true,
                    test2: false
                },
                styleObj: {
                    fontSize: '40px'  //必须是小驼峰命名法
                },
                styleArr: [
                    {
                        fontSize: '40px'  //必须是小驼峰命名法
                    },

                    {
                        backgroundColor: 'green'  //必须是小驼峰命名法
                    }
                ]
            }
        })

条件渲染 v-if 、v-show

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.PS：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

例子

<div id="app">
        <h2>n的值: {{n}}</h2>
        <button @click="n++">点击n+1</button>

        <!-- <h2 v-show="n === 1">html5</h2>
        <h2 v-show="n === 2">css3</h2>
        <h2 v-show="n === 3">javascript</h2> -->
            
        <!-- <h2 v-if="n === 1">html5</h2>
        <h2 v-if="n === 2">css3</h2>
        <h2 v-if="n === 3">javascript</h2> -->

        <!-- v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 -->
        <!-- <h2 v-if="n === 1">html5</h2>
        <h2 v-else-if="n === 2">css3</h2>
        <h2 v-else-if="n === 3">javascript</h2>
        <h2 v-else>test</h2> -->

        <!--template只能与v-if配合使用  这样可以不用外面加一层div而破坏dom结构，也可以做到一次性条件渲染-->
        <template v-if="n === 1"> 
            <h2>html5</h2>
            <h2>css3</h2>
            <h2>javascript</h2>   
        </template>
    </div>

    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#app',
            data: {
                n: 0
            }
        })
    </script>

key的原理

react、vue中的key有什么作用？（key的内部原理）
1 虚拟DOM中key的作用：
①.key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
②.随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。

2 用index作为key可能会引发的问题：
① 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

②如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。

3 开发中如何选择key?:
①.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
②.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

图解：

列表渲染

v-for指令:
1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象

例子

<div id="app">
        <ul>
            <!-- 数组 -->
            <!-- <li v-for="(p, index) of persons">
                {{p.name}} - {{p.age}}
            </li> -->

            <!-- 对象 -->
            <li v-for="(value, key) of car">
                {{key}} - {{value}}
            </li> 
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#app',
            data: {
                persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],

                car:{
                    name:'奥迪A8',
                    price:'70万',
                    color:'黑色'
                },
            }
        })