微信号:CyuyanAn

介绍:C语言C++;JAVA安卓系统软件编程,C语言编译器,C语言函数手册,C语言编程技巧,C语言视频教学,C语言考试,C语言软件开发设计,

vue 指令基本使用大全

2017-10-13 18:44 张双艳

指令

  • 解释:指令 (Directives) 是带有 v- 前缀的特殊属性

  • 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

常用指令

  • v-text

  • v-html

  • v-bind

v-text

  • 解释:更新元素的 textContent

<h1 v-text="msg"></h1>

v-html

  • 解释:更新元素的 innerHTML

<h1 v-html="msg"></h1>

v-bind

  • 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

  • 语法:v-bind:title="msg"

  • 简写::title="msg"

<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a><script>    // 2 创建 Vue 的实例对象    var vm = new Vue({      // el 用来指定vue挂载到页面中的元素,值是:选择器      // 理解:用来指定vue管理的HTML区域      el: '#app',      // 数据对象,用来给视图中提供数据的      data: {        url: 'http:www.baidu.com'      }    })  </script>

v-on

  • 作用:绑定事件

  • 语法:v-on:click="say" or v-on:click="say('参数', $event)"

  • 简写:@click="say"

  • 说明:绑定的事件从methods中获取

<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a><!-- 方法传参 --><a @click="doSomething(“123”)"></a>

 <script>    // 2 创建 Vue 的实例对象    var vm = new Vue({      el: '#app',      // methods属性用来给vue实例提供方法(事件)      methods: {        doSomething: function(str) {          //接受参数,并输出          console.log(str);        }      }    })  </script>

事件修饰符

  • .stop 阻止冒泡,调用 event.stopPropagation()

  • .prevent 阻止默认事件,调用 event.preventDefault()

  • .capture 添加事件侦听器时使用事件捕获模式

  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调

  • .once 事件只触发一次

v-model

  • 作用:在表单元素上创建双向数据绑定

  • 说明:监听用户的输入事件以更新数据

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

v-for

  • 作用:基于源数据多次渲染元素或模板块

<!-- 1 基础用法 --><div v-for="item in items">  {{ item.text }}</div><!-- item 为当前项,index 为索引 --><p v-for="(item, index) in list">{{item}} -- {{index}}</p><!-- item 为值,key 为键,index 为索引 --><p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p><p v-for="item in 10">{{item}}</p>

key属性

  • 推荐:使用 v-for 的时候提供 key 属性,以获得性能提升。

  • 说明:使用 key,VUE会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

<div v-for="item in items" :key="item.id">
  <!-- 内容 --></div>

样式处理 -class和style

  • 说明:这两个都是HTML元素的属性,使用v-bind,只需要通过表达式计算出字符串结果即可

  • 表达式的类型:字符串、数组、对象

  • 语法:

<!-- 1 --><div v-bind:class="{ active: true }"></div> ===><div class="active"></div><!-- 2 --><div :class="['active', 'text-danger']"></div> ===><div class="active text-danger"></div><!-- 3 --><div v-bind:class="[{ active: true }, errorClass]"></div> ===><div class="active text-danger"></div>--- style ---<!-- 1 --><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><!-- 2 将多个 样式对象 应用到一个元素上--><div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

  • 条件渲染

  • v-if:根据表达式的值的真假条件,销毁或重建元素

  • v-show:根据表达式之真假值,切换元素的 display CSS 属性

提升用户体验:v-cloak

  • 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  • 防止刷新页面,网速慢的情况下出现{{ message }}等数据格式

<div v-cloak>  {{ message }}</div>

提升性能:v-pre

  • 说明:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

提升性能:v-once

  • 说明:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>


 
C语言JAVA软件编程设计 更多文章 JavaScript中错误正确处理方式,你用对了吗? 科技解放生产力之语音转换文字 解读Linux启动过程 LVM锁机制分析 决策树是如何工作的
猜您喜欢 内外兼修,分布式应用系统的高可用监控 关于一致性协议和分布式锁 中国区手机游戏MAU实力榜 | QuestMobile R深入 | 数据类型 集合使用的技巧(二) | Ruby