Vue 2.0入门基础知识之内部指令
1.Vue.js介绍
当前前端三大主流框架：Angular、React、Vue。React前段时间由于许可证风波，使得Vue的热度蹭蹭地上升。另外，Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具，与其说是一个MVVM框架，不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程，即保持状态和视图的同步，状态也可以说是数据吧；而其组件化的理念与React则一样，即“一切都是组件，组件化思想方便于模块化的开发，是前端领域的一大趋势。
2.内部指令
2-1.v-if v-else v-show：前两者一般配合使用，v-show的效果类似于v-if。
实例如下：
<body>
<div id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>
DOM结构中，三个p标签中的内容是否显示在页面中取决于flag的布尔值属性。当flag为true时，if和show都会显示，else也不会存在于DOM结构中。v-if和v-show的不同体现在：v-if是根据条件的值判断是否加载，可以减轻服务器的压力，但是缺点是当改变条件的值，页面又要加载一次；v-show则无论条件的值是否为true，都会加载（若条件为true，则display属性设置为其默认属性，反之，设置为none）
2-2.v-for 循环指令
实例如下：
<body>
<div id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>
页面会显示5个li，插值的效果是li会显示与数组b一 一对应的元素，v-for有点类似于for in循环
2-3 v-text v-html 文本（html字符串）指令
<body>
<div id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>
可以联想到jquery的text()、html()。到现在，你会发现前面都是利用插值操作，即{{}}，这种做法会在一定程度上影响性能。
2-4 v-on 绑定事件监听器
实例如下：
<body>
<div id="app">
<button v-on:click="Hi()">Button</button>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>
同理，类比jquery的on()方法，绑定事件用的，实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作，如mouseout、mouseover等等。
2-5 v-bind指令
实例如下：
<body>
<div id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
效果为a标签显示红色，且其src属性为vm.message。v-bind指令主要用于设置html标签的属性，其简写形式为 v-bind：——>：
2-6 v-model 数据双向绑定指令
实例如下：
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
当input输入的值发生变化时，p标签包含的内容也会随之变化，且与前者保持一致。
2-7 v-pre 指令
实例如下：
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
第一个p标签输出“前端工程师”，而第二个p标签则会跳过vue编译，输出原始值，即{{message}}。
2-8 v-cloak指令
v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行，且其须要与css一起使用
2-9 v-once指令
v-once指令的作用是只有当DOM树第一次渲染时起作用。
好了，下一篇文章介绍一下Vue的全局API~
Vue 2.0入门基础知识之内部指令的更多相关文章
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- USB入门基础知识（转）
源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...
- Greenplum入门——基础知识、安装、常用函数
Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709 版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...
- Linux入门基础知识
注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...
- 1)Linux程序设计入门--基础知识
)Linux程序设计入门--基础知识 Linux下C语言编程基础知识 前言: 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将 会学到以下内容: 源程序编译 Makef ...
- PHP基础入门（二）---入门基础知识必备
前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...
- 【值得收藏】C语言入门基础知识大全！从C语言程序结构到删库跑路！
01 C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() { ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
随机推荐
- MYSQL初级学习笔记五：连接查询！（视频序号：初级_37-41)
知识点七:连接查询(37-41) 什么是连接查询: 连接查询是将两个或两个以上的表按某个条件连接起来,从中选取需要的数据.连接查询是同时查询两个或两个以上的表时使用的.当不同的表中存在相同意义的字段时 ...
- MySQL数据库设计常犯的错以及对性能的影响
1.过分的反范式化为表建立太多的列 我们在设计数据库的结构时,比较容易犯的第一个错误就是对表进行了过分的反范式化的设计,这就容易造成了表中的列过多,虽然说Mysql允许为一个表建立很多的列,但是由于M ...
- 转：Oracle:删除表空间
原文:http://space.itpub.net/40239/viewspace-365948 OMF和非OMF管理的数据文件在DROP TABLESPACE时是否会自动删除,做了测试: SQL&g ...
- WebSocket使用教程 - 带完整实例--网址：https://my.oschina.net/u/1266171/blog/357488
什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议.它是实现了浏览器与服务器全双工通信(full-duplex).HTML5定义了We ...
- EOJ Monthly 2018.4 （E.小迷妹在哪儿（贪心&排序&背包）
ultmaster 男神和小迷妹们玩起了捉迷藏的游戏. 小迷妹们都希望自己被 ultmaster 男神发现,因此她们都把自己位置告诉了 ultmaster 男神,因此 ultmaster 男神知道了自 ...
- 「LuoguP2434」 [SDOI2005]区间（贪心
Description 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照 ...
- javascript之this指向
情况一: 如果一个函数中有this,但是没有被上一级调用,this指向window 例: function a(){ var num='11'; console.log(this.num); //u ...
- c#操作rabbitmq
今天将会介绍如果使用rabbitmq进行简单的消息入队,出队操作,因为本文演示的环境要用到上文中配置的环境,所以要运行本文sample,请先按上一篇中完成相应环境配置. 首先,我们下载 ...
- Table View Programming Guide for iOS---(一)---About Table Views in iOS Apps
About Table Views in iOS Apps Table views are versatile user interface objects frequently found in i ...
- k8s-部署dashboard1.10.1-十七
一.获取镜像和填坑 我的k8s是1.13.1,这里dashboard用的1.10.1: 由于国内不能访问Google,而且大部分人可能也没有其他途径访问:只能在阿里云或者其他镜像网站上获取了: 镜像获 ...