1、v-if系列

v-if="数据|判断"
只要条件成立,就显示if中的元素
v-else (注意:必须跟在v-if或者v-if-else的后面,不然失效)
如果if条件不成立显示当前的元素
v-else-if 要紧跟v-if
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.box{
width:100px;
height:100px;
background: red;
}
.box2{
width:100px;
height:100px;
background: yellow;
}
.box3{
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<span>隔山打牛</span>
<div class="box" v-if="onOff == 'a'"></div>
<div class="box2" v-else-if="onOff == 'b'"></div>
<div class="box3" v-else></div>
</div>
<script>
new Vue({
el:'#app',
data:{
onOff:'b'
}
});
</script>
</body>
</html>

v-if中条件不成立就执行v-else-if中的yellow黄色背景,如果v-else-if也不成立,则执行v-else中的绿色背景

2、v-show

根据表达式之真假值,切换元素的 display CSS 属性

v-show和v-if都是用来控制元素的渲染
v-if——判断是否加载,可以减轻服务器的压力,在需要时加载
v-show——调整css dispaly属性,可以使客户端操作更加流畅
 
 <div id="app">
<div v-show="islo">你好,vue</div>
</div>
 new Vue({
el:'#app',
data:{
islo:true
}
})

上面例子中如果islo为false则display属性为none 隐藏元素

3、v-for

该指令根据遍历数组来进行渲染

/*
一个参数:<div v-for="val in obj">{{val}}</div>
两个参数:<div v-for="(val,key)" in obj>{{val}}</div>
三个参数:<div v-for="(val,key,index)" in obj>{{val}}</div>
*/

注意:
当v-for 和 v-if同处于一个节点时候,v-for比v-if优先级高
意味着v-if将运行在每个v-for中

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="val in items">{{val}}</li>
</ul>
<ol>
<li v-for="(user,key) in itemObj">{{user.name}}</li>
</ol>
<div v-for="(val,key,index) in obj" >{{key}}:{{val}}</div>
</div>
<script>
/*
val:数组中的每个值,对象每个值
key:数据就下标,对象key值
index:下标0,1,2
*/
new Vue({
el:'#app',
data:{
items:['苹果','橘子','香蕉','草莓','柚子'],
itemObj:[
{name:'apple'},
{name:'orange'},
{name:'banana'},
{name:'strawberry'},
{name:'pomelo'},
],
obj:{
id:1,
name:'小明',
age:22,
home:'太原'
}
} });
</script>
</body>
</html>

4、v-text和v-html

v-text => 等同于innerText 文本
v-html => 等同于innerHTML 内容(包括元素)
 
{{msg}}这种当我们网速很慢或者js出错时,会暴露我们的{{xxx}},这时候可以使用v-text
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
<p v-text="msg"></p>
<p v-html="str"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'你好,世界',
str:'<h2>内容</h2>'//这里使用v-html,v-text会把<h2>标签也输出来
}
});
</script>
</body>
</html>

5、v-on

v-on:事件名
缩写:@事件名
事件函数写在methods
methods在根实例下,值为一个对象
methods:{
  函数名(){
    this指向实例
    this的数据修改,直接this.数据名即可
  }
}
*** 改了数据,内容也会随之改变
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style> </style>
</head>
<body>
<div id="app">
<button @click="add">添加</button>
<button @click="rm">删除</button>
<ul>
<li v-for="(val,key) in arr">{{val}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
num:0,
arr:[]
},
methods:{
add(){
this.arr.unshift(++this.num)
},
rm(){
if(this.num>0){
this.arr.shift();
this.num --;
}
}
}
});
</script>
</body>
</html>

v-on修饰符

stop

//调用 event.stopPropagation()

prevent

//调用 event.preventDefault()

self

//只当事件是从侦听器绑定的元素本身触发时才触发回调
<div id="app">
<div id="box1" @click="b1">
<!--stop阻止冒泡,prevent阻止默认行为-->
<div id="box2" @click.stop.prevent="b2">
12345
</div>
</div>
</div>
 new Vue({
el:'#app',
methods:{
b1(){alert(1);},
b2(){ alert(2);}
}
});

6、v-bind

v-bind:属性名
缩写:
:class
动态绑定数据,及时对页面的数据进行变更
一般是用来操作属性。如class、style、src、href等等
:class="c" 可以写数据
:class="{red:true}" red->类名: 布尔值 ,只有为true的时候才显示这个class
:class="[c1,c2]" c1和c2为对象 {red:true}
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.classA{
color:red;
}
.classB{
color:orange;
}
</style>
</head>
<body>
<div id="app">
<div :class="classA">绑定class</div>
<div :class="{classA:isok}">绑定class的判断</div>
<div :class="{classA,classB}">绑定class中数组</div>
<div :class="isok?classA:classB">绑定class的三元运算符</div>
<div>
<input type="checkbox" id="isok" v-model="isok">
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB',
isok:true
}, });
</script>
</body>
</html>

7、v-model

在表单上创建双向数据绑定
 
