本篇目录:

1.1 Vue.js 是什么

1.2 如何使用Vue.js

本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理。
通过对本章的学习,即使从未接触过Vue.js,你也可以运用这些知识点快速构建出一个Vue.js应用。

1.1 Vue.js 是什么

Vue.js的官方文档中是这样介绍它的:

简单小巧的、渐进式JavaScript框架,是以应付任何规模的应用。

简单小巧是指Vue.js压缩后大小仅有20KB。
所谓渐进式(Progressive),就是你可以一步一步、有阶段性地来使用Vue.js,不必一开始就是用所有的东西。
随着我们不断的介绍,你会深刻感受到这一点,这也正式开发者热爱Vue.js的主要原因之一。

使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。
它提供了现代Web开发中常见的高级功能,比如:

  • 解耦视图与数据;
  • 可复用的组件;
  • 前端路由;
  • 状态管理;
  • 虚拟DOM(Virtual DOM)。

1.1.1 MVVM模式

与志明前端框架Angular、Ember等一样,Vue.js在设计上也是用MVVM(Model-View-ViewModel)模式。

MVVM模式是由经典的软件架构MVC衍生来的。
当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然。
View和ViewModel之间通过双向绑定(xlata-binding)建立联系,如图1-1所示:

1.1.2 Vue.js 有什么不同

如果你使用过jQuery,那你一定对操作DOM、绑定事件等这些原生JavaScript能力非常熟悉,比如我们在指定DOM中插入一个元素,并给它绑定一个点击事件。

 if (showBtn) {
var $btn = $("<button>").text("Click me");
$btn.on("click", function() {
console.log("Clicked!");
});
$("#app").append($btn);
}

这段代码不难理解,操作的内容也不复杂,不过这样让我们的视图代码和业务逻辑紧耦合在一起,随着功能不断增加,直接操作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.js的写法,在后面的章节会详细介绍每个参数的用法。

1.2 如何使用 Vue.js

每一个框架的产生都是为了解决某个具体的问题。
在正式开始学习Vue.js前,我们先对传统前端开发模式和Vue.js的开发模式做一个对比,以此了解Vue.js产生的背景和核心思想。

1.2.1 传统的前端开发模式

前端技术在近几年发展迅速,如今的前端开发已不再是10年前写个HTML和CSS那样简单了,新的概念层出不穷,比如ECMAScript 6、Node.js、NPM、前段工程化等。
这些新东西在不断优化我们的开发模式,改变我们的编程思想。

随着这些技术的普及,一套可称为“万金油”的技术栈被许多商业项目用于生产环境:
jQuery + RequireJS(SeaJS) + artTemplate(doT) + Gulp(Grunt)

这套技术以jQuery为核心,能兼容绝大部分浏览器,这是很多企业比较关心的,因为他们的客户很可能还在用IE7及以下浏览器。
使用RequireJS或SeaJS进行模块化开发可以解决代码依赖混乱的问题,同时便于维护及团队协作。
使用轻量级的前端模板(如doT)可以将数据与HTML模板分离。
最后,使用自动化构建工具(如Gulp)可以合并压缩代码,如果你喜欢写Less、Sass以及现在流行的ES 6,也可以帮你进行预编译。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式,由于它的简单、高效、实用,至今仍有不少开发者在使用。
不过随着项目的扩大和时间的推移,出现了更复杂的业务场景,比如SPA(单页面富应用)、组件解耦等。
为了提升开发效率,降低维护成本,传统的前端开发模式已不能完全满足我们的需求,这时就出现了Angular、React以及我们要介绍的主角Vue.js。

1.2.2 Vue.js 的开发模式

Vue.js是一个渐进式的JavaScript框架,根据项目需求,你可以选择从不同的维度来使用它。
如果你只是想体验Vue.js带来的快感,或者开发几个简单的HTML5页面或小应用,你可以直接通过<script>加载CDN文件。
例如:

 <!-- 自动识别最新稳定版本的Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!-- 指定某个具体版本的Vue.js -->
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

