学习Vue（Part 1，我是Vue小白）

作者：漫漫鱼发布日期：2018年8月6日推荐：

前言

互联网发展迅猛，带动前端开发突飞猛进向前发展，各种框架各种包，你要是一天没来上班，这回来说不定你已经和同事有代沟，呵呵，夸张了点哈，但确实在互联网公司采用新技术很激进。

Vue 是现在最火的的前端框架了，一直只是看看，但没用过，因为比较喜欢偷偷的用 jQuery（偷偷用其实怕被人说吃土这里冒汗///滴）。

什么是VUE？

Vue 是渐进式 JavaScript 框架。

优点

易用
灵活
高效

20kB min+gzip 运行大小，超快虚拟 DOM，最省心的优化，不断繁荣的生态系统。

看上去心动!

环境

啥都不会，先写个“Halu Wode”，所有的程序员都要会说这句上岗语。

1）装 node.js

这个不难，找一个setup就好了。

2）配置一个 http 服务器

之前一直用 node.js 压缩 js 代码，配了一个 http服务器。

npm install http-server -g

安装完成后启动http服务

http-server

写代码

1）创建一个文件夹

我这里取名为 “vuedemo”。

2）用文本编辑器创建一个HTML文件

我这里用 Nodepad++ 创建了一个 index.html

Nodepad++有个插件Zen Coidng，它支持快捷键，例如：先输入 html:5，然后按 ctrl+e，它就会帮你生成一段基本html代码。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Demo 1</title>
</head>
<body>
	Yes,coding!
</body>
</html>

好了，这里我们在web浏览器中就能看到 "Yes，coding！"。

3）引入vue库

这个看官网文档，我们引入调试库

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

4）加入vue模版

官方说：“Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统”

照着官方Copy，因为简单，所以简单

<div id="app">
  {{ message }}
</div>

5）写一段初始化代码

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

好了，这样我们就得到了一个完整的页面代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Demo 1</title>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>	
</head>
<body>
	Yes,coding!
	<div>
		<div id="app">
		  {{ message }}
		</div>
	</div>
</body>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
		message: 'Halu Wode!'
	  }
	});
</script>
</html>

6）运行

刷新页面，我们真的看到了 " Halu Wode! "，神奇啊！

小结

这里没有jQuery了，不用写选择器，也不用再对dom输出，取而代之的是创建了一个 js 对象并传入一个 json 对象。

代码看上去确实舒服点，但就代码节约而言，目前还没有看出，因为还没写真正的业务逻辑。

写完还是要说几句，有些网友认为 jQuery的项目做到后面会很乱，那我要说的是代码没有分割好，把一大串代码写在一个文件里了，jQuery 也可以做到模块开发，不会乱。