Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
1、什么是Vue.js？
众所周知，最近几年前端发展非常的迅猛，除各种框架如：backbone、angular、reactjs外，还有模块化开发思想的实现库：sea.js 、require.js 、webpack以及前端上线部署集成工具如： grunt、gulp、fis等。
Vue.js与reactjs相似，是一个构建数据驱动的 web 界面的库，一个注重ViewModel的典型的MVVM框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
2、Vue.js的独特之处
2.1 响应的数据绑定
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
（1）下载安装vue.js
下载地址：开发版本或者生产版本（在开发时请用开发版本，遇到常见错误它会给出友好的警告。）
安装
在html文本中引入vue.js
<script type="text/javascript" src="js/vue.js"></script>
注意：Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
（2）js常用框架对比
Jquery: jquery依然依靠丰富的dom操作去组合业务逻辑，当业务逻辑复杂的时候，每行代码都会有不知所云的感觉。因为:
第一：业务逻辑和UI更改该混在一起，
第二：UI里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。
当然第二点从另一方面看也是优点，因为有的时候UI交互逻辑能够更加灵活地嵌入到业务逻辑，这在其他MV*框架中都是比较难处理的。
Vue: vuejs非常精简，代码量非常少的实现了MVVM框架，在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
reactjs: reactjs代码量最多，因为它既要管理UI逻辑，又要操心dom的渲染。
extjs: extjs是唯一一个让User和View解耦，通过事件回调去关联起来。也可通过watch去实现双向绑定。
angular: angular是一个丰富的javascript库，也是MVVM模式。如果要用angular开发应用，那么从开始到结束，会接触到angular的内部的不同组件，当然学习曲线也比较陡。
一个最简单的例子
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js"></script>
<title></title>
</head> <body>
<div id="app">
{{message}}
</div>
<script>
var msgData = "Hello vue.js!";
var app = new Vue({
el: "#app",
data: {
"message": msgData
}
});
</script>
</body> </html>
结果展示：
Hello vue.js!
Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）的更多相关文章
- Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
- Vue.js-----轻量高效的MVVM框架（十二、组件动态切换）
在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...
- Vue.js-----轻量高效的MVVM框架（八、使用组件）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- Vue.js-----轻量高效的MVVM框架（十、父子组件通信）
#1.父链 html: <h3>#父链</h3> <div> <div>子组件可以用 this.$parent 访问它的父组件.根实例的后代可以用 th ...
- Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）
这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- Vue.js-----轻量高效的MVVM框架（五、计算属性）
#基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...
随机推荐
- MinGW lapack 在windows 上安装
MinGW基本的配置环境 编译安装 方案一:MinGW Makefiles 我的配置好之后mingw文件夹下没有mingw32-make.exe,使用 mingw-get install mingw3 ...
- oracle环境变量配置
1.右键我的电脑--->属性--->高级系统设置 2.环境变量---->新建 总共配置三个变量(1) 变量名 ORACLE_HOME 变量值 G:\app\TH\product\11 ...
- Luogu 4281 [AHOI2008]紧急集合 / 聚会
BZOJ 1832 写起来很放松的题. 首先发现三个点在树上一共只有$3$种形态,大概长这样: 这种情况下显然走到三个点的$lca$最优. 这种情况下走到中间那个点最优. 这种情况下走到$2$最优. ...
- Luogu 2375 [NOI2014]动物园
字胡串什么的一直不太会,感觉这题…还蛮本质的 考虑暴力求解:num[i]相当于从一直跳nxt,如果nxt[j] * 2 <= i 那么就累加答案 其实这是一个树的结构,也就是说跳到一个结点满足条 ...
- SDUT 3341 数据结构实验之二叉树二：遍历二叉树
数据结构实验之二叉树二:遍历二叉树 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 已知二叉 ...
- 模仿添加QQ好友桌面快捷方式
/** * * @param context * @param tname 桌面快捷方式的名字 * @param icon 好友头像 */ public static void addShortCut ...
- nstallShield制作打包程序详解(图)
InstallShield产品,是安装工具领域事实上的标准.InstallShield 软件是软件安装.配置软件包和升级解决方案领域内公认的标准.InstallShield已经成为安全安装软件的标准解 ...
- 基于XML的DI
三.集合属性注入(包含:为数组注入值.为List注入值.为Set注入值.为Map注入值.为Properties注入值) 集合类定义如下: xml定义如下:仔细看 下面是执行代码: 四.对于 ...
- Sass和Compass设计师指南 Ben Frain 中文高清PDF扫描版
Sass和Compass设计师指南是<响应式Web设计:HTML5和CSS3实战>作者Ben Frain的又一力作.作者通过丰富.完整的案例,循序渐进地展示了Sass和Compass的使用 ...
- IOC与依赖注入
spring的核心思想是IOC和AOP,IOC-控制反转,是一个重要的面向对象编程的法则来消减计算机程序的耦合问题,控制反转一般分为两种类型,依赖注入和依赖查找,依赖什么?为什么需要依赖?注入什么?控 ...