属性绑定
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，相当于这个这个容器拥有了一个身份证一样，浏览器就会按照改变顺序将需要进行改变的容器调换位置，节省了很多的没有必要的开销。
