快速导航

标签
二维码
  • 文章作者:漫漫鱼
  • 发布日期:2018/08/06
  • 推荐:

我们要不断学习才能进步,否则就要被淘汰,Vue一直听说,但没有动手写过,今天我要体验一把。

前言

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

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


什么是VUE?

Vue 是渐进式 JavaScript 框架。

Image


优点

  • 易用
  • 灵活
  • 高效

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! ",神奇啊!

Image

小结

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

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

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