携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
一.vue的常用指令
1.v-bind：
如何让html元素的属性绑定Vue实例管理的数据，通过v-bind:指令
<input type="text" v-bind:value="name">
v-bind:也可以简写为:
<input type="text" :value="name">
v-model：用于实现对数据的双向绑定，所谓双向绑定，指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。
<input type="text" v-model="name">
2.v-on:如果方法的逻辑处理比较简单，可以直接将代码写在行内
如何让html元素的事件绑定Vue实例管理的方法，通过v-on:指令
<button v-on:click="changname">点我姓名变成菜虚坤</button>
v-on:简写成@
<button @click="age++">点我年龄＋1</button>
3.v-if和v-show
<button @click="clicks">点击显示/隐藏{{x}}</button>
v-if指令用于条件渲染，表达式返回true，显示元素；否则不显示元素
<div v-if="isShow" class="text">v-if</div>
v-show指令也是用于条件渲染，表达式返回true，显示元素；否则不显示元素。
<div v-show="isShow" class="text">v-show</div>
注意：v-if指令的作用是
1.根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态
3.表达式的值为true,元素存在于dom树中，为false,从dom树中移除
v-show的表达式返回true，元素正常生成，通过display样式去控制显示和隐藏。
所以，如果元素需要反复切换显示和隐藏使用v-show；如果只是页面加载是判断是否显示使用v-if。
4 v-if，v-else-if，v-else可以组成多重判断结构。注意：中间不能有断层,必须连在一起写
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好:{{score}}</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>
5.v-for:
v-for指令，用于循环列表。
语法：v-for="(每一项,索引) in 数组"，渲染列表时，为了提高渲染性能，通常都要绑定一个key。key一定要是唯一值。 key绑定的值最好使用id
<ul>
<li v-for="(item,index) in goodses" :key="item.id">
{{item.id}}--{{item.name}}--{{item.price}}
</li>
</ul>
