(Vue)vue基础语法

2018-10-19  本文已影响0人  rightmost

1、双花括号

    mustache(胡子)/interpolation(插值表达式)

    语法:

    <any>{{表达式}}</any>

    作用:

    将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图

2、指令-循环指令

    基本语法1:

    <any v-for="tmp in array"></any>

    基本语法2:

    <any v-for="(value,index) in array"></any>

    作用:

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

3、指令-选择指令

    语法:

      <any v-if="表达式"></any>

      <any v-else-if="表达式"></any>

      <any v-else="表达式"></any>

    作用:

      根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树

4、指令-事件绑定

    语法:

        <any v-on:eventName="handleEvent"></any>

    作用:

        给指定的元素 将handleEvent的方法绑定给指定eventName事件

5、指令-属性绑定

  基本语法:

    <any v-bind:myProp="表达式"></any>

    补充,支持简写:

    <any :myProp="表达式"></any>

  作用:

    将表达式执行的结果 绑定 到当前元素的myProp属性

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

  动态样式绑定

    <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

  动态样式类绑定

      <h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定

    方向1:数据绑定到视图

    方向2:将视图中(表单元素)用户操作的结果绑定到数据

    基本语法:

      <表单元素 v-model="变量">

      </表单元素>

上一篇 下一篇

猜你喜欢

热点阅读