Vue中基础知识

215 阅读1分钟

Vue中基础知识

1、双花括号 mustache(胡子)/interpolation(插值表达式)

语法:
<any>{{表达式}}</any>
作用:
将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图

2、指令-循环指令 基本语法1: 基本语法2:

作用:
在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签

3、指令-选择指令 语法: 作用: 根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树

4、指令-事件绑定 语法: 作用: 给指定的元素 将handleEvent的方法绑定给指定eventName事件

5、指令-属性绑定 基本语法: 补充,支持简写: 作用: 将表达式执行的结果 绑定 到当前元素的myProp属性

<img v-bind:src="'img/'+myImg" alt="">

动态样式绑定

动态样式绑定

动态样式类绑定

动态样式类的绑定

6、指令-双向数据绑定 方向1:数据绑定到视图 方向2:将视图中(表单元素)用户操作的结果绑定到数据

基本语法:
  <表单元素 v-model="变量">
  </表单元素>