“Vue.js”的版本间的差异

来自Wiki.Citydatum
跳转至： 导航， 搜索
（创建页面，内容为“{{提示|该页面仍需进一步完善，欢迎贡献你的力量}} Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架…”）
 
小
 
第1行： 第1行：
 
{{提示|该页面仍需进一步完善，欢迎贡献你的力量}}
 
{{提示|该页面仍需进一步完善，欢迎贡献你的力量}}
  
 +
[[文件:Vue-logo.png|192px|缩略图|右|Vue.js 标识]]
 
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的[[渐进式框架]]。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的[[单页应用]]提供驱动。
 
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的[[渐进式框架]]。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的[[单页应用]]提供驱动。
  
 
== 概况 ==
 
== 概况 ==
 +
=== 突出特点 ===
 
* 易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
 
* 易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
 
* 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩；
 
* 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩；
 
* 高效：20kB min+gzip 运行大小，超快虚拟 DOM，最省心的优化；
 
* 高效：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 应用程序开发的'''状态管理模式'''，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  
 
== 应用 ==
 
== 应用 ==
第15行： 第22行：
 
* 独立版本：在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
 
* 独立版本：在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
 
* [[NPM]]方法：
 
* [[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 属性；
  
 
== 参考链接 ==
 
== 参考链接 ==

2019年10月14日 (一) 03:07的最新版本

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


Vue.js 标识

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

概况

突出特点

  • 易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
  • 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩；
  • 高效：20kB min+gzip 运行大小，超快虚拟 DOM，最省心的优化；

常见组件

  • vue-router：Vue.js 官方的路由管理器，和 Vue.js 的核心深度集成，让构建单页应用变得易如反掌。
  • element-ui：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库；
  • mint-ui：基于 Vue.js 的移动端组件库；
  • vuex：专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

应用

上手

安装

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

Vue实例

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

Vue 模版语法

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

参考链接

取自“http://wiki.citydatum.com/index.php?title=Vue.js&oldid=811”