vue3的学习（2）

属性绑定

1.将一个容器中的class和id使用vue用法赋上具体的值，这样就可以动态的给容器添加上自己想要给其添加的class或者id或者title。

2.关键语法，在容器中的class或者id或者title前面加上 "v-bind:"，当加上"v-bind关键语法字时"后面的class="..."就可以识别到具体的值。

实例：

<template>
    <h3>属性绑定</h3>
    <div v-bind:class="msg">属性绑定的标签</div>
    <div v-bind = "objectMsg">将这个div中的v-bind直接设置成一个对象，那么这个div可以同时含有两个属性的标签，实现了代码的复用性</div>
</template>

<script>
    export default{
        data(){
        return{
                msg:"is",
                objectMsg:{
                    msg:"is",
                    class:"art"
                }
            }
        }
    }
</script>

在浏览器中的显示

可以看到在div内容为“属性绑定的标签”中的idv标签中的class等于"is"而不是msg。
 

3.在一个标签可以使用一个类似对象的形式给一个标签添加class和id的属性值，具体效果可以上面的图中看到，div内容为:
"将这个div中的v-bind直接设置成一个对象，那么这个div可以同时含有两个属性的标签，实现了代码的复用性",

在浏览器中的元素显示的也是class和id意义对应上了。

4.还需要注意的一点就是当我们给一个表加上一个class或者id或者title为null或者undefined的时候这个标签就会显示不出来（准确来说是这个标签没有进行渲染 或者 可以说根本就没有生成），所以在我们书写属性绑定的时候要尽量避免这个问题。

列表渲染（我感觉更加是像在教我们使用for循环进行书写）

基础

关键语法：

v-for="item of result"

翻译一下：迭代集合result中的每一个元素item（这个item可以能是一个对象，如果是一个对象就直接使用"."的形式来获取其中的值）。
 

实例：
 

<template>
    <h3>列表渲染（其实就是相当一个循环的学习）</h3>
    <p v-for="item of name">{{ item }}</p>
    <h3>————————</h3>
    <div v-for="item of result">
        <p >{{ item.id }}</p>
        <p >{{ item.name }}</p>
    </div>
    <h3>—————————</h3>
    <p v-for="(value, key, index) of userInformation">{{ value }} - {{ key }} - {{ index }}</p>
</template>

<script>
    export default{
        data(){
            return {
                name:["关岁安","刘欣","郑美玲"],
                result:[
                    {
                        id:"1",
                        name:"关岁安"
                    },
                    {
                        id:"2",
                        name:"刘欣"
                    },
                    {
                        id:"3",
                        name:"郑美玲"
                    }
                ],
                userInformation:{
                    name:"关岁安",
                    age:"21",
                    school:"吉首大学"
                }
            }
        }
    }
</script>

先看第一个迭代器，他会生成三个p标签，每个标签中放的是name集合中的item元素，name集合有多少个元素就会生成多少个p标签。

效果如下:

然后看到第二个迭代器，我们使用div标签来实现迭代。
具体步骤如下：程序会通过result来生成相应个数的div容器，同时也会生成div容器中的子元素，迭代到哪一个result中的元素的时候，我们就可以通过"."的形式来获取这个对象中集体的元素，然后放到对应的标签中，数据就渲染到这个标签中。

效果如下：

接下来看到第三个迭代器，这个例子主要是为了知道，在每一个集合中的子元素可以有三个参数，第一个是value就是具体的值，key就是我们通过"."来取到的对应的键，第三个就是这个元素在集合中的位置。

效果如下：

通过key来管理状态

关键语法：":key="speciaId"给每一个最顶级的父标签加上这个key来确保这个容器有key。

为什么要使用key? 在没有使用key如果集合中的元素的顺序发生改变，浏览器就会重新按照改变的顺序进行一次加载渲染，这样十分的浪费资源。如果加上key，相当于这个这个容器拥有了一个身份证一样，浏览器就会按照改变顺序将需要进行改变的容器调换位置，节省了很多的没有必要的开销。