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入门基础知识之内部指令的更多相关文章

  1. Vue 2.0入门基础知识之全局API

    3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...

  2. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  3. USB入门基础知识(转)

    源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...

  4. Greenplum入门——基础知识、安装、常用函数

    Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709    版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...

  5. Linux入门基础知识

    注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...

  6. 1)Linux程序设计入门--基础知识

    )Linux程序设计入门--基础知识 Linux下C语言编程基础知识 前言: 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将 会学到以下内容: 源程序编译 Makef ...

  7. PHP基础入门(二)---入门基础知识必备

    前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...

  8. 【值得收藏】C语言入门基础知识大全!从C语言程序结构到删库跑路!

    01 C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() { ...

  9. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

随机推荐

  1. HDU1569 方格取数(2) —— 二分图点带权最大独立集、最小割最大流

    题目链接:https://vjudge.net/problem/HDU-1569 方格取数(2) Time Limit: 10000/5000 MS (Java/Others)    Memory L ...

  2. YTU 1055: 输入字符串以及输出

    1055: 输入字符串以及输出 时间限制: 1 Sec  内存限制: 128 MB 提交: 694  解决: 476 题目描述 编写一函数,由实参传来一个字符串,统计此字符串中字母.数字.空格和其它字 ...

  3. iOS沙盒(sandbox)机制及获取沙盒路径

    一. 每个iOS应用SDK都被限制在“沙盒”中,“沙盒”相当于一个加了仅主人可见权限的文件夹,苹果对沙盒有以下几条限制. (1)应用程序可以在自己的沙盒里运作,但是不能访问任何其他应用程序的沙盒. ( ...

  4. 【BZOJ 3224】 普通平衡树

    [题目链接] 点击打开链接 [算法] 本题是Splay模板题,值得一做! [代码] #include<bits/stdc++.h> using namespace std; #define ...

  5. MyEclipse10.0的破解过程详细图解

    1 首先下载破解软件包:http://pan.baidu.com/s/1pLB6xEb 并解压: 2 按照百度经验操作即可http://jingyan.baidu.com/article/cbf0e5 ...

  6. sublime text 3中修改tab键为缩进4个空格

    1. 菜单栏里点击 Preferences-> Setting-User, 如图 2. 在弹出来的文本里,添加如下两行: { // 注意只有一个大括号,如果之前有属性,如在之前的属性后确保有 , ...

  7. linux以行为单位进行读写操作

    1 gets/fgets函数 char* fgets(char *restrict buf,int n,FILE *restrict fp) 参数1:存放读入串的缓冲区 参数2:表示读入的字符个数,最 ...

  8. hdoj1257【疑问】(贪心)

    这完全可以达到3*1e4个啊...如果这样子,这复杂度就炸了吧?... #include<iostream> #include<cstdio> #include<math ...

  9. 【UVA - 540】Team Queue (map,队列)

    Team Queue Descriptions: Queues and Priority Queues are data structures which are known to most comp ...

  10. 进程与线程(2)- python实现多进程

    python 实现多进程 参考链接: https://morvanzhou.github.io/tutorials/python-basic/multiprocessing/ python中实现多进程 ...