两种版本都可以,如果你不太了解各版本的差别,建议直接使用最新的稳定版本。
当然,你也可以将代码下载下来,通过自己的相对路径来引用。
引入Vue.js框架后,在<body>底部使用new Vue()的方式创建一个实例,这就是Vue.js最基本的开发模式。
现在可以写入一下完整的代码来快速体验Vue:

 <!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue 示例</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>

在浏览器中访问它,会将图书列表循环显示出来,如图1-2所示:

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

了解了Vue.js的开发模式后,相信你已经迫不及待地想开启Vue的大门了。
下一张,我们就直接进入话题,创建第一个Vue应用。

Vue.js 学习笔记 第1章 初识Vue.js的更多相关文章

  1. Node.js学习笔记(1):Node.js快速开始

    Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...

  2. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  3. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  4. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  5. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  6. Vue.js 学习笔记 第4章 v-bind 及 class与style绑定

    本篇目录: 4.1 了解v-bind指令 4.2 绑定class的几种方式 4.3 绑定内联样式 DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定cl ...

  7. Vue.js 学习笔记 第3章 计算属性

    本篇目录: 3.1 什么是计算属性 3.2 计算属性用法 3.3 计算属性缓存 模板内容的表达式常用语简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的. 3.1 什么是 ...

  8. Vue.js学习笔记--菜鸟搭建一个企业级vue的项目

    vue.js新手搭建一个企业项目,从0开始 前置条件: node.npm请先安装配置好 下面开始: npm 下载vue-cli脚手架工具  确认安装成功看到版本号: 初始化项目,选用webpack(p ...

  9. js学习笔记-编写高效、规范的js代码-Tom

    编写高效.规范的js代码: 1.变量命名空间问题,尽量使用局部变量,防止命名冲突(污染作用域中的全局变量):全局空间命名的变量可以在对应的文档域任意位置中使用window调用. 2.尽量使用单var定 ...

随机推荐

  1. Python_正则表达式二

    ''' 正则表达式对象的sub(repl,string[,count=0])和subn(repl,string[,count=0])方法用来实现字符串替换功能 ''' example='''Beaut ...

  2. Spring Boot实战笔记(九)-- Spring高级话题(组合注解与元注解)

    一.组合注解与元注解 从Spring 2开始,为了响应JDK 1.5推出的注解功能,Spring开始大量加入注解来替代xml配置.Spring的注解主要用来配置注入Bean,切面相关配置(@Trans ...

  3. codeforces 979D Kuro and GCD and XOR and SUM

    题意: 给出两种操作: 1.添加一个数字x到数组. 2.给出s,x,k,从数组中找出一个数v满足gcd(x,k) % v == 0 && x + v <= s && ...

  4. PAT1043:Is It a Binary Search Tree

    1043. Is It a Binary Search Tree (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...

  5. struts2中的拦截器

    一  AOP思想: 面向切面编程的思想 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP ...

  6. Scrapy 和 scrapy-redis的区别

    Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架,但是不支持分布式,Scrapy-redis是为了更方便地实现Scrapy分布式爬取,而提供了一些以redis为基础 ...

  7. 《javascript语言精粹》读书笔记 Item2 对象

    第三章 对象 JavaScript的简单数据类型包括数字.字符串.布尔值(true和false).null值和undefined值.其他 数字.字符串和布尔值"貌似"对象,因为它们 ...

  8. Django的ORM操作

    ORM操作 select * from tb where id > 1 # 对应关系 models.tb.objects.filter(id__gt=1) models.tb.objects.f ...

  9. backend_queue.go

    package nsqd // BackendQueue represents the behavior for the secondary message // storage system typ ...

  10. Goroutine陷阱

    Go在语言层面通过Goroutine与channel来支持并发编程,使并发编程看似变得异常简单,但通过最近一段时间的编码,越来越觉得简单的东西,很容易会被滥用.Java的标准库也让多线程编程变得简单, ...