从零开始学习Vuejs前端框架(一)

一直以来,我的前端方面就比较弱,以前学习jQuery的时候,都是摸着石头过河,基本上都是学一样,然后又忘记一样。搞得每次用的时候狼狈不已。现在响应式的框架越来越多,最近在网上下载了VUE的视频教程,准备一个代码一个代码的敲点出来学习。这个博客现在就打算记录一下自己的学习步骤。话不多少,先上代码,至于vue的基础知识,网上就多得很了,我这里就不多说了。

纯粹为记录代码而生:首先还是从Hello World入手吧!

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Hello World</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">{{content}}</div>
	<script>
		var app = new Vue({
			el : '#app',
			data:{
				content: 'hello world1'
			}	
		})
		setTimeout(function(){
			app.$data.content = 'bye world'
		},2000)
	</script>
</body>
</html>

上面这段代码的功能主要是以下两点:

1、在id为app的Div里显示hello world

2、2秒之后把hello world变成bye world

挺简单的,一看也很明白。

只是用了vuejs之后呢,将数据与视图层分开后。只需要专注于数据的变化,而不需要去关注DOM元素了。因为是响应式的,所以当content的值有变化的时候,会直接在div层里面显示出来。根本不用刷新页面。