Vue.js 特点
简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化: 用解耦、可复用的组件来构造界面。
轻量: ~24kb min+gzip,无依赖。
快速: 精确有效的异步批量 DOM 更新。
模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。
如果你喜欢下面这些,那你一定会喜欢 Vue.js:
可扩展的数据绑定机制
原生对象即模型
简洁明了的 API
组件化 UI 构建
多个轻量库搭配使用
Vue.js 安装
独立版本
直接下载并用
或者可以使用本站的静态资源 CDN 库(1.0.11版本):
http://static.runoob.com/assets/vue/1.0.11/vue.min.js
NPM 安装
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
最新稳定版本
$ npm install vue
最新稳定 CSP 兼容版本
$ npm install vue@csp
开发版本(直接从 GitHub 安装)
$ npm install vuejs/vue#dev
Bower 安装
最新稳定版本
$ bower install vue
创建第一个 Vue 应用
接下来我们创建第一个 Vue 应用。
View 层 - HTML 代码如下:
{{ message }}
Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后): new Vue({ el:'#app', data: { message:'Hello World!' } }); 尝试一下 » 双向数据绑定 接下来我们创建一个 view 层 HTML 文件:vueapp.htm,以及 model 层文件:vueapp.js,然后通过 vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变。
vueapp.htm 文件代码:
{{ message }}
Yes
{{/if}} 在 Vue.js,我们使用 v-if 指令实现同样的功能:Yes
也可以用 v-else 添加一个 "else" 块:Yes
No
尝试一下 » 因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 元素当做包装元素,并在上面使用 v-if,最终的渲染结果不会包含它。Title
Paragraph 1
Paragraph 2
v-show v-show作用与v-if类似,不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持标签。