文档章节

vue 指令基本使用大全

不负好时光
 不负好时光
发布于 2017/10/12 21:55
字数 1510
阅读 4795
收藏 214

指令

  • 解释:指令 (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 不存在的元素。
  • 官方解释:当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):

<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>
--- script ---
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor: 'red',
        fontSize: 30,
        baseStyles: {
          color: 'red',
          'font-size': '30px'
        },
        overridingStyles: {
          color: 'green',
        }
      }
    })
  </script>

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>

Dom元素获取: v-ref

​ 在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。

​ 当v-ref和v-for一起使用时,注册的值将是一个数组,包含多有的子组件,对应于绑定数组;如果v-for使用在一个对象上,注册的值将是一个对象,包含所有的子组件,对应于绑定对象。

Dom元素获取: v-el

​ 为Dom元素注册一个索引,方便通过所属实例的$els访问这个元素,可以用v-el:some-el设置this.$els.someEl.

<span v-el:msg>hello</span>

<span v-el:other-msg>world</span>

​	通过this.$els获取相应的DOM元素:

this.$els.msg.textContent  // ==>  "hello"

this.$els.otherMsg.textContent  // ==>  "world"

© 著作权归作者所有

共有 人打赏支持
不负好时光
粉丝 21
博文 157
码字总数 86848
作品 0
徐汇
程序员
加载中

评论(9)

swan1024
swan1024

引用来自“甜不热”的评论

感谢分享,学习了

引用来自“不负好时光”的评论

最近我每天都会更新vue的总结,刚学习?
是滴
c
caoliu1231
好好
a
adv30
写的不错
不负好时光
不负好时光

引用来自“莫默磨墨先生”的评论

http:www.baidu.com 少了两个斜杠:joy:
是的呢:bowtie:
莫默磨墨先生
莫默磨墨先生
http:www.baidu.com 少了两个斜杠:joy:
Thlhkhkxiq
Thlhkhkxiq
angularjs vuejs riotjs 都学了 现在riotjs 写着好爽 其他都不想用:laughing:
智远
智远
远离vue,不谢
不负好时光
不负好时光

引用来自“甜不热”的评论

感谢分享,学习了
最近我每天都会更新vue的总结,刚学习?
swan1024
swan1024
感谢分享,学习了
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
07/11
0
0
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
05/20
0
0
Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区
05/22
0
0
Vue 全站缓存之 vue-router-then :前后页数据传递

连续预告了好几天,总算写到这篇了。 系列篇1:Vue 全站缓存之 keep-alive : 动态移除缓存 系列篇2:Vue 全站缓存二:如何设计全站缓存 本篇为系列篇3:Vue 全站缓存之 vue-router-then :前...

wanyaxing
08/02
0
0
一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

一、 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎。需要一个拖动并且可改变大小的容器盒子。...

_杨瀚博
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

人生苦短:Python里的17个“超赞操作

人生苦短,我选Python”。那么,你真的掌握了Python吗? 1. 交换变量 有时候,当我们要交换两个变量的值时,一种常规的方法是创建一个临时变量,然后用它来进行交换。比如: # 输入 a = 5 b ...

糖宝lsh
51分钟前
4
0
咕泡-spring中常用设计模式概述

设计模式就是经验之谈,供后人借鉴,解决一些具有代表性的问题 设计模式来源于生活,反过来帮助我们更好生活 设计模式提升代码的可读性、可扩展性、维护成本、复杂业务问题 千万不要死记硬背...

职业搬砖20年
今天
2
0
day59-20180817-流利阅读笔记-待学习

假·照骗,真·社交焦虑 雪梨 2018-08-17 1.今日导读 发朋友圈之前,不少人为了展现更美好的生活状态会对照片加以“微调”,或是加个滤镜显得逼格更高,或是磨个皮瘦个脸拉个大长腿。现在,国...

aibinxiao
今天
23
0
OSChina 周五乱弹 —— 姑娘在这个节日里表白你接受么?

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Sharon啊:完全被这个小姐姐圈粉了,学两首她的歌去哈哈 分享王贰浪的单曲《往后余生(翻自 马良)》 《往后余生(翻自 马良)》- 王贰浪 手...

小小编辑
今天
1K
17
为什么HashMap要自己实现writeObject和readObject方法?

为什么HashMap要自己实现writeObject和readObject方法? 如果你有仔细阅读过HashMap的源码,那么你一定注意过一个问题:HashMap中有两个私有方法。 private void writeObject(java.io.Objec...

DemonsI
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部