Vue系列之对 Vue 的理解

[yuanyuanbyte]

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

对 Vue 的理解

• Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
• 轻量级的框架，只关注视图层，是一个构建数据的视图集合，包含了 Vuex + Vue Router 的 Vue 项目 gzip 之后 也只有 30kB
• 双向数据绑定，数据操作较为简单。
• Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
• 组件式开发，可复用，低耦合，使用小型、独立和可复用的组件构建应用
• 模板语法：Vue.js 使用了基于 HTML 的模板语法。DOM操作是十分耗费性能的，在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
• 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易
• 单页面应用不利于seo，可以通过SSR服务端渲染来做seo，如nuxt.js

常用的指令

• 条件渲染指令 v-if
• 列表渲染指令v-for
• 属性绑定指令v-bind 缩写：:

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

• 事件绑定指令v-on 缩写：@

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

• 双向数据绑定指令v-model

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。