技术库 > JavaScript

Vue.js介绍

技术库:tec.5lulu.com

from:tec.5lulu.com

Vue.js 是一个用来开发 web 界面的前端库。它也有配套的周边工具。如果把这些东西都算在一起,那么你也可以叫它一个『前端框架』。但我个人更倾向于把它看做是一套可以灵活选择的工具组合。如果你到现在都还没听说过 Vue.js,你心里可能在想:前端的幺蛾子就是多,怎么又来一个框架?其实 Vue.js 已经开发了两年多了。第一次公开发布则是在 2014 年 2 月。这两年间它一直在不断进化,今天也已经有许多人在生产环境中使用它。


所以,Vue.js 到底提供了什么?和其他框架又有何不同?在已经有了 Angular、React、Ember 的情况下,为什么要关注 Vue ?这篇文章会简要地介绍 Vue 的特点,希望读者看完以后能自行判断。

1 Vue.js 特点

  • 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动: 自动追踪依赖的模板表达式和计算属性。
  • 组件化: 用解耦、可复用的组件来构造界面。
  • 轻量: ~24kb min+gzip,无依赖。
  • 快速: 精确有效的异步批量 DOM 更新。
  • 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

如果你喜欢下面这些,那你一定会喜欢 Vue.js:

  • 可扩展的数据绑定机制
  • 原生对象即模型
  • 简洁明了的 API
  • 组件化 UI 构建
  • 多个轻量库搭配使用

2 Vue.js 安装

独立版本

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量

Vue.js 官网下载地址:http://vuejs.org/guide/installation.html

我们可以在官网上直接下载生产版本应用在我们项目中。

NPM 安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

# 最新稳定版本 $ npm install vue # 最新稳定 CSP 兼容版本 $ npm install vue@csp # 开发版本(直接从 GitHub 安装) $ npm install vuejs/vue#dev

Bower 安装

# 最新稳定版本 $ bower install vue

3 创建第一个 Vue 应用

接下来我们创建第一个 Vue 应用。

View 层 - HTML 代码如下:

<div id="app"> {{ message }} </div>

Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后):

new Vue({ el:'#app', data: { message:'Hello World!' } });

双向数据绑定

接下来我们创建一个 view 层 HTML 文件:vueapp.htm,以及 model 层文件:vueapp.js,然后通过 vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变。

Vue.js介绍


标签: js本文链接 http://tec.5lulu.com/detail/102prn21a2nsn8t3e.html

我来评分 :6.1
0

转载注明:转自5lulu技术库

本站遵循:署名-非商业性使用-禁止演绎 3.0 共享协议

www.5lulu.com

相关文章
没有相关文章