一、逻辑相关 v-if
我们可以通过v-if、v-else-if、v-else来对页面元素的条件进行判断输出
Title
hhh
jjj
{{message3}}
效果如图：
image.png
二、循环遍历：v-for指令
我们可以使用v-for指令来遍历得到vue实例中data属性的值
Title
- {{student.name}}的年龄是：{{student.age}}岁
效果如图：
image.png
需要注意的点：
1. 创建数组对象时，格式为 [ {对象1} ， {对象2} ，{对象3} ...]
2. 我们还可以在v-for指令中拿到当前item的索引：
- {{index + 1}} {{student.name}}的年龄是：{{student.age}}岁
// 注意，index默认从0开始取值
结果如图：
image.png
三、v-show指令
我们可以通过v-show指令来控制某个元素的显示和隐藏
Title
小米是个大帅比
点击前：
image.png
点击后：
image.png
补充：v-show控制元素是否显示，实质上是通过元素的display属性的修改来进行修正
当不显示时，display属性的值为：none
image.png
四、事件绑定：v-on指令
v-on用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器
- 语法：v-on:click="say" or v-on:click="say('参数', $event)"
- 简写：@click="say"
- 说明：绑定的事件从methods中获取
- 修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
Title
效果如图：
image.png
五、v-text和v-html
我们可以通过v-text和v-html两个指令来实现对vue对象文本内容的获取，二者的区别在于使用v-html指令可以动态的渲染文本中的html元素，而v-text指令只会将内容识别为文本
Title
{{message}}
效果如图：
image.png
六、属性绑定：v-bind
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
Title
效果如图：
image.png
当然啦，更多的时候，我们是使用v-bind来绑定我们的组件，进行值的传递~
七、数据的双向绑定：v-model
v-model 指令在表单 、