欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一、VUE基础回顾1

程序员文章站 2024-03-30 23:16:39
1.v-if和v-show v-if 和v-show都可以显示和隐藏元素; 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制DOM元素是否插入,v-show是控制css的display属性 (3)v-if适合隐藏尚未加载的内 ......

1.v-if和v-show

  v-if 和v-show都可以显示和隐藏元素;
 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染
    (2)v-if是控制dom元素是否插入,v-show是控制css的display属性
    (3)v-if适合隐藏尚未加载的内容或切换显示与隐藏频率较低的地方,v-show反之;

  此外还有两个条件语句和v-if有关:v-else-if ,v-else

1 <div v-if="state==='loading'">加载中。。。</div>
2 <div v-else-if="state==='errr'">出错了。。。</div>
3 <div v-else>我的内容</div>

  当根据state的值显示不同的内容

2.v-for循环

  直接看示例:

<ul>
      <li v-for="(item,index) in state " :key="item.index">{{item.content}}</li>
</ul>

  该指令可遍历对象也可遍历数组,key为li的唯一标识符,可保证高效渲染,还可以保证标签顺序不会错乱;

3.v-bind属性绑定,简写 “ : ”

  示例   

<button :type="test"></button>

  该指令可以接收参数,用于将一个值绑定到一个html的属性上。上例为button的type参数绑定了一个变量test,该值在data中可以为任何button类型,这个指令对于disabled和checked同样有效,就看为false还是true,判定是否生效

4.v-on事件绑定,简写 '@事件名'

  该指令将事件绑定到元素上,将事件名称作为参数,将事件侦听器作为传入值 

<button v-on:click="counter++"></button>
    <!-- 按钮单击counter的值加1 -->
    <button v-on:click="counter"></button>
    <!-- counter也可以作为方法名,调用执行该函数,如果加()可在其中传递参数 -->

  事件修饰符

    可以根据事件修饰符来修改事件侦听器或者事件本身   例 @click.self

      阻止执行事件的默认行为  .prevent修饰符   例如阻止a标签的默认跳转
      阻止事件继续传播,避免在父级元素触发   .stop
      只让事件执行一次   .once 

      事件捕获,事件会传递到当前元素的下级元素前触发(而在冒泡模式中,事件会先在当前元素上触发,然后向上冒泡)  .captrue
      只让事件在当前元素触发,而不是在子元素上   .self

      也可以只设置事件名+修饰符,修饰符可以进行链式操作  例如该例子会阻止单击事件沿dom树向下传递,并且只有触发第一次有效,@click.stop.captrue.once

  绑定键盘事件  @keyup,按下会触发事件,@keyup(test) 在test函数中可以接收参数e,e为键盘上的任何按钮代表的值,强大的vue给我们了修饰符,修饰符可以作为按键值作为修饰符@keyup.27代表esc键,也为常用的按钮提供别名.enter,.tab等等

      .exact可以指定按键触发 @keydow.enter.exact  只有enter件可触发