当在表单元素中,绑定了v-model,那么只要用户改变视图中的内容
那么就等同于直接改变数据,当然改变数据,一样会改变视图
在使用v-model的时候,如果放个数组,那么会自动查找表单元素中的value
没有则出现null,如果要统计多个表单元素的信息,可以把同一个数据绑定到 v-model上
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.active{
background: red;
}
</style>
</head>
<body>
<div id="app">
小黄<input type="checkbox" value="小黄" v-model="arr">
小蓝<input type="checkbox" value="小蓝" v-model="arr">
小绿<input type="checkbox" value="小绿" v-model="arr">
{{arr}}
</div>
<script>
new Vue({
el:'#app',
data:{
arr:[]
}, });
</script>
</body>
</html>

在select上绑定v-model,如果option中有value,选择的结果优先为value值

如果没有value值,则走option的内容

<div id="app">
<select name="" v-model="b">
<option disabled value="">请选择</option>
<option value="aa">广州</option>
<option value="bb">杭州</option>
<option value="cc">福州</option>
<option value="dd">苏州</option>
<option value="ee">徐州</option>
<option value="ff">兖州</option>
</select>
<!--下面会直接出现城市名称,因为没有value值-->
<select name="" v-model="b">
<option disabled value="">请选择</option>
<option >广州</option>
<option >杭州</option>
<option >福州</option>
<option >苏州</option>
<option >徐州</option>
<option >兖州</option>
</select>
{{b}}
</div>

8、v-once

v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能
只绑定一次,当数据再次发生变化,也不导致页面刷新
<span v-once>change:{{msg}}</span><div v-once><h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component><ul>
<li v-for="i in list">{{i}}</li>
</ul>

上面的例子中,msg,list即使产生改变,也不会重新渲染

9、v-pre

主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译
<div id="app">
  <!--第一条语句不进行编译-->
<span v-pre>{{message}}</span>
<span>{{message}}</span>
</div>

最终仅显示第二个span的内容

10、 v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>

在页面加载时会闪烁,先显示

<div>
{{message}}
</div>

然后再显示

<div>
hello world!
</div>

vue常用指令的更多相关文章

  1. vue学习(二)Vue常用指令

    2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...

  2. 【Vue常用指令】

    目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...

  3. 重学VUE——vue 常用指令有哪些?

    一.什么是指令? 在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性.指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上.只有v-for是一个类 ...

  4. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  5. VUE常用指令总结!

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue常用指令总结

    一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况).指令的职责是,当表达式的值改变 ...

  7. Vue常用指令详解分析

    Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...

  8. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  9. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

随机推荐

  1. scrapy 发送post请求

    登录人人网为例 1.想要发送post请求,那么使用'scrapy.FormRequest'方法,可以方便的指定表单数据 2.如果想在爬虫一开始的时候就发送post请求,那么应该重写'start_req ...

  2. MT【259】2016天津压轴题之最佳逼近

    (2016天津压轴题)设函数$f(x)=(x-1)^3-ax-b,x\in R$, 其中$a,b\in R$(1)求$f(x)$的单调区间.(2)若$f(x)$存在极值点$x_0$,且$f(x_1)= ...

  3. 【BZOJ5300】[CQOI2018]九连环 (高精度,FFT)

    [BZOJ5300][CQOI2018]九连环 (高精度,FFT) 题面 BZOJ 洛谷 题解 去这里看吧,多么好 #include<iostream> #include<cstdi ...

  4. STL的相关知识

    STL简介: STL(Standard Template Library,标准模版库)以模板类和模版函数的形式为程序员提供了各种数据结构和算法的实现,程序员通过利用STL,可以在代码空间.执行时间和编 ...

  5. LOJ#6280. 数列分块入门 4

    另外开一个数组维护每一个块内的总和. 给区间加值是,残余的块一个一个点更新,整个的块一次性更新 查询的时候也是,残余的块一个一个点加,整个的块一次性加 #include<map> #inc ...

  6. Ubuntu 18.04 安装微信(Linux通用)

    Linux相关的知识:https://www.cnblogs.com/dunitian/p/4822808.html#linux 新增谷歌浏览器添加到桌面的彻底删除:https://www.cnblo ...

  7. Manthan, Codefest 18 (rated, Div. 1 + Div. 2) C D

    C - Equalize #include<bits/stdc++.h> using namespace std; using namespace std; string a,b; int ...

  8. jQuery ajax读取本地json文件

    jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...

  9. poj2559 Largest Rectangle in a Histogram

    洛谷上做过一道一样的题(P1719 最大加权矩形),但是没写博客... 现在已一个新高度来看待这题,沿用以前的方法,感觉很好(草稿纸模拟数小时后20分钟AC) 就是对于每一个位置,记录能够往右延伸多远 ...

  10. hihocoder1364 奖券兑换

    题目链接 思路 乍一看这是一个01背包的裸题.但是数据范围\(10^5\)是无法承受的. 但是发现\(p_i\)和\(w_i\)只有10,也就是说最多只有100种物品.所以可以对他们进行分组.然后用二 ...