vue基础语法笔记

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="变量">

      </表单元素>

7、使用stop属性阻止冒泡 

<div class="inner" @click="div1Handler"> 
  <input type="button" value="点击" @click.stop="btnHandler"> 
</div>

8、vue阻止默认事件

<a href="http://www.baidu.com" @click.prevent="link">有问题，去百度</a>

使用.capture 捕获事件顺序，.self只会阻止自己身上冒泡，并不会组织其他