vue的基础语法中有六大类指令，分别为：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令、列表渲染指令
1.内容渲染指令：常用的有三个
v-text:直接跟在元素后面，例如<p v-text="username"></p>，username是指参数，需要在vue实例中data中定义。这个指令有一个缺点，如果p标签中有内容，但在vue实例中又定义了，就会将原来的内容覆盖
{{ }}: 插值表达式，在实际开发中运用最多，它是一个内容占位符，不会覆盖原有拥有的内容，用法<p>{{ username }}</p>
v-html: 由于v-text和{{ }}只能渲染纯文本内容，故引出了v-html，当需要渲染的内容包含HTML标签时，只能通过v-html渲染，用法<p v-html>'<h4>这是一个内容渲染</h4>'</p>可以渲染出h4中的内容
2.属性绑定指令：v-bind，用在属性节点上
用法：<img v-bind:src="../../">
简写：<img :src="../../">
3.事件绑定指令：v-on
用法:
<button v-on:click="add"> </button>
//可以简写成
<button @click="add> </button>
//需要在vue实例中添加methods方法，例如
methods:{
add: function(){ //也可以简写成add(){}
}
}
事件修饰符(常用)：
.prevent : 阻止默认行为
.stop : 阻止事件冒泡
用法：事件.prevent或事件.stop
4.双向数据绑定：v-model
①它用来辅助开发者在不操作DOM前提下，快速获取表单的数据
②它是双向绑定的，页面数据改动会同步到数据源，反之也可以，而单向绑定只能通过改变数据源来同步更新页面中的数据
③修饰符： v-model.number 这样在改变数据试可以保证修改的值会一直是数字型
v-model.trim 自动过滤用户输入的首尾空的字符
v-model.lazy 只有在页面修改完成时，失去焦点后，才会更新数据源中的数据
5.条件渲染指令：v-if v-show
两者区别：
v-if:每次都会移除或增加元素，当值为true时，增加元素，为false时，会将整个标签元素删除
v-show：不会将标签元素删除，当值为true时，在标签中增添一个display:block属性，为false时，在标签中增添一个display:none属性
v-if可以配合v-else-if、v-else一起使用
6.列表渲染指令：v-for
用法：
item表示变量，list代表数组 <div v-for="(item,index) in list" :key="item,id"></div>
可以有第二个参数，代表一个索引值，具体用法可以参考下面：
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>Id</th>
<th>姓名</th>
</thead>
<tbody>
<!-- 官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性 -->
<!-- 而且，尽量把 id 作为 key 的值 -->
<!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 -->
<!-- key 的值是千万不能重复的，否则会终端报错：Duplicate keys detected -->
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '张三' },
]
}
})
</script>
其中有一个key属性：
①key的值只能是字符串或数字类型
②key的值必须具有唯一性
③使用v-for时建议带上key的值
