整理自官网教程 -- https://cn.vuejs.org/

  1. v-bind绑定Class与Style

    a. 绑定Class

      语法:v-bind:class="{classname:boolParam} | object"

      其中,classname为类名,boolParam为data中声明的bool变量,object为类对象。

      也可将class绑定到数组,数组内可为class变量名或带bool的class。以下例子渲染结果均为<div class="active"></div>。  

<div  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:class="classObject"></div>
<div v-bind:class="computedClass"></div>
<div v-bind:class="[activeClass, {'text-danger':hasError}]"></div>
var app = new Vue({
el:'#app',
data:{
  isActive: true,
hasError: false,
error: null,
classObject: {
active: true,
'text-danger': false
},
activeClass: 'active',
},
  computed: {
computedClass: function() {
return {
active: this.isActive && !this.hasError,
'text-danger': this.hasError && this.error
}
}
}    
})  

    b. 绑定style

      语法:v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' } | object"

      其中,activeColor和fontSize为在data内声明的变量,object为style对象,绑定style的用法与class类似。

  

  2. v-if 条件渲染

    语法: v-if=boolParam | JS表达式

    相关指令: v-else-if 、v-else

    Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染,除非为元素添加唯一标识属性"key"。

    如下例中,切换username时,input框会重新渲染,label不会。

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

    对比v-show:

    带有 v-show 的元素始终会被渲染并保留在 DOM 中,v-show 只是简单地切换元素的 CSS 属性 displayv-show 不支持 <template> 元素,也不支持 v-else

  

  3. v-for 列表渲染

    语法:v-for="item in/of items"

    items为data中声明的数组或对象,item为每项的别名。为了提升v-for的复用效率,也应为每项元素绑定"key"。用例如下。  

<ul id="example-2">
<!--遍历数组,index为索引,可只写item-->
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
<br/>
<!--遍历对象,key为键名,可只写value,添加了绑定的key属性-->
<li v-for="(value, key, index) in person" :key="index">
{{ index }}. {{ key }}: {{ value }}
</li>
</ul>
var app = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
person: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}   
})

    数组更新检测:

    a) 使用Vue提供的变异方法会改变原始数组,如push()、pop()等。

    b) 使用非变异方法会得到一个新数组,如filter()、concat()、slice()等。

    c) 以上两项会触发视图更新,但直接利用索引设置一个项的值或修改数组长度时,不会触发。需要用Vue.set()、vm.items.splice()等方法代替。

    显示过滤/排序结果:

    可以通过computed属性或methods,返回需要的结果数组。

    备注:

    a) 当 v-for 和 v-if 处于同一节点时, v-for的优先级比 v-if 更高,即v-if会在每个循环中运行。若要先执行v-if,则可将其置于v-for的父元素或<template>上。

    b) 2.2.0+的vue版本里,在组件中使用v-for时,key是必须的。

  4. v-on 监听事件

    语法: v-on:eventName="methodsName"

    其中eventName为事件名,methodsName为实例中声明的方法。v-on:可缩写为@,使用如下。    

<div id="app">
<button v-on:click="greet">Greet</button>
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
say: function (message) {
alert(message)
}
}  
})

    修饰符:  

    a. 事件修饰符:.stop、.prevent、.self等,可串联添加在事件后,如@click.stop等,可处理DOM事件细节。

    b. 按键修饰符:按键别名如.enter、.tab等,可用@keyup.enter=""监听回车按键事件。    

    

Vue.js学习笔记--2.基础v-指令的更多相关文章

  1. Vue.js学习笔记--1.基础HTML和JS属性的使用

    整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...

  2. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. Vue.js 学习笔记之四:Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  6. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  7. Vue.js——学习笔记(一)

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  8. Vue.js——学习笔记

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  9. Vue.js 学习笔记 一

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

随机推荐

  1. malloc内存分配

    网上总结到的信息: (1) 静态分派:是在栈上分配,是由用户自己申请,是由操作系统自己释放的 动态分配:是由编译器分配,操作系统没有提供这样的机制,所以自己申请,必须自己删除! (2)你也要明确.栈的 ...

  2. 2016/2/25 onchange 应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Installing Node.js via package manager

    https://nodejs.org/en/download/package-manager/

  4. ORA-09817

    连接数据库的时候报:ORA-09817:write to audit file,在网上搜索了下,发现时oracle安装目录下面的磁盘空间不够,有不少人给出了解决办法,下面即是一例: 连接oracle  ...

  5. 推荐一款很好用的调试js的eclipse插件

    ie调试的话用 Companion.JS 一个插件 很好用的 不用配置,直接安装eclipse调试的话 可以用jsdt 可能需要配置下 网上有很多说明http://wokaours.blog.163. ...

  6. TibetanFont | ཡིག་གཟུགས། | 藏文字体

    1.Microsoft Himalaya 微软喜马拉雅字体 2007年1月30日,微软公司向全球市场同步发布了其最新操作系统Windows Vista,并自带藏文字体和输入法,Windows Vist ...

  7. [Codeforces 1011E] Border

    [题目链接] https://codeforces.com/contest/1011/problem/E [算法]  裴蜀定理 : 设为n个整数,d是它们的最大公约数,那么存在整数 使得  显然 , ...

  8. 【转】python字符串/元组/列表/字典互转

    #-*-coding:utf-8-*- #1.字典 dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:<type ' ...

  9. hdu 3503(有点小技巧的dfs(对结点加东西表示边的某些状态))

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  10. UI:sqlite数据库

    使用sqllite的时候一些笔记 数据库(管理类),在工程 general 导入 动态链接库 libsqllite3.0.dylib  在.h文件里引入导入 sqllite3.h 头文件 在.h里面声 ...