Vue.js实战之系统学习第一节

为什么叫系统学习呢？因为我以前接触过Vue.js，但是没学过它的原理，只是简单的使用了，使用的时候就觉得很好用，没有其他的什么感觉，但当我进入职场后，学习了很多的前端技术后，才发现这个技术的友好，被它深深的吸引，所以准备拿出时间再系统的学习一遍。

参考书籍是Vue. js 实战／梁额编著．

这里先介绍一下我们要系统学习的内容：

双向绑定数据

计算属性

内置指令与自定义指令

组件

Render函数

webpack的使用

Vue.js插件

首先让我们了解一下什么是Vue，大神可略过。

先看一下官方文档的介绍：

简单小巧的核心，渐进式技术栈，足以应付任何国模的应。所以可以有阶段性的Vue.js，不必一开始就使用所有的东西。

但是，它同样提供了现代web开发中的常见的高级功能：

解耦视图与数据

可复用的组件

前端路由

状态管理

虚拟DOM（Virtual DOM）

Vue.js设计上使用了MVVM (Model-View-View Model) 模式。

MVVM模式是由经典的软件架构MVC衍生而来的，当View发生变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定简历联系

Vue.js与传统jQuery相比的优点。

先上一段代码

不难看出，这是给指定的DOM中插入元素，并给他绑定一个点击事件。但是存在一个明显的缺点，那就是让视图代码和业务逻辑耦合在一起，随着功能的增加，直接操作DOM会使代码越来越难以维护。

而Vue.js通过MVVM的模式模式将视图与数据拆分为两部分，只操作数据即可，DOM绑定的事Vue会帮你自动搞定，下面展现Vue.js的改写方法；

<body><div id = "app"><button v-if="showBtn" v-on:click="handleClick">Click me</button></div>
</body>
<script>new Vue({el:'#app',data:{showBtn:true  },methods:{handleClick:function(){console.log('Clicked!');}}})
</script>

上面的代码先不做解释，反正我能看懂，你看不懂就继续往下看吧，后续会一一介绍每个属性的意义。

上面只是简单的介绍的了Vue的的异同，解决的问题，存在的意义和核心思想，接下来我们正式学习如何使用Vue.js

首先，我们介绍一套“万金油”技术栈，被许多商业项目用于生产环境。

jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)
这套技术栈以jQuery为核心，能兼容大部分浏览器。使用RequireJS或者SeaJS进行模块化开发可以解决代码依赖混乱的问题，同时便于维护以及团队协作。使用轻量级的前端模板可以将数据与HTML模板分离。最后，使用自动化的构建工具（如Gulp）可以合并并压缩代码，如果你喜欢谢Less、Sass以及现在流行的ES6，也可以帮你进行预编译。

随着项目的扩大和时间的转移，出现了更为复杂的业务场景，比如SPA（单也买你富应用）、组件解耦等。为了提升开发效率，降低维护成本，传统的前端开发模式已经不能完全满足我们的需求，这时就出现了如Angular、React以及我们介绍的主角Vue.js.

接下来咱们写一个完整的代码来体验一下Vue：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实例</title></head><body><div id="app"><ul><li v-for="book in books">{{ book.name }}</li></ul></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script>new Vue({el:'#app',data:{books:[{ name:'《Vue.js实战》' },{ name:'《JavaScript语言精粹》' },{ name:'《JavaScript高级程序设计》' }]}})</script></body>
</html>

显示效果图

效果是不是还不错，它将图书列表玄幻显示出来了

对于一些业务逻辑复杂，对前端工程有要求的项目，可以使用vue单文件的形式配合webpack使用，必要时还会使用到vuex来管理状态，vue-router来管理路由。所以说Vue.js框架分开发模式是多样化的，后续会详细介绍，到时就会对整个Vue生态有所了解。

接下来就让我们开启Vue的大门吧，创建我们的第一个Vue应用。

请看下一节

Vue.js实战之系统学习第二节

Vue.js实战之系统学习第一节相关推荐

Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节接下来我们要学习第七节了,时间过的好快. 组件详解组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
3.Vue.js 实战调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...
[Vue.js] 一篇超级长的笔记，给《Vue.js 实战》划个重点
本文前言本笔记建立在书籍<Vue.js实战 / 梁灏编著>的基础上,旨在帮助有 Vue.js 基础的朋友快速回忆 Vue.js 的细碎内容.初学者建议阅读<Vue.js实战> ...
js 查错_7年前端开发经验的我，写了本Vue.js实战开发，开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
[译] 使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP（第二部分）
原文地址:Create your first Ethereum dAPP with Web3 and Vue.JS (Part 2) 原文作者:Alt Street 译文出自:掘金翻译计划本文永久链 ...
Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...
Vue.js实战——内置指令（一）
参考:<Vue.js实战>梁灏 1. 基本指令 1.1 v-cloak <!DOCTYPE html> <html><head><meta cha ...

Vue.js实战之系统学习第一节

Vue.js实战之系统学习第一节相关推荐

最新文章

热门文章