一、Vue.js简介

Vue.js是什么?

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

  1. React
  2. Angular

Vue.js框架的优势：

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

为什么使用Vue.js?

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

二、MV-模型

MV*模型

因为 SPA（singlepageapplication） 所以需要新的交互模式。

vue监听ios浏览器刷新_Vue

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

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

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

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

三、Vue.js开发环境搭建

  2. 直接使用：https://cn.vuejs.org/v2/guide/installation.html

    3. vue监听ios浏览器刷新_vue.js_02


  4. 安装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标签和文字

  1. 直接操作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>
  1. 模板方法
<!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>
  1. 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>

所有原来的方法，无论是原生JS，或者是jQuery， 都把HTML的定义放
在了JS代码中，这种方法违反了JS与HTML相分离的原则，大大降低了
代码的可维护性。