vue.js简介 - b13wen/vue.js-study GitHub Wiki

npm install vue

独立构建包含模板编辑器并支持template选项，它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染
运行时构建不包含模板编辑器，因此不支持template选项，只能用render选项，但即使使用运行时构建，在单文件组件中也依然可以写模板
因为单文件的模板会在构建时预编译为reder函数。运行时构建比独立构建要轻量30% 只有16.39 kb min+gzip大小。

# 全局安装 vue-cli$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$  vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

2）MVVM模式
	
	MVVM是Model-View-ViewModel的简写，本质是MVC的改进版。MVVM就是将其中的View 的状态和行为抽象化，让我们将视图UI
	和业务逻辑分开。
	
	主要的目的是分离视图（view）和模型（Model）
	
	Vue.js 是一个提供了MVVM风格的双向绑定的javascript库，专注于View层。它的核心是VM , view model 负责连接view 和model
	保证视图和数据的一致性，这种轻量级的框架让前端开发更加高效、便捷。
	ViewModel ： （DOM Listeners， Data Bindings） DOM元素监听 和 数据绑定

3）快速入门
	1）引入
		<scropt src="XXX"></scropt>
	2)声明式渲染
		<div id="app">
			{{message}}
		</div>
		<scropt>
		var app = new Vue({
			el: '#app',		//表示当前vue接管了div区域
			data： {
				message: 'Hello world!' //不要以分号结尾
			}
		})
		</scropt>
	3）工作解析：现将数据和DOM绑定，所有数据都是响应式的，可以在控制台修改，能够看到相应的更新

4）插值表达式
	数据绑定最常见的形式就是使用Mustache语法(双大括号)的文本插值，双大括号标签将会被替代为对应数据对象上属性的值。
	当数据对象属性改变，插值出的内容都会更新。
	1）{{}} 可以包含表达式
	例：
		{{ok? 'YES':'NO'}} 
	2）不可以包含复杂表达式和语句,包含了表达式也不会生效
		{{var a=1}} {{if(ok) {return message}}}

	a)v-on:click="fun1('good')"  点击
	b)v-on:keydown="fun1('good')" 键盘监听事件 按下键盘
	c）v-on:mouseover 	鼠标覆盖
	
	简写方式
	@click="XXX"
	
	d)事件修饰符：修饰符可以串联
	
		.stop     使用：v-on:click.stop="" 阻止点击事件
		.prevent  事件不再重载页面 
		.capture  添加事件侦听器是使用捕获模式
		.self	  只有该元素本身才能触发
		.once	  事件只会触发触发一次
	e) 键值修饰符  v-on:keydown.enter("fun1()") 组合件 )v-on:keydown.alt.
		.enter
		.tab
		.delete (捕获 “删除” 和 “退格” 键)
		.esc
		.space
		.up
		.down
		.left
		.right
		
2)v-text与v-html
	v-text用于渲染普通文本，不能解析html代码
	v-html可以解析html代码

3）v-bind可以用来绑定标签中的属性，从而能够修改
	例：v-bind:href="url"  
		或
		v-bind:href={"www.baidu." +i} 可以拼接字符串
	简写方式
	:href="url"
	
4)v-model 双向绑定 一般用于表单属性
	<input type="text" v-model="userName" />
	
	相当于
	 <div id='app'>
		<!-- v-model 等价于下面这段HTML -->
			<input type="text" v-model="userName" />
		<!-- v-model做的事情. -->
			<input type="text" :value="userName" @input="hanlderInputClick" />
	 </div>
5）v-for
	例：	
	  v-for="(item,key,index) in list"  key可以作为当前项键名1.2.3.4.5 index作为索引
	  {{index}}.{{key}}.{{item}}
	  
	:key="index" 保证了DOM的唯一性
	
6)v-if 与 v-show
	v-if 根据表达式的值决定是否渲染元素
	v-show 根据表达式的值切换display css属性

	2）promise 
		是什么
			1、主要用于异步计算
			2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
			3、可以在对象之间传递和操作promise，帮助我们处理队列
		
		为什么？
			1、node.js 的高异步性
			2、传统的多次异步要函数层层嵌套，不好维护
			3、没有return 的能力使用时需要回调函数
			
		怎么做：
			1、promise是一个对象，函数的区别在于可以保存状态
			2、没有剥夺return,无需层层回调
			3、代码简介
		特性及实现原理
			1、三种状态：pending(进行中)、fulfiled(已成功)、rejected(已失败)
			2、promise对象接受一个回调函数作为参数，该回调函数接受两个参数，回调成功resolve  回调失败reject
				resolve 除了是正常值外还可能是一个promise对象的实例，reject通常是一个error对象的实例
			3、then方法返回一个新的promise实例，，并接收两个参数onResolved(fulfilled状态的回调)；
				onRejected(rejected状态的回调，该参数可选)
				
			4、代码解析
				1)实例1：new Promise(
						  function (resolve, reject) {
							// 一段耗时的异步操作
							resolve('成功') // 数据处理完成
							// reject('失败') // 数据处理出错
						  }
						).then(
						  (res) => {console.log(res)},  // 成功
						  (err) => {console.log(err)} // 失败
						)
					resolve作用是将	promise对象的状态从“pending”变成“resolved”
						在异步操作成功是调用，并将异步操作结果，作为参数传递出去
					reject作用是，将promise对象的状态从“pending”变为“rejected”
					
				2）实例2：使用then形成一个队列从上至下，从里到外执行
					new Promise(resolve => {
						setTimeout(() => {
						  resolve('hello')
						}, 2000)
					  }).then(val => {
						console.log(val) //  参数val = 'hello'
						return new Promise(resolve => {
						  setTimeout(() => {
							resolve('world')
						  }, 2000)
						})
					  }).then(val => {
						console.log(val) // 参数val = 'world'
					  })
										
		
	https://github.com/axios/axios
	1、axios介绍
		基于Promise的http客户端，用于浏览器和node.js
	2、特征
		支持promise Api
		拦截请求和响应
		转换请求和响应数据
		取消请求
		JSON数据的自动转换
		客户端防止XSRF（模仿用户的行为进行跨站请求伪造的。）
		
	3、安装
		利用npm安装
			npm install axios
		利用bower
			bower install axios
		利用yarn
			yarn add axios
		
		script引入
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		
			
	4、发送请求和接受响应
		1、get请求
			axios.get('/user/12345',{params:{ID:12345}})
				.then(function (response) {
					console.log(response.data);
					console.log(response.status);
					console.log(response.statusText);
					console.log(response.headers);
					console.log(response.config);
				})
				.catch({(err)=>{
					console.log(err)
				});
		2、post请求
			
			axios.post('/user',{
				firstName: 'Fred',
				lastName: 'Flintstone'
			})
			.then((res)=>{
				console.log(res);
			})
			.catch((err)=>{
				console.log(err);
			});
			
			
			
		
	5、=>函数的说明
		
			(x)=> x+6;
		相当于：
			function(x){
				return x + 6;
			}