查看“Vue.js”的源代码

{{提示|该页面仍需进一步完善，欢迎贡献你的力量}}

[[文件:Vue-logo.png|192px|缩略图|右|Vue.js 标识]]
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的[[渐进式框架]]。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的[[单页应用]]提供驱动。

== 概况 ==
=== 突出特点 ===
* 易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
* 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩；
* 高效：20kB min+gzip 运行大小，超快虚拟 DOM，最省心的优化；
=== 常见组件 ===
* [https://router.vuejs.org/zh/ vue-router]：Vue.js 官方的'''路由管理器'''，和 Vue.js 的核心深度集成，让构建[[单页应用]]变得易如反掌。
* [https://element.eleme.cn/#/zh-CN element-ui]：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的'''桌面端组件库'''；
* [http://mint-ui.github.io/#!/zh-cn mint-ui]：基于 Vue.js 的'''移动端组件库'''；
* [https://vuex.vuejs.org/zh/ vuex]：专为 Vue.js 应用程序开发的'''状态管理模式'''，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

== 应用 ==
* [https://segmentfault.com/a/1190000015151511?utm_source=tag-newest Vue.js实际开发案例]

== 上手 ==
=== 安装 ===
* 独立版本：在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
* [[NPM]]方法：

=== Vue实例 ===
* 每个 Vue 应用都需要通过实例化 Vue 来实现。
* 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。设置属性会影响到原始数据，反之亦然。
<pre>var vm = new Vue({
    //el 参数：DOM 元素中的id；
    //data参数：用于定义属性；
    //methods参数：用于定义的函数，可以通过 return 来返回函数值
})</pre>
* <code>{{ }}</code> 用于输出对象属性和函数返回值。

=== Vue 模版语法 ===
* Vue.js 使用了基于 [[HTML]] 的模版语法，允许开发者声明式地将 [[DOM ]]绑定至底层 Vue 实例的数据；
* Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统；
* 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上；
* Vue.js 提供了完全的 [[JavaScript]] 表达式支持；
* 指令：是带有 v- 前缀的特殊属性；用于在表达式的值改变时，将某些行为应用到 DOM 上。
** v-html 指令：用于输出 HTML 代码；
** v-bind 指令：用于响应地更新 HTML 属性；

== 参考链接 ==
* [https://cn.vuejs.org/ 官网（中文）]
* [https://baike.baidu.com/item/Vue.js/19884851 百度百科]
* [https://www.runoob.com/vue2/vue-tutorial.html Vue.js教程（菜鸟教程）]