关闭

vue基础语法笔记

来源:网络 文章列表 2019-06-10 8
1、双花括号     mustache(胡子)/interpolation(插值表达式)     语法:     {{表达式}}     作用:     将表达式执行的结果 输出当调用

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只会阻止自己身上冒泡,并不会组织其他

 

阿里云618优惠卷大放送

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论