vue常用指命
1.v-text：用于更新标签包含的文本，作用和{{}}的效果一样。
2.v-html：绑定一些包含html代码的数据在视图上。
3.v-show：用来控制元素的display属性，和显示隐藏有关。v-show指令的取值为true/false，当值为true时直接渲染，当值为false时渲染出来之后带有display:none属性。
4.v-if：控制元素是否被渲染出来。v-if指令的取值为true/false，当值为true时直接渲染，当值为false时直接不渲染。和v-show的区别为：如果需要频繁的切换显示/隐藏的，就用
v-show，如果运行后不太可能切换显示/隐藏的，就用v-if。
5.v-else：没有对应的值，但是要求前一个兄弟节点必须要使用v-if指令。v-if和v-else只有一个被渲染出来。
6.v-for：实现列表的渲染，可以用于data中存放的是array形式的数据之类。v-for除了可以迭代数组，还可以迭代对象和整数。
7.v-bind：用于动态绑定DOM元素的属性，常见的用法有：<a>标签里边的href属性，<img/>标签的src属性等。
8.v-on：相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。例如click事件等。
9.v-model：实现表单控件和数据的双向绑定，是最重要最常用的指令，一般用在表单输入。
10.v-once：特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。
1、v-if系列
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="../js/vue.min.js"></script>
7 <style>
8 .box{
9 width:100px;
10 height:100px;
11 background: red;
12 }
13 .box2{
14 width:100px;
15 height:100px;
16 background: yellow;
17 }
18 .box3{
19 width:100px;
20 height:100px;
21 background: green;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="app">
27 <span>隔山打牛</span>
28 <div class="box" v-if="onOff == 'a'"></div>
29 <div class="box2" v-else-if="onOff == 'b'"></div>
30 <div class="box3" v-else></div>
31 </div>
32 <script>
33 new Vue({
34 el:'#app',
35 data:{
36 onOff:'b'
37 }
38 });
39 </script>
40 </body>
41 </html>
v-if中条件不成立就执行v-else-if中的yellow黄色背景，如果v-else-if也不成立，则执行v-else中的绿色背景
2、v-show
根据表达式之真假值，切换元素的 display CSS 属性
<div id="app">
<div v-show="islo">你好，vue</div>
</div>
1 new Vue({
2 el:'#app',
3 data:{
4 islo:true
5 }
6 })
上面例子中如果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中
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="../js/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <ul>
11 <li v-for="val in items">{{val}}</li>
12 </ul>
13 <ol>
14 <li v-for="(user,key) in itemObj">{{user.name}}</li>
15 </ol>
16 <div v-for="(val,key,index) in obj" >{{key}}：{{val}}</div>
17 </div>
18 <script>
19 /*
20 val:数组中的每个值，对象每个值
21 key:数据就下标，对象key值
22 index:下标0,1,2
23 */
24 new Vue({
25 el:'#app',
26 data:{
27 items:['苹果','橘子','香蕉','草莓','柚子'],
28 itemObj:[
29 {name:'apple'},
30 {name:'orange'},
31 {name:'banana'},
32 {name:'strawberry'},
33 {name:'pomelo'},
34 ],
35 obj:{
36 id:1,
37 name:'小明',
38 age:22,
39 home:'太原'
40 }
41 }
42
43 });
44 </script>
45 </body>
46 </html>
4、v-text和v-html
<!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
<!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
<!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
<!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
<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
<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常用指命的更多相关文章
- 自学linux——2.认识目录及常用指（命）令
认识目录及常用指(命)令 1.备份: 快照(还原精灵):短期备份 频繁备份 可关可开.可能会影响系统的操作. 备份时:虚拟机--快照 还原时:虚拟机--快照--快照管理器--相应位置--转到 克隆 ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- vue常用
vue常用的路由的状态管理
- 五、vue常用UI组件
下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...
- （二）Vue常用7个属性
学习vue我们必须之到它的7个属性,8个 方法,以及7个指令.787原则 el属性 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符. data属性 用来组织从view中抽象出 ...
- Vue常用的GitHub项目
Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...
- vue常用的修饰符
v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
随机推荐
- python的标准模块
本文用于记录python中的标准模块,随时更新. decimal模块(解决小数循环问题): >>> import decimal >>> a = decimal.D ...
- solr7.7.1完整教程
安装 上传solr-7.7.1.tgz至服务器 opt文件加下 解压 tar -zxvf solr-7.7.1.tgz 运行 进入到加压后的文件夹/opt/solr-7.7.1,执行一下命令启动sol ...
- UVA1589——xiangqi
开始碰到这个题时觉得太麻烦了直接跳过没做,现在放假了再次看这个题发现没有想象中那么麻烦,主要是题目理解要透彻,基本思路就是用结构体数组存下红方棋子,让黑将军每次移动一下,看移动后是否有一个红方棋子可以 ...
- Aizu 2450 Do use segment tree 树链剖分
题意: 给出一棵\(n(1 \leq n \leq 200000)\)个节点的树,每个节点有一个权值. 然后有\(2\)种操作: \(1 \, a \, b \, c\):将路径\(a \to b\) ...
- MySQL常见数据库引擎及比较？
一:MySQL存储引擎简介 MySQL有多种存储引擎,每种存储引擎有各自的优缺点,大家可以择优选择使用:MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB) ...
- 12章 应用spary制作高级网页组件
比较复杂的用户界面,tab面板 伸缩面板和折叠面板等组件. tab面板和菜单实际上分为两种 一种是切换各个tab页中的内容时并不刷新浏览器窗口,仅仅是被隐藏起来了 利用ja ...
- 利用Python访问Mysql数据库
首先要明确一点,我们在Python中需要通过第三方库才能访问Mysql. 有这样几种方式:Mysql-python(即MySQLdb).pymysql.mysql-connector.Mysql-py ...
- hdu6074[并查集+LCA+思维] 2017多校4
看了标答感觉思路清晰了许多,用并查集来维护全联通块的点数和边权和. 用另一个up[]数组(也是并查集)来保证每条边不会被重复附权值,这样我们只要将询问按权值从小到大排序,一定能的到最小的边权和与联通块 ...
- iOS开发 UILabel实现自适应高宽
UILabel是iOS开发常用的控件.UILabel的属性需要了解,UILabel的特殊显示效果也需要我们掌握.UILabel自适应高宽度是很多初学者遇到的技术性难题.比如段文字,要让他完全地分行显示 ...
- iOS学习笔记44-Swift(四)枚举和结构体
一.Swift的枚举 枚举是一系相关联的值定义的一个公共的组类型,同时能够让你在编程的时候在类型安全的情况下去使用这些值.Swift中的枚举比OC中的枚举强大得多, 因为Swift中的枚举是一等类型, ...