vue声明式渲染、条件与循环、事件绑定、双向绑定

一、声明式渲染

1、声明式渲染是vue对数据进行操作的模式,也叫做响应式渲染。
2、声明式渲染的两种方式:
(1)文本插值
HTML: vue声明式渲染、条件与循环、事件绑定、双向绑定
JS:
vue声明式渲染、条件与循环、事件绑定、双向绑定
(2)绑定元素 attribute(这里v-bind attribute 被称为指令,意思是将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致)
HTML:
vue声明式渲染、条件与循环、事件绑定、双向绑定
JS:
vue声明式渲染、条件与循环、事件绑定、双向绑定

二、条件与循环

1、条件判断(v-if)
例如:

vue声明式渲染、条件与循环、事件绑定、双向绑定
vue声明式渲染、条件与循环、事件绑定、双向绑定
v-if 指令是判断表达式 seen 的值为true 或 false 。
如果为turn则显示文本内容上例中是(“现在你看到我了”),如果是false则不显示文本内容。
2、循环(v-for)
例如:
vue声明式渲染、条件与循环、事件绑定、双向绑定
vue声明式渲染、条件与循环、事件绑定、双向绑定
运行结果将会是
vue声明式渲染、条件与循环、事件绑定、双向绑定

三、事件绑定(v-on:click)
  • 这里的v-on:click可以简写成@click。
    vue声明式渲染、条件与循环、事件绑定、双向绑定
    vue声明式渲染、条件与循环、事件绑定、双向绑定
四、双向绑定(v-model)
  • v-bind实现了数据的单向绑定,将vue实例中的数据同元素属性值进行绑定,如果要跟数据进行双向绑定我们就需要用到v-model。
    基本用法:
    vue声明式渲染、条件与循环、事件绑定、双向绑定