1.Vue简介

Vue.js入门与实践

最新推荐文章于 2025-09-27 23:46:32 发布

原创最新推荐文章于 2025-09-27 23:46:32 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

一、Vue.js简介

Vue.js是什么?

Vue.js是UI层的渐进式框架，和Vue.js齐名的，还有:

React
Angular

Vue.js框架的优势：

提高代码复用率
降低模块之间耦合度
提高开发速度
提高代码质量

为什么使用Vue.js?

受到Angular框架的启发。
比Angular框架简单很多
有中文的文档，社区活跃度高。
性能高
基于组件(web component) 开发

二、MV-模型

MV*模型
因为 SPA（singlepageapplication）所以需要新的交互模式。
在这里插入图片描述

MVC模式:
Module: 用于存放数据
View: 用于更新DOM
Controller:调用Module给View渲染使用

MVP模式:
Module:用于存放数据
View: 响应用户交互行为
Presenter:

Module改变，修改DOM
View响应用户交互时，通知Presenter，Presenter负责更新Module,以及修改DOM

MVVM模式:
Module:用于存放数据
View:响应用户交互行为
ViewModel:可以理解为自动化调用的Presenter

三、Vue.js开发环境搭建

直接使用：https://cn.vuejs.org/v2/guide/installation.html
安装Vue
①安装node.js和git
②安装bower
使用管理员身份的命令行，输入命令：

npm install bower -g

用bower -v检查是否安装成功

npm install -g cnpm --registry=https://registry.npm.taobao.org

③安装Vue

bower info vue

此命令用来查看Vue版本

bower install vue <#版本>

选择需要的版本进行安装

四、helloword实验

实现最简单的页面输出HelloWorld!
添加click事件，改变model，查看View的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	
	
	</head>
	<body>
		
		<div id = "app">
			<h3>{{word}}</h3>
			<input type="button" value="按钮1" v-on:click="show()" />
			<input type="button" value="按钮2" @click="show()" />
		</div>
		<!-- 1.简写用@来代替v-on
		2.函数不传递参数时，可以省略括号-->
	<script>
	    //由于Dom加载机制，此部分内容要放在body后部
		//Module
		var m = {
			word: 'hello word!',
		};
		
		//ViewModule
		var vm = new Vue({
			el:'#app',//挂载点
			data:m,    //数据
			//方法
			methods:{
				show(){
					console.log('hello,world');
					this.word = 'hi,world';
				}
			}
		});
		
	</script>
	</body>
</html>

Vue的MVVM实现：

当Vue示例创建后，形成双向绑定: DOM .Listeners，Data bindings
从View侧看，DOM Listeners监听DOM的变化
从Mode|侧看，Data bindings帮助更新View，也就是DOM

动态添加一个div，包含p标签和文字

直接操作dom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	
	
	</head>
	<body>
		
		<div id = "app">
			<input type="button" value="按钮" />
		</div>

	<script type="text/javascript">
		/* 直接操作dom */
		function changeDirectly(){
			var app = document.getElementById('app');
			var div,p;
			div = document.createElement('div');
			p = document.createElement('p');
			p.innerHTML = 'helloworld';
			div.appendChild(p);
			app.appendChild(div);
		}
		addEventListener('click',changeDirectly)
	</script>
	</body>
</html>

模板方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	
	
	</head>
	<body>
		
		<div id = "app">
			<input type="button" value="按钮" />
		</div>

	<script type="text/javascript">
		//模板方法
		function changeDirectly(){
			var app = document.getElementById('app');
			var html ='';
			htmlTmp = '<div><p>%word%</p></div>';
			html = htmlTmp.replace(/%word%/g,'helloword');
			console.log(html);
			app.innerHTML = html;
			 
		}
		addEventListener('click',changeDirectly);	
	</script>
	</body>
</html>

js与html分离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	<!-- 引入vue.js -->	
	<script src="js/vue.js"></script>	
	
	
	</head>
	<body>
		
		<div id = "app">
			<input type="button" value="按钮" />
		</div>
		
		<script id="temp" type="text/temp">
			<div>
			   <p>%word%</p>
			</div>
		</script>

	<script type="text/javascript">
	// JS与HTML分离
    //第一步:把模板放到HTML中
    //第二步:渲染
    //第三步:模板hide起来

		function changeDirectly(){
			var app = document.getElementById('app');
			var html ='';
			htmlTmp = document.getElementById('temp').innerHTML;
			html = htmlTmp.replace(/%word%/g,'helloword');
			console.log(html);
			app.innerHTML = html;
			 
		}
		addEventListener('click',changeDirectly);
	</script>
	</body>
</html>