一、VUE基础回顾1

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

 <div v-if="state==='loading'">加载中。。。</div>

 <div v-else-if="state==='errr'">出错了。。。</div>

 <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件可触发

巴特西

一、VUE基础回顾1

最新文章

热门文章