断剑白发
断剑白发

Vue笔记

1、Vue的数据渲染与使用（涉及到的直接下载的文件在文末有链接）

Vue.js的第一次使用


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	
head>
<body>
	
	<div id="app">
		<p id="content">{{msg}}p>
	div>
	<script type="text/javascript">
		//2.创建vue的实例
		var vm=new Vue({
			el:'#app',	//表示当前我们new的这个vue实例，要控制页面上哪个区域
			data:{		//存放的el中用到的数据
				msg:'欢迎学习Vue'
			} 
		})
	script>
body>
html>

v-cloak、v-text、v-html、v-bind


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<style type="text/css">
		[v-cloak]{
			display:none;
		}
	style>
head>
<body>
	<div id="app">
		
		
		
		<p v-cloak>+++{{cloak}}+++p>
		
		
		
		<h4 v-text="text">h4>
		
		
		<p v-html="html">p>
		
		
		<input type="button" value="按钮" v-bind:title="bind+'表达式变长'">
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				cloak:'cloak指令渲染',
				text:'text指令渲染',
				html:'
大大大
',
				bind:'bind指令渲染'
			}
		})
	script>
body>
html>

v-on


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
		<input type="button" v-bind:value="on" v-on:click="show">input>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				on:"v-on指令渲染"
			},
			methods:{//这个methods属性中定义了当前Vue实例所有可用的方法
				show:function(){
					alert('触发事件');
				}
			}
		})
	script>
body>
html>

methods中如何调用data中的属性值


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<h4>{{msg}}h4>
		<input type="button" value="走" v-on:click="go">
		<input type="button" value="停" v-on:click="stop">
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'跑马灯效果',
				intervalId:null
			},
			methods:{
				go(){
					//在vm实例中，如果想要调用data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问。这里的this代表的是new出来的vm对象.
					if(this.intervalId!=null) 
						return 
					this.intervalId = setInterval(() => {
						//因为这里面的this是window对象了，不是vm对象，所以需要先在外层获取一遍值
						var start = this.msg.substring(0,1)
						var end = this.msg.substring(1)
						this.msg = end + start
					},400)
				},
				stop(){
					clearInterval(this.intervalId)
					// 每当清除了定时器以后，需要重新把intervalId重置为null
					this.intervalId = null
				}
			}
		})
	script>
body>
html>

事件修饰符


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<style>
		.inner{
			height:150px;
			background-color:skyblue;
		}
	style>
head>
<body>
	<div id="app">
		<div class="inner" v-on:click="divHandle">
			
			<input type="button" value="按钮" v-on:click="btnHandle">
			
			<input type="button" value="按钮" v-on:click.stop="btnHandle">
		div>
		
		<a href="http://www.baidu.com" v-on:click="linkClick">去百度a>
		
		<a href="http://www.baidu.com" v-on:click.prevent="linkClick">去百度a>
		
		<div class="inner" v-on:click.capture="divHandle">
			<input type="button" value="按钮" v-on:click="btnHandle">
		div>
		
		<div class="inner" v-on:click.self="divHandle">
			<input type="button" value="按钮" v-on:click="btnHandle">
		div>
		
		<a href="http://www.baidu.com" v-on:click.prevent.once="linkClick">去百度a>
		
		
		
		
		
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				divHandle(){
					console.log('这是触发了innerDiv的点击事件')
				},
				btnHandle(){
					console.log('这是触发了btn 按钮的触发事件')
				},
				linkClick(){
					console.log('触发了链接的点击事件')
				}
			}
		})
	script>
body>
html>

v-model


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<h4>{{msg}}h4>
		
		
		<input type="text" v-model="msg">
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'五笔好啊'
			},
			methods:{

			}
		})
	script>
body>
html>

计算器的简单案例


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="number1">
		<select v-model="opt">
			<option value="+">+option>
			<option value="-">-option>
			<option value="*">*option>
			<option value="/">/option>
		select>
		<input type="text" v-model="number2">
		<input type="button" value="=" v-on:click="calc">
		<input type="text" v-model="result">
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				number1:0,
				number2:0,
				result:0,
				opt:'+'
			},
			methods:{
				calc(){
					console.log('点击了等号')
					switch(this.opt){
						case '+':
							this.result=parseInt(this.number1)+parseInt(this.number2)
							break
						case '-':
							this.result=parseInt(this.number1)-parseInt(this.number2)
							break
						case '*':
							this.result=parseInt(this.number1)*parseInt(this.number2)
							break
						case '/':
							this.result=parseInt(this.number1)/parseInt(this.number2)
							break
					}
				}
			}
		})
	script>
body>
html>

Vue中class的应用

bind绑定class


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<style type="text/css">
		.red{
			color:red;
		}
		.thin{
			font-weight: 200;
		}
		.italic{
			font-style: italic;
		}
		.active{
			letter-spacing: 0.5em;
		}
	style>
head>
<body>
	<div id="app">
		
		<h1 v-bind:class="['red','thin','italic']">五笔也太棒了吧h1>
		
		<h1 v-bind:class="['red','thin',flag?'active':'']">五笔也太棒了吧h1>
		
		<h1 v-bind:class="['red','thin',{'active':flag}]">五笔也太棒了吧h1>
		
		<h1 v-bind:class="{'red':true,'thin':true,'italic':true,'active':false}">五笔也太棒了吧h1>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{

			}
		})
	script>
body>
html>

内联样式使用css


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
		<h1 v-bind:style="{'color':'red','font-weight':'200'}">这是一个h1h1>
		
		<h1 v-bind:style="style">这是一个h1h1>
		
		<h1 v-bind:style="[style,style2]">这是一个h1h1>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				style:{'color':'red','font-weight':'200'},
				style2:{'fontStyle':'italic'}
			},
			methods:{

			}
		})
	script>
body>
html>

v-for进行循环


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
		<p>{{list[0]}}p>
		<p>{{list[1]}}p>
		
		<p v-for="(item,index) in list">
			内容是{{item}},索引值是{{index}}
		p>
		
		<p v-for="(user,index) in objList">
			id:{{user.id}},name:{{user.name}},索引是{{index}}
		p>
		
		<p v-for="(value,key,index) in user">
			值为{{value}},键名为{{key}},索引为{{index}}
		p>
		
		<p v-for="count in 2">这是第{{count}}次循环p>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				list:[1,2],
				objList:[
					{id:1,name:'zs1'},
					{id:2,name:'zs2'}
				],
				user:{
					id:1,
					name:'托尼'
				}
			},
			methods:{

			}
		})
	script>
body>
html>

v-for需要和v-key合并使用，否则会出现下面的问题


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<div>
			<label>
				Id:<input type="text" v-model="id">
			label>
			<label>
				Name:<input type="text" v-model="name">
			label>
			<input type="button" value="添加" v-on:click="add">
		div>
		
		
		
		
		<p v-for="item in list" v-bind:key="item">
			<input type="checkbox">
			{{item.id}}-----{{item.name}}
		p>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'李斯'},
					{id:2,name:'嬴政'},
					{id:3,name:'赵高'}
				],
				id:'',
				name:''
			},
			methods:{
				add(){
					this.list.unshift({id:this.id,name:this.name});
				}
			}
		})
	script>
body>
html>

v-if和v-show


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="button" value="toggle" v-on:click="toggle">
		
		
		<h3 v-if="flag">这是用v-if控制的元素h3>
		
		
		<h3 v-show="flag">这是用v-show控制的元素h3>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{
				toggle(){
					this.flag=!this.flag;
				}
			}
		})
	script>
body>
html>

2、做一个小系统，品牌管理

添加汽车


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		<input type="text" v-model="name">
		<input type="button" value="添加" v-on:click="add()">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				<tr v-for="car in list" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					<td>{{car.ctime}}td>
					<td><a href="">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				}
			}
		})
	script>
body>
html>

删除功能的实现（1、some搭配splice 2、findIndex搭配splice）


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		<input type="text" v-model="name">
		<input type="button" value="添加" v-on:click="add()">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				<tr v-for="car in list" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					<td>{{car.ctime}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				}
			}
		})
	script>
body>
html>

搜索功能的实现（1、forEach搭配indexOf 2、filter搭配includes）


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		<input type="text" v-model="name">
		<input type="button" value="添加" v-on:click="add()">
		<input type="text" v-model="keywords">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					<td>{{car.ctime}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			}
		})
	script>
body>
html>

过滤器的使用


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
		
		<p>{{msg | filter1('九') | filter2 }}p>
	div>
	<script type="text/javascript">
		// filter(过滤器名字,function(数据,想要传入的参数....))
		Vue.filter('filter1',function(data,num){
			// 返回一个修改过以后的字符串
			return data.replace(/七/g,num)
		})
		Vue.filter('filter2',function(data){
			return data+"这是第二个过滤器"
		})
		var vm=new Vue({
			el:'#app',
			data:{
				msg:"七根藤上七个葫芦，七个葫芦变成七个葫芦娃"
			},
			methods:{

			}
		})
	script>
body>
html>

格式化时间(使用全局过滤器实现)


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		<input type="text" v-model="name">
		<input type="button" value="添加" v-on:click="add()">
		<input type="text" v-model="keywords">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					
					<td>{{car.ctime | timeFilter()}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=date.getMonth()+1
			var d=date.getDate()
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours()
				var min=date.getMinutes()
				var s=date.getSeconds()
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			}
		})
	script>
body>
html>

使用私有过滤器实现，当私有过滤器和全局过滤器名字一样的时候，优先使用私有过滤器


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		<input type="text" v-model="name">
		<input type="button" value="添加" v-on:click="add()">
		<input type="text" v-model="keywords">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					
					<td>{{car.ctime | timeFilter()}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=date.getMonth()+1
			var d=date.getDate()
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours()
				var min=date.getMinutes()
				var s=date.getSeconds()
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			filters:{ //私有的过滤器
				timeFilter:function(data,pattern=""){
					//根据传入的模式判断要什么格式的时间
					var date=new Date(data)
					var y=date.getFullYear()
					var m=date.getMonth()+1
					var d=date.getDate()
					// 如果是yyyy-mm-dd那么就返回这个格式
					if(pattern.toLowerCase()=='yyyy-mm-dd'){
						// 使用``来格式化输出，${}为占位符
						return `${y}-${m}-${d}`
					} else{
						var h=date.getHours()
						var min=date.getMinutes()
						var s=date.getSeconds()
						return `${y}-${m}-${d} ${h}:${min}:${s}~~~~~~~~~~~`
					}
				}
			}
		})
	script>
body>
html>

padStart(2,‘0’)可以实现字符串的补充，当不足2位的时候，用0补充

自定义案件修饰符


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		
		<input type="text" v-model="name" v-on:keyup.f2="add()">
		<input type="button" value="添加" v-on:click="add()">
		<input type="text" v-model="keywords">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					
					<td>{{car.ctime | timeFilter()}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=(date.getMonth()+1).toString().padStart(2,'0')
			var d=date.getDate().toString().padStart(2,'0')
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours().toString().padStart(2,'0')
				var min=date.getMinutes().toString().padStart(2,'0')
				var s=date.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		// 自定义全局的按键修饰符
		Vue.config.keyCodes.f2=113
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			filters:{ //私有的过滤器
				timeFilter:function(data,pattern=""){
					//根据传入的模式判断要什么格式的时间
					var date=new Date(data)
					var y=date.getFullYear()
					var m=(date.getMonth()+1).toString().padStart(2,'0')
					var d=date.getDate().toString().padStart(2,'0')
					// 如果是yyyy-mm-dd那么就返回这个格式
					if(pattern.toLowerCase()=='yyyy-mm-dd'){
						// 使用``来格式化输出，${}为占位符
						return `${y}-${m}-${d}`
					} else{
						var h=date.getHours().toString().padStart(2,'0')
						var min=date.getMinutes().toString().padStart(2,'0')
						var s=date.getSeconds().toString().padStart(2,'0')
						return `${y}-${m}-${d} ${h}:${min}:${s}~~~~~~~~~~~`
					}
				}
			}
		})
	script>
body>
html>

自定义指令，去实现刷新页面时，自动聚焦到想要的文本框上


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		
		<input type="text" v-model="name" v-on:keyup.f2="add()">
		<input type="button" value="添加" v-on:click="add()">
		<input type="text" v-model="keywords" v-focus>
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					
					<td>{{car.ctime | timeFilter()}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=(date.getMonth()+1).toString().padStart(2,'0')
			var d=date.getDate().toString().padStart(2,'0')
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours().toString().padStart(2,'0')
				var min=date.getMinutes().toString().padStart(2,'0')
				var s=date.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		// 自定义全局的按键修饰符
		Vue.config.keyCodes.f2=113
		// 使用Vue.directive() 定义全局的指令 v-focus
		// 其中：参数1：指令的名称,注意，在定义的时候，指令的名称前面不需要加上v-前缀
		// 但是：在调用的时候，必须在指令名称前加上v-前缀进行调用
		// 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
		Vue.directive('focus',{
			bind:function(el){
			//每当当前指令被绑定到元素上的时候，会立即执行这个bind函数，只执行一次
			//这个el元素是一个原声的js对象
			// 在元素刚绑定了指令的时候，还没偶插入到DOM中去，这时候，调用focus方法没有作用，因为一个元素只有插入DOM树之后，才能执行
				// el.focus()
			},
			inserted:function(el){
			//inserted表示元素插入到dom树中的时候才会触发
				el.focus()
			},
			updated:function(el){
				//当VNode更新的时候，会执行updated，可能会触发多次
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			filters:{ //私有的过滤器
				timeFilter:function(data,pattern=""){
					//根据传入的模式判断要什么格式的时间
					var date=new Date(data)
					var y=date.getFullYear()
					var m=(date.getMonth()+1).toString().padStart(2,'0')
					var d=date.getDate().toString().padStart(2,'0')
					// 如果是yyyy-mm-dd那么就返回这个格式
					if(pattern.toLowerCase()=='yyyy-mm-dd'){
						// 使用``来格式化输出，${}为占位符
						return `${y}-${m}-${d}`
					} else{
						var h=date.getHours().toString().padStart(2,'0')
						var min=date.getMinutes().toString().padStart(2,'0')
						var s=date.getSeconds().toString().padStart(2,'0')
						return `${y}-${m}-${d} ${h}:${min}:${s}~~~~~~~~~~~`
					}
				}
			}
		})
	script>
body>
html>

自定义指令中的第二个参数，获取指令的相关信息或者传入参数


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		
		<input type="text" v-model="name" v-on:keyup.f2="add()">
		<input type="button" value="添加" v-on:click="add()">
		
		<input type="text" v-model="keywords" v-focus v-color="'blue'">
		<table>
			<thead>
				<tr>
					<td>Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					
					<td>{{car.ctime | timeFilter()}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=(date.getMonth()+1).toString().padStart(2,'0')
			var d=date.getDate().toString().padStart(2,'0')
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours().toString().padStart(2,'0')
				var min=date.getMinutes().toString().padStart(2,'0')
				var s=date.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		// 自定义全局的按键修饰符
		Vue.config.keyCodes.f2=113
		// 使用Vue.directive() 定义全局的指令 v-focus
		// 其中：参数1：指令的名称,注意，在定义的时候，指令的名称前面不需要加上v-前缀
		// 但是：在调用的时候，必须在指令名称前加上v-前缀进行调用
		// 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
		Vue.directive('focus',{
			bind:function(el){
			//每当当前指令被绑定到元素上的时候，会立即执行这个bind函数，只执行一次
			//这个el元素是一个原声的js对象
			// 在元素刚绑定了指令的时候，还没偶插入到DOM中去，这时候，调用focus方法没有作用，因为一个元素只有插入DOM树之后，才能执行
				// el.focus()
			},
			inserted:function(el){
			//inserted表示元素插入到dom树中的时候才会触发
			//写入和js行为相关的操作
				el.focus()
			},
			updated:function(el){
				//当VNode更新的时候，会执行updated，可能会触发多次
			}
		})
		Vue.directive('color',{
			// 第一个参数为元素对象，第二个为指令信息，其中包含的几个主要属性分别为:value计算出来的值,expression表达式,name指令名字
			bind:function(el,binding){
				// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定会有一个内联的样式
				//和样式相关的操作
				el.style.color=binding.value
				console.log(`binding.name:${binding.name},binding.expression:${binding.expression}`)
			}
		})


		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			filters:{ //私有的过滤器
				timeFilter:function(data,pattern=""){
					//根据传入的模式判断要什么格式的时间
					var date=new Date(data)
					var y=date.getFullYear()
					var m=(date.getMonth()+1).toString().padStart(2,'0')
					var d=date.getDate().toString().padStart(2,'0')
					// 如果是yyyy-mm-dd那么就返回这个格式
					if(pattern.toLowerCase()=='yyyy-mm-dd'){
						// 使用``来格式化输出，${}为占位符
						return `${y}-${m}-${d}`
					} else{
						var h=date.getHours().toString().padStart(2,'0')
						var min=date.getMinutes().toString().padStart(2,'0')
						var s=date.getSeconds().toString().padStart(2,'0')
						return `${y}-${m}-${d} ${h}:${min}:${s}~~~~~~~~~~~`
					}
				}
			}
		})
	script>
body>
html>

私有的自定义指令


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<input type="text" v-model="id">
		
		<input type="text" v-model="name" v-on:keyup.f2="add()">
		<input type="button" value="添加" v-on:click="add()">
		
		<input type="text" v-model="keywords" v-focus v-color="'blue'">
		<table>
			<thead>
				<tr>
					<td v-fontweight="900">Idtd>
					<td>Nametd>
					<td>Ctimetd>
					<td>Operationtd>
				tr>
			thead>
			<tbody>
				
				<tr v-for="car in search(keywords)" v-bind:key="car.id">
					<td>{{car.id}}td>
					<td v-text="car.name">td>
					
					<td>{{car.ctime | timeFilter()}}td>
					
					<td><a href="" v-on:click.prevent="del(car.id)">删除a>td>
				tr>
			tbody>
		table>
	div>
	<script type="text/javascript">
		// 设置全局的过滤器
		Vue.filter('timeFilter',function(data,pattern=""){
			//根据传入的模式判断要什么格式的时间
			var date=new Date(data)
			var y=date.getFullYear()
			var m=(date.getMonth()+1).toString().padStart(2,'0')
			var d=date.getDate().toString().padStart(2,'0')
			// 如果是yyyy-mm-dd那么就返回这个格式
			if(pattern.toLowerCase()=='yyyy-mm-dd'){
				// 使用``来格式化输出，${}为占位符
				return `${y}-${m}-${d}`
			} else{
				var h=date.getHours().toString().padStart(2,'0')
				var min=date.getMinutes().toString().padStart(2,'0')
				var s=date.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${h}:${min}:${s}`
			}
		})
		// 自定义全局的按键修饰符
		Vue.config.keyCodes.f2=113
		// 使用Vue.directive() 定义全局的指令 v-focus
		// 其中：参数1：指令的名称,注意，在定义的时候，指令的名称前面不需要加上v-前缀
		// 但是：在调用的时候，必须在指令名称前加上v-前缀进行调用
		// 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
		Vue.directive('focus',{
			bind:function(el){
			//每当当前指令被绑定到元素上的时候，会立即执行这个bind函数，只执行一次
			//这个el元素是一个原声的js对象
			// 在元素刚绑定了指令的时候，还没偶插入到DOM中去，这时候，调用focus方法没有作用，因为一个元素只有插入DOM树之后，才能执行
				// el.focus()
			},
			inserted:function(el){
			//inserted表示元素插入到dom树中的时候才会触发
			//写入和js行为相关的操作
				el.focus()
			},
			updated:function(el){
				//当VNode更新的时候，会执行updated，可能会触发多次
			}
		})
		Vue.directive('color',{
			// 第一个参数为元素对象，第二个为指令信息，其中包含的几个主要属性分别为:value计算出来的值,expression表达式,name指令名字
			bind:function(el,binding){
				// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定会有一个内联的样式
				//和样式相关的操作
				el.style.color=binding.value
				console.log(`binding.name:${binding.name},binding.expression:${binding.expression}`)
			}
		})


		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'宝马',ctime:new Date()},
					{id:2,name:'奔驰',ctime:new Date()}
				],
				id:"",
				name:"",
				keywords:""
			},
			methods:{
				add(){
					var car={id:this.id,name:this.name,ctime:new Date()}
					this.list.push(car)
					this.id=""
					this.name=""
				},
				del(id){
					// 循环list,当其中的id等于传入的id的时侯，暂停循环，其中的i，代表的是index,用index才能删除
					// this.list.some((item,index)=>{
					// 	if(item.id == id){
					// 		// 删除一个，位置为index
					// 		this.list.splice(index,1);
					// 		//返回true时，退出循环
					// 		return true;
					// 	}
					// })
					// 同理，先获得index,再删除
					var index=this.list.findIndex(item=>{
						if(item.id == id){
							return true;
						}
					})
					this.list.splice(index,1);
				},
				search(keywords){
					// // 新建一个list，用来存放结果
					// var newList=[]
					// // 循环原来的list
					// this.list.forEach(item=>{
					// 	// 如果单个个体中.indexOf(keywords)!=-1,说明在这里面找到了这串字符串，即可以添加到新的数组中去。
					// 	// 同时，这个方法对于当keywords=""的情况也是能找到的所以比较适合用这个方法
					// 	if(item.name.indexOf(keywords)!=-1){
					// 		newList.push(item)
					// 	}
					// })
					// return newList


					// 这个函数可以返回一个新的数组，而这个数组自己定义，不断返回叠加形成要返回的数组
					return this.list.filter(item=>{
						// 当满足条件，那么就返回一个item给新的list
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			filters:{ //私有的过滤器
				timeFilter:function(data,pattern=""){
					//根据传入的模式判断要什么格式的时间
					var date=new Date(data)
					var y=date.getFullYear()
					var m=(date.getMonth()+1).toString().padStart(2,'0')
					var d=date.getDate().toString().padStart(2,'0')
					// 如果是yyyy-mm-dd那么就返回这个格式
					if(pattern.toLowerCase()=='yyyy-mm-dd'){
						// 使用``来格式化输出，${}为占位符
						return `${y}-${m}-${d}`
					} else{
						var h=date.getHours().toString().padStart(2,'0')
						var min=date.getMinutes().toString().padStart(2,'0')
						var s=date.getSeconds().toString().padStart(2,'0')
						return `${y}-${m}-${d} ${h}:${min}:${s}~~~~~~~~~~~`
					}
				}
			},
			directives:{
				//私有的自定义指令
				fontweight:function(el,binding){
					el.style.fontWeight=binding.value
				}
			}
		})
	script>
body>
html>

生命周期的钩子函数


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<h3 id="h3">{{msg}}h3>
		<input type="button" value="修改" v-on:click="msg='ok'">
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				msg:"测试数据"
			},
			methods:{
				show(){
					console.log("执行了show方法")
				}
			},
			beforeCreate(){//这是我们遇到的第一个生命周期函数，表示完全被创建出来之前，会执行它
				// console.log(this.msg)
				// this.show()
				// 注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化
			},
			created(){//遇见的第二个生命周期函数
				// console.log(this.msg)
				// this.show()
				//此时的data和methods方法都初始化完成，所以可以调用了
			},
			beforeMount(){//这是遇见的第三个生命周期函数，表示，模板已经在内存中编译完成，但是还没有渲染到页面中
				// console.log(document.getElementById("h3").innerText)
				//在beforeMount执行的时候，页面中的数据还没有被真正的替换过来，只是之前写的一些字符模板字符串
			},
			mounted(){//遇见的第四个生命周期函数，表示内存中的模板，已经被真正的挂载到了页面上，用户可以看到渲染好的页面了
				// console.log(document.getElementById('h3').innerText)
				//mounted是实例创建期间的最后一个生命周期函数，但执行完mounted，就表示，实例已经完全创建好了，如果没有别的操作，这个实例就创建好了
			},
			beforeUpdate(){//表示更新时，遇见的第一个生命周期函数
				// console.log("data:"+this.msg+"页面:"+document.getElementById('h3').innerText)
				//数据被更新，但是页面还没有被渲染
			},
			updated(){//表示更新时，遇见的第二个生命周期函数
				// console.log("data:"+this.msg+"页面:"+document.getElementById('h3').innerText)
				//不仅内存中的数据被更新了，而且页面也被渲染了
			}
		})
	script>
body>
html>

Vue中发起get,post,jsonp请求


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	
	<script type="text/javascript" src="./lib/vue.resource-1.5.1.js">script>
head>
<body>
	<div id="app">
		<input type="button" value="get请求" v-on:click="getInfo()">
		<input type="button" value="post请求" v-on:click="postInfo()">
		<input type="button" value="jsonp请求" v-on:click="jsonpInfo()">
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				getInfo(){
					this.$http.get('http://jsonplaceholder.typicode.com/posts',{}).then(function(result){
						console.log(result)
					})
				},
				postInfo(){//手动发起的post请求，默认没有表单格式，所以有的服务器处理不了，通过post方法的第三个参数{emulateJSON:true}设置提交内容类型为普通表单数据
					this.$http.post('http://jsonplaceholder.typicode.com/posts',{},{emulateJSON:true}).then(function(result){
						console.log(result.body)
					})
				},
				jsonpInfo(){
					this.$http.jsonp('http://jsonplaceholder.typicode.com/posts',{}).then(function(result){
						console.log(result.body)
					})
				}
			}
		})
	script>
body>
html>

JSONP原理解析(通过script标签发起跨域请求)

js端代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
	div>
	<script type="text/javascript">
		function a(data){
			console.log(data)
		}
	script>
	<script src="http://localhost:8080//sliver/test/a">script>
body>
html>

服务器端

@RequestMapping("/test/{functionName}")
    @ResponseBody
    public String test(@PathVariable(name = "functionName") String functionName){
        System.out.println("测试成功");
        List<Integer> arrayList=new ArrayList();
        arrayList.add(1);
        arrayList.add(2);
        return functionName+"("+arrayList.toString()+")";
    }

全局请求根路径的配置，还有全局的emulate配置


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<script type="text/javascript" src="./lib/vue.resource-1.5.1.js">script>
head>
<body>
	<div id="app">
		<input type="button" value="post请求" v-on:click="post()">
	div>
	<script type="text/javascript">
		// 统一请求的根路径
		Vue.http.options.root='http://jsonplaceholder.typicode.com'
		// 不用再写emulateJSON=true
		Vue.http.options.emulateJSON=true
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				post(){
					this.$http.post('posts',{}).then(
						function(result){
							console.log(result.body)
						})
				}
			}
		})
	script>
body>
html>

3、过渡动画和组件

使用过渡类名实现动画(使用name，做到一个页面多种过渡)


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<link rel="stylesheet" href="./lib/animate.min.css">
head>
<style type="text/css">
	.my-enter,.my-leave-to{/*代表的是最开始或者最后的时间段*/
		opacity:0;
		transform: translateX(150px);
	}
	.my-enter-active,.my-leave-active{/*代表的是进入或者离场时候的时间段，不需要使用v-enter-to或者v-leave，直接用这两个就行了*/
		transition: all 0.8s ease;
	}
style>
<body>
	<div id="app">
		<input type="button" value="切换" v-on:click="flag=!flag">
		
		
		<transition name="my">
			
			<h3 v-if="flag">过渡动画测试用例h3>
		transition>
		<hr>
		<input type="button" value="切换" v-on:click="flag1=!flag1">
		
		
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" v-bind:duration="{'enter':200,'leave':800}">
			<h3 v-if="flag1">过渡动画测试用例h3>
		transition>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				flag:false,
				flag1:false
			},
			methods:{

			}
		})
	script>
body>
html>

自定义动画效果


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<link rel="stylesheet" href="./lib/animate.min.css">
head>
<style type="text/css">
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
	}
style>
<body>
	<div id="app">
		<input type="button" value="动起来" v-on:click="flag=!flag">
		
		
		<transition v-on:before-enter="beforeEnter" v-on:enter="Enter" v-on:after-enter="afterEnter">
			<div class="ball" v-show="flag">div>
		<transition>
	div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				flag:false
			},
			methods:{
				// 生命周期钩子函数的第一个参数一般都是el,代表了要操作的dom对象
				beforeEnter(el){
					el.style.transform="translate(0,0)"
				},
				// done代表的是下一个要执行的钩子函数,必须要执行以下,否则可能出现bug
				Enter(el,done){
					// 必须要加上这一行,否则不会出现动画效果,可以理解为不断刷新
					el.offsetWidth
					el.style.transform="translate(150px,450px)"
					el.style.transition="all 1s ease"
					done()
				},
				afterEnter(el){
					this.flag=!this.flag
				}

			}
		})
	script>
body>
html>

列表的添加过渡动画


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<style type="text/css">
		.my-enter,.my-leave-to{/*代表的是最开始或者最后的时间段*/
		opacity:0;
		transform: translateX(150px);
	}
	.my-enter-active,.my-leave-active{/*代表的是进入或者离场时候的时间段，不需要使用v-enter-to或者v-leave，直接用这两个就行了*/
		transition: all 0.8s ease;
	}
	style>
head>
<body>
	<div id="app">
		<input type="text" v-model="name" v-on:keyup.enter="add" v-focus>
		
		<ul>
			<transition-group name=my>
				<li v-for="item in list" v-bind:key="item.id">
					{{item.id}}:{{item.name}}
				li>
			transition-group>
		ul>
		
	div>
	<script type="text/javascript">
		Vue.directive('focus',{
			inserted:function(el){
				el.focus()
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'李健'},
					{id:2,name:'清华'}
				],
				name:''
			},
			methods:{
				add(){
					var person={'id':this.list.length+1,'name':this.name}
					this.list.push(person)
					this.name=''
				}
			}
		})
	script>
body>
html>

列表的删除过渡动画


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<style type="text/css">
		.my-enter,.my-leave-to{/*代表的是最开始或者最后的时间段*/
		opacity:0;
		transform: translateX(150px);
	}
	.my-enter-active,.my-leave-active{/*代表的是进入或者离场时候的时间段，不需要使用v-enter-to或者v-leave，直接用这两个就行了*/
		transition: all 0.8s ease;
	}
	/*元素移动的时候的默认写法，记住就行了*/
	.my-move{
		transition: all 0.6s ease;
	}
	.my-leave-active{
		position: absolute;
	}
	style>
head>
<body>
	<div id="app">
		<input type="text" v-model="name" v-on:keyup.enter="add" v-focus>
		
		<ul>
			<transition-group name=my>
				<li v-for="(item,index) in list" v-bind:key="item.id" v-on:click="del(index)">
					{{item.id}}:{{item.name}}
				li>
			transition-group>
		ul>
		
	div>
	<script type="text/javascript">
		Vue.directive('focus',{
			inserted:function(el){
				el.focus()
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'李健'},
					{id:2,name:'清华'}
				],
				name:''
			},
			methods:{
				add(){
					var person={'id':this.list.length+1,'name':this.name}
					this.list.push(person)
					this.name=''
				},
				del(index){
					this.list.splice(index,1)
				}
			}
		})
	script>
body>
html>

appear使得刚加载页面时直接使用过渡效果。tag，改变了transition-group渲染以后的标签名字


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<style type="text/css">
		.my-enter,.my-leave-to{/*代表的是最开始或者最后的时间段*/
		opacity:0;
		transform: translateX(150px);
	}
	.my-enter-active,.my-leave-active{/*代表的是进入或者离场时候的时间段，不需要使用v-enter-to或者v-leave，直接用这两个就行了*/
		transition: all 0.8s ease;
	}
	/*元素移动的时候的默认写法，记住就行了*/
	.my-move{
		transition: all 0.6s ease;
	}
	.my-leave-active{
		position: absolute;
	}
	style>
head>
<body>
	<div id="app">
		<input type="text" v-model="name" v-on:keyup.enter="add" v-focus>
		
		
		
		<transition-group name='my' appear tag='ul'>
			<li v-for="(item,index) in list" v-bind:key="item.id" v-on:click="del(index)">
				{{item.id}}:{{item.name}}
			li>
		transition-group>
		
	div>
	<script type="text/javascript">
		Vue.directive('focus',{
			inserted:function(el){
				el.focus()
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'李健'},
					{id:2,name:'清华'}
				],
				name:''
			},
			methods:{
				add(){
					var person={'id':this.list.length+1,'name':this.name}
					this.list.push(person)
					this.name=''
				},
				del(index){
					this.list.splice(index,1)
				}
			}
		})
	script>
body>
html>

组件的3种创建方式，还有私有组件如何创建


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<template1>template1>
		<template2>template2>
		<template3>template3>
		<template4>template4>
	div>
	<template id="id">
		<div>
			<h1>可以通过在vue实例的html元素外面写一个template标签，而这里面的内容就会变成我们所需要的模板内容，而且不会被页面解析h1>
			<h1>需要给template标签设置一个名字，这样子就能通过Vue.component将模板赋值给组件了h1>
			<h1>注意只能有一个根标签，所以用了一个div包裹住h1>
		div>
	template>
	<script type="text/javascript">
		// 组件中都只能有一个根元素，多了则报错
		// 组件的第一种创建方式，先创建模板，再赋给组件
		var template1=Vue.extend({
			template:"
这是组件的写法
"
		})
		Vue.component("template1",template1)
		// 组件的第二种创建方式
		Vue.component('template2',{
			template:"
组建创建方法2
"
		})
		// 组件的第三种创建方式
		Vue.component('template3',{
			template:"#id"
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			components:{ //创建私有的组件，而创建方法同样使用上面三种
				template4:{
					template:"#id"
				},
			}
		})
	script>
body>
html>

组件中data和methods的写法


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<temp>temp>
		<hr>
		<temp>temp>
	div>
	<template id="temp">
		<div>
			<input type="button" value="+1" v-on:click="add">
			{{count}}
		div>
	template>
	<script type="text/javascript">
		// 1、component组件中自带有data属性
		// 2、data必须为一个方法体，这是因为每个组件之间不应该有任何的联系，所以应该是一个方法体，并返回一个对象，而这个对象，也只属于当前调用的模板
		// 3、data的方法体必须返回一个对象,其实相当于将原来vue实例中创建对像的数据当作一个对象，返回。结果是一样的。，而我们的methods或者模板都能够调用这个参数
		// 4、使用方法和原来的代码中使用Vue实例的data一致
		Vue.component('temp',{
			template:'#temp',
			data:function(){
				return {count:0}
			},
			methods:{
				add(){
					this.count++
				}
			}
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			}
		})
	script>
body>
html>

切换组件的两种方式，组件切换时的过渡效果

 
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Documenttitle>
 	<script type="text/javascript" src="./lib/vue.min.js">script>
 	<style type="text/css">
 		.v-enter,.v-leave-to{
 			opacity: 0;
 			transform: translateX(150px);
 		}
 		.v-enter-active,.v-leave-active{
 			transition:all 1s ease;
 		}
 	style>
 head>
 <body>
 	<div id="app">
 		
 		<div v-on:click="flag=true">登陆div>
 		<div v-on:click="flag=false">注册div>
 		<login v-if="flag">login>
 		
 		<register v-else="flag">register>

 		
 		<div v-on:click="componentName='login'">登陆div>
 		<div v-on:click="componentName='register'">注册div>
 		
 		
 		
 		<transition mode="out-in">
 			<component v-bind:is="componentName">component> 		
 		transition>
 	div>
 	<script type="text/javascript">
 		Vue.component('login',{
 			template:'
登陆组件
'
 		})
 		Vue.component('register',{
 			template:'
注册组件
'
 		})
 		var vm=new Vue({
 			el:'#app',
 			data:{
 				flag:false,
 				componentName:'login'
 			},
 			methods:{
 
 			}
 		})
 	script>
 body>
 html>

4、父子组件

父组件向子组件传值


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
		<id v-bind:parentmsg="msg">id>
	div>
	<template id="id">
		<div>
			<h3>{{msg}}h3>
			{{parentmsg}}
		div>
	template>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				msg:"父组件的信息"
			},
			methods:{

			},
			components:{
				id:{
					template:"#id",
					data:function(){
						//可读可写
						//都是私有的属性
						return {msg:"子组件的信息"}
					},
					//可读不可写
					//这是父组件传入的属性
					props:['parentmsg']
				}
			}
		})
	script>
body>
html>

将父函数传给子组件使用


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
		<son v-on:func="father">son>
	div>
	
	<template id="son">
		<div>
			<input type="button" value="调用自己的方法来触发爹的方法" v-on:click="son">
		div>
	template>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				father(data,data1){
					console.log("这不就是爹的方法了么-----"+data+data1)
				}
			},
			//1、先写一个组件
			components:{
				son:{
					template:'#son',
					// 4、在调用儿子函数的时候，顺带调用父亲的函数
					methods:{
						son(){
							console.log("先执行了儿子的方法")
							// 5、使用this.$emit方法调用父函数，而参数这是按照这样的格式一个个排列下去
							this.$emit('func',1,2)
						}
					}
				}
			}
		})
	script>
body>
html>

父组件向子组件传值，传方法，并读取保存localStorage的案例


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<son v-bind:personlist="list" v-on:func="loadComments">
			
		son>
		<ul>
			<li v-for="item in list" v-bind:key="item.id">
				姓名为{{item.name}},内容为{{item.content}}
			li>
		ul>
	div>
	<template id="son">
		<div>
			姓名<input type="text" v-model="name">
			内容<input type="textarea" v-model="content">
			<input type="button" value="添加" v-on:click="add">
		div>
	template>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				list:[]			
			},
			methods:{
				loadComments(){
					// 从localStorage中加载数据,如果加载内容为空则返回[]
					var list=JSON.parse(localStorage.getItem('cmts')||'[]')
					// 然后覆盖当前的页面中设置的内容
					this.list=list
				}
			},
			components:{
				son:{
					template:'#son',
					data:function(){
						return {id:'',name:'',content:''}
					},
					methods:{
						add(){
							//1、先获取输入的内容
							var comment={id:new Date(),name:this.name,content:this.content}
							//2、获取父组件中所有的list信息,其实就是父组件传进来的personList
							var list=this.personlist
							//3、给这个list新增信息
							list.unshift(comment)
							//4、将列表放到localStorage中
							localStorage.setItem('cmts',JSON.stringify(list))
							//5、设置名字和内容皆为空，还原表单
							this.name=this.content=''
							//6、当新增完以后，需要调用父组件的loadComments方法，来刷新父组件的数据，才可能让页面的显示数据为最新版本的
							this.$emit('loadComments')
						}
					},
					props:['personlist']
				}
			},
			created(){
				// 在数据和方法初始化完成以后，使用loadComment方法，这样子才可以更新数据
				this.loadComments()
			}
		})
	script>
body>
html>

获取元素的dom对象，父组件引用子组件的方法或数据


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		<h3 ref="h3">测试h3>
		<input type="button" value="获取dom元素" v-on:click="common">
		<son ref="myson">son>
		<input type="button" value="获取子组件元素" v-on:click="component">
	div>
	<template id="son">
		<div>
			<h3>{{msg}}h3>
		div>
	template>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				common(){
					// 可以直接获取dom元素，前提，标签上要设置ref
					console.log(this.$refs.h3.innerText)
				},
				component(){
					// 前提，子组件标签上要设置ref
					// 直接获取子组件中的data
					console.log(this.$refs.myson.msg)
					// 直接调用子组件中的方法
					this.$refs.myson.son()
				}
			},
			components:{
				son:{
					template:"#son",
					data:function(){
						return {
							msg:"ok"
						}
					},
					methods:{
						son(){
							console.log("子方法")
						}
					}
				}
			}
		})
	script>
body>
html>

路由的使用(创建路由对象,router-view,router-link,通过路由切换组件)


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	
	<script type="text/javascript" src="./lib/vue-router.js">script>
head>
<body>
	<div id="app">

		
		<a href="#/login">logina>
		<a href="#/register">registera>
		
		
		<router-link to="/login" tag="span">loginrouter-link>
		<router-link to="/register" tag="h3">registerrouter-link>
		
		<router-view>router-view>
	div>
	<script type="text/javascript">
		// 2、创建对应的摸板
		var login={
			template:'
login
'
		}
		var register={
			template:'
register
'
		}
		// 3、创建路由对象，在其中指定路由规则
		var router=new VueRouter({
			routes:[
				// redirect强制使用对应路由的template，可以用来设置初始页面显示登录页
				{path:'/',redirect:'/login'},
				// 这里面用的component指的是模板的名字，不是组件的名字，所以在这个例子里面，没有创建组件
				{path:'/login',component:login},
				{path:'/register',component:register}
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			// 4、建立Vue和VueRouter之间的练习
			router:router
		})
	script>
body>
html>

设置选中路由高亮


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<script type="text/javascript" src="./lib/vue-router.js">script>
	<style type="text/css">
		.router-link-active{
			color:skyblue;
		}
		.myactive{
			color:blue;
		}
	style>
head>
<body>
	<div id="app">
		
		
		<router-link to="/login">loginrouter-link>
		<router-link to="/register">registerrouter-link>
		<router-view>router-view>
	div>
	<script type="text/javascript">
		var login={
			template:"
login
"
		}
		var register={
			template:"
register
"
		}
		var router = new VueRouter({
			routes:[
				{path:'/login',component:login},
				{path:'/register',component:register}
			],
			linkActiveClass:'myactive'
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			router:router
		})
	script>
body>
html>

给路由添加动画


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<script type="text/javascript" src="./lib/vue-router.js">script>
	<style type="text/css">
		.router-link-active{
			color:skyblue;
		}
		.myactive{
			color:blue;
		}
		.v-enter,.v-leave-to{
			opacity: 0;
			transform: translateX(150px);
		}
		.v-enter-active,.v-leave-active{
			transition: all 1s ease;
		}
	style>
head>
<body>
	<div id="app">
		
		
		<router-link to="/login">loginrouter-link>
		<router-link to="/register">registerrouter-link>
		<transition mode="out-in">
			<router-view>router-view>
		transition>
	div>
	<script type="text/javascript">
		var login={
			template:"
login
"
		}
		var register={
			template:"
register
"
		}
		var router = new VueRouter({
			routes:[
				{path:'/login',component:login},
				{path:'/register',component:register}
			],
			linkActiveClass:'myactive'
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			router:router
		})
	script>
body>
html>

通过路由传值的两种方式


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<script type="text/javascript" src="./lib/vue-router.js">script>
head>
<body>
	<div id="app">
		
		<router-link to="/login?id=10&name=lisi">loginrouter-link>
		
		<router-link to="/register/20/zhangsan">registerrouter-link>
		<transition mode="out-in">
			<router-view>router-view>
		transition>
	div>
	<script type="text/javascript">
		var login={
			// 通过this.$route可以拿到当前的路由的对象信息，而query中装的就是data，所以可以通过这样的方式，拿到传过来的值
			template:"
login{{this.$route.query.id}}{{this.$route.query.name}}
"
		}
		var register={
			// 调用方法2，其中的属性体是params，而不是query
			template:"
register{{this.$route.params.id}}{{this.$route.params.name}}
"
		}
		var router = new VueRouter({
			routes:[
				{path:'/login',component:login},
				{path:'/register/:id/:name',component:register}
			],
			linkActiveClass:'myactive'
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			router:router
		})
	script>
body>
html>

路由嵌套


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<script type="text/javascript" src="./lib/vue-router.js">script>
head>
<body>
	<div id="app">
		<router-link to="/index">打开父亲路由router-link>
		
		<router-link to="/index/login">登陆路由router-link>
		<router-link to="/index/register">注册路由router-link>
		
		<router-view>router-view>
	div>
	
	<template id="parent">
		<div>
			父亲组件
			
			<router-view>router-view>
		div>
	template>
	<script type="text/javascript">
		var index={
			template:"#parent"
		}
		var login={
			template:"
login
"
		}
		var register={
			template:"
register
"
		}
		var router=new VueRouter({
			routes:[
				{
					path:'/index',
					component:index,
					// 写上这个标签，才能有子路由的对应路径，而且要注意，这里的path前面不能加'/'，否则就不会将父路由的路径加进去
					children:[
						{path:'login',component:login},
						{path:'register',component:register}
					]
				}
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			router:router
		})
	script>
body>
html>

在一个Vue实例中使用多个路由


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	<script type="text/javascript" src="./lib/vue-router.js">script>
head>
<body>
	<div id="app">
		
		<router-view name="header">router-view>
		<router-view name="left">router-view>
		<router-view name="main">router-view>
	div>
	<template id="header">
		<div>headerdiv>
	template>
	<template id="left">
		<div>leftdiv>
	template>
	<template id="main">
		<div>maindiv>
	template>
	<script type="text/javascript">
		var header={
			template:"#header"
		}
		var left={
			template:"#left"
		}
		var main={
			template:"#main"
		}

		var router=new VueRouter({
			routes:[
				// 需要指明的是，当改变为当前的路由的时候，哪个坑需要变化，需要变化为哪个
				// 同时，component属性变为了components需要注意
				{path:'/',components:{'header':header,'left':left,'main':main}}
			]
		})

		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			router:router
		})
	script>
body>
html>

监视普通数据变化的三种方式还有监视路由改变的一种方式


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
	
	<script type="text/javascript" src="./lib/vue-router.js">script>
head>
<body>
	<div id="app">
		
		
		<input type="text" v-model="firstname" v-on:keyup="getnamebykeyup">input>
		+
		<input type="text" v-model="lastname" v-on:keyup="getnamebykeyup">input>
		=
		<input type="text" v-model="fullname">input>


		<hr>


		
		
		<input type="text" v-model="firstname">input>
		+
		<input type="text" v-model="lastname">input>
		=
		<input type="text" v-model="fullname">input>		

		
		<hr>

		
		
		<input type="text" v-model="firstname">input>
		+
		<input type="text" v-model="lastname">input>
		=
		<input type="text" v-model="realname">input>		

		
		<hr>
		
		<router-view>router-view>
	div>
	<template id="index">
		<div>
			index
			<router-link to="/index/login" tag="a">loginrouter-link>
			<router-link to="/index/register" tag="a">registerrouter-link>
			<router-view tag="a">router-view>
		div>
	template>
	<template id="login">
		<div>logindiv>
	template>
	<template id="register">
		<div>registerdiv>
	template>
	<script type="text/javascript">
		var index={
			template:'#index'
		}
		var login = {
			template:'#login'
		}
		var register = {
			template : "#register"
		}
		var router = new VueRouter({
			routes:[
				{path:'/',component:index},
				{
					path:'/index',
					component:index,
					children:[
						{path:"login",component:login},
						{path:"register",component:register}
					]
				}
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{
				firstname:'',
				lastname:'',
				fullname:''
			},
			methods:{
				getnamebykeyup(){
					this.fullname = this.firstname+"--" +this.lastname
				}
			},
			router:router,
			watch:{
				//相当于只要是这个名字的值发生了变化，就会触发事件
				// 监视数据变化，其中的newvar和oldvar是默认的参数
				'firstname':function(newvar,oldvar){
					this.fullname = newvar+"--" +this.lastname
				},
				'lastname':function(newvar,oldvar){
					this.fullname = this.firstname + "--" + oldvar	
				},
				// 监视路由的地址改变
				'$route.path':function(newvar,oldvar){
					console.log(newvar+"-------------"+oldvar)
				}
			},
			computed:{
				// 直接当作属性使用，不需要再data中声名
				// 只要其中牵涉到的数据发生了改变，就会触发这个函数
				// 同时，不用管页面上到底有几个引用这个参数的地方，只需要知道，这个函数每次修改永远只会执行一遍
				realname:function(){
					return this.firstname+"-"+this.lastname
				}
			}
		})
	script>
body>
html>

5、webpack

安装nrm修改数据源，加快下包速度

npm i nrm -g //全局安装nrm，可以更换镜像源
nrm ls //查看源列表
nrm use npm //改变使用的源,下载依旧使用npm

使用npm下载webpack

npm  install  [email protected]   -g   //全局安装cnpm，指定3的。学会以后，变动可以查看官方文档

webpack第一次使用，制作一个间隔变色的ul,使用jquery

1、创建对应的文件结构

-webpack文件夹
	--dist文件夹
	--src文件夹
		--css文件夹
		--images文件夹
		--js文件夹
		--inidex.html文件
		--main.js文件

2、通过npm来安装jquery

npm i jquery -s
cnpm init -y
cnpm init // 通过这一句来生成基础目录的package.json文件

3、写好index.html


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	
	
	
	<script type="text/javascript" src="../dist/bundle.js">script>
head>
<body>
	<ul>
		<li>这是第1个lili>
		<li>这是第2个lili>
		<li>这是第3个lili>
		<li>这是第4个lili>
		<li>这是第5个lili>
		<li>这是第6个lili>
		<li>这是第7个lili>
		<li>这是第8个lili>
		<li>这是第9个lili>
		<li>这是第10个lili>
	ul>
body>
html>

4、main.js。而且这样子写只会发起一次请求，可以减少负担

// 这是main.js,是我们项目的js文件入口
import $ from 'jquery'

$(function(){
	$('li:odd').css('backgroundColor','green')
	$('li:even').css('backgroundColor','red')
})

5、最终，使用webpack 初始文件路径 目标文件路径的命令来生成对应的可用js

webpack .\src\main.js .\dist\bundle.js

简化webpack打包语句

const path = require('path')

module.exports = {
	// 为了不使用以下命令,进行了配置,可以不再输入来源和目的地.而是仅仅输入webpack即可
	// 原命令:webpack 原路径	目标路径
	// 新命令:webpack
	// 1.webpack发现命令中没有源文件和目标输出文件
	// 2.然后就去根目录下面找配置文件
	// 3.解析配置文件,得到配置对象
	// 4.根据配置对象,进行语句拼接,然后构建项目
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	}
}

自动编译打包（有可能还要根据提示安装webpack-cli.命令为:cnpm i webpack-cli）

// 1、全局安装cnpm,因为npm直接装webpack-dev-server不成功，我也不知道为什么
npm i cnpm -g
// 2、安装webpack-dev-server到本地的项目开发依赖中
cnpm i webpack-dev-server -D
// 3、如果想要正常运行，需要在本地项目中安装对应的webpack.注意是本地，全局安装过也没有用。本地本地本地
cnpm i webpack 
// 4、注意，想要正常运行的话还需要配置package.json,因为装的不是全局包，所以是不可以直接运行的，需要用下面的配置
// 5、在项目根路径下面,使用语句启动
npm run dev
// 6、修改index.html的js引用路径
// 结论1:最终会自动地将我们的项目发布到localhost:8080上面
// 结论2:自动的读取了配置文件，获取了输入和输出的路径
// 结论3:已经自动的将bundle.js以一种虚拟的形式托管到了项目根路径下面，所以可以直接使用localhost:8080/bundle.js
// 结论4:index.html中引用的bundle.js还是dist文件夹下面的
// 结论5：因为虚拟磁盘中的bundle.js可以实时刷新，所以将index.html中的引用文件路径改一下
// 结论6：不管他怎么生成，都只会给你一个虚拟内存中的bundle，永远不会有dist里面的，所以想要有还是要手动生成，但是项目已经可以不用执行语句就自动加载了

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     设置了这一条,因为webpack-dev-server我们不是全局安装的，所以不能被直接使用，只能这样来使用,运行的时候删除这行注释

    "dev":"webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
    
	<script type="text/javascript" src="/bundle.js">script>
head>
<body>
	<ul>
		<li>这是第1个lili>
		<li>这是第2个lili>
		<li>这是第3个lili>
		<li>这是第4个lili>
		<li>这是第5个lili>
		<li>这是第6个lili>
		<li>这是第7个lili>
		<li>这是第8个lili>
		<li>这是第9个lili>
		<li>这是第10个lili>
	ul>
body>
html>

webpack-dev-server启动设置的基本参数写法1

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     --open 自动打开浏览器
     --port 3000 启动的端口号
     --contentBase src 设置项目的托管路径。所以，通过将index.html也虚拟放置一份在托管路径的方式，可以实现不论你将根目录设置在哪里，打开它都会自动启动你的index.html。和项目的任何路径都无关。写路经的时候照旧。
     --hot 热部署，当只修改了css样式的时候可以不刷新页面，但是也做到了页面的样式变化。
     --热部署中，如果修改了js代码，那么就会刷新页面，和没有热部署的效果一样，所以是看不出来。只有css样式单独发生变化的时候才可以看出区别
    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

webpack-dev-server启动设置的基本参数写法2

const path = require('path')

// 第二步，获取webpack对象
const webpack = require('webpack')

module.exports = {
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	//修改webpack-dev-server的配置的第二种方式,前三项都是可以一步到位。但是热部署需要三步
	devServer:{
		open:true,
		port:3000,
		contentBase:'src',
		// 第一步,设置为true
		hot:true
	},
	plugins:[
		// 第三步，使用这样子的一个热部署插件
		new webpack.HotModuleReplacementPlugin()
	]
}

由于内存中有了一份js文件，所以想把index.html也放到内存中

const path = require('path')
const webpack = require('webpack')
// 1.先使用命令行安装一个插件 html-webpack-plugin
// cnpm i html-webpack-plugin -D
// 2.根据插件创建
const htmlWebpackPlugin=require('html-webpack-plugin')


module.exports = {
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	devServer:{
		open:true,
		port:3000,
		contentBase:'src',
		hot:true
	},
	plugins:[
		new webpack.HotModuleReplacementPlugin(),
		// 第三步,新建对象.	
		new htmlWebpackPlugin({
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		})
		// 结论1、此时已经可以根据plugins中的配置，创建一个对象,而这个对象代表了储存在内存中的index.html的文件位置
		// 结论2、由于结论1中已经创建了一个index.html,所以自启动打开的项目的就是这个插件所生成的内存中的首页
		// 结论3、在内存中的页面,会根据之前的配置自动地引入我们配置好的生成的内存中的js文件,所以我们可以不再手动的引入js文件,即删除index.html中引入文件的部分
	]
}

在main.js中引入css文件

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin=require('html-webpack-plugin')

// 1、使用cnpm i style-loader css-loader -D的方式安装loader插件



module.exports = {
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	devServer:{
		open:true,
		port:3000,
		contentBase:'src',
		hot:true
	},
	plugins:[
		new webpack.HotModuleReplacementPlugin(),
		new htmlWebpackPlugin({
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		})
	],
	module:{// 2、使用这两个插件
		rules:[
            //正则表达式，用来识别无法识别的文件类型
			{test:/\.css/,use:['style-loader','css-loader']}
		]
	}
}

import $ from 'jquery'

// 引入css文件即可
import './css/index.css'
// 使用过程：
// 1、发现这个文件不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则
// 2、如果找到了对应的规则，就使用对应的loader处理
// 3、再调用loader的时候，是从后往前调用的
// 4、当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js

$(function(){
	$('li:odd').css('backgroundColor','white')
	$('li:even').css('backgroundColor','black')
})

webpack引入的css文件中如果有使用url显示图片

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	devServer:{
		open:true,
		port:3000,
		contentBase:'src',
		hot:true
	},
	plugins:[
		new webpack.HotModuleReplacementPlugin(),
		new htmlWebpackPlugin({
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		})
	],
	module:{
		rules:[
			{test:/\.css$/,use:['style-loader','css-loader']},
			// 1、在webpack的项目中，如果是通过main.js中引入的文件中。里面的如果有对什么文件的路径索取，那么就必须要装好下面的这个插件。
			// 2、命令为: cnpm i url-loader file-loader -D
			// 3、然后进行下面的一个配置。具体例子用的是图片的,所以正则表达式是识别图片的
			// 4、这样子配置完以后就可以加载css当中涉及到的url,也就可以正常的显示图片了,而图片名字是:'hash-图片原名字.图片原后缀'
			// 5、由于会自动地将图片放到根目录下进行虚拟的托管，所以可以直接查看图片
			// 6、但正是由于都放到了根目录下面，所以造成了所有图片都保存在了同一个目录下。
			// 7、当设置的显示图片的名字为原名字.原后缀时。
			// 8、你如果加载了两个文件夹中名字相同的图片，但是内容不相同的时候。那么就会自动的把两个图片设置为同一个名字，通通放置在我们的根目录下
			// 9、所以就会出现，后加载的图片，覆写了前面一张图片。相当于之前加载的图片就没了。
			// 10、为了解决这个问题，我们将源文件名字前面加上一个hash值，这样子就会出现重复的情况了
             // 11、limit代表的是文件的大小，如果limit大于实际文件的大小，那么在页面上显示的时候就会显示base64的字符串地址
             // 12、如果limit小于或者等于实际文件的大小的时候，那么在页面显示的地址就是普通地址
			{test:/\.(png|jpg|gif|jpeg)$/,use:'url-loader?limit=75&name=[hash:8]-[name].[ext]'}
		]
	}
}

引入字体文件

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin=require('html-webpack-plugin')



module.exports = {
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	plugins:[
		new webpack.HotModuleReplacementPlugin(),
		new htmlWebpackPlugin({
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		})
	],
	module:{
		rules:[
			{test:/\.css$/,use:['style-loader','css-loader']},
			{test:/\.(png|jpg|gif|jpeg)$/,use:'url-loader?limit=75&name=[hash:8]-[name].[ext]'},
             // 先下载一个bootstrap，因为其中的css当中有一部分会有引用到字体文件
			// 当需要使用到字体文件的时候,需要创建新的loader,但是其中使用的loader就是我们加载图片的加载器
             // 在main.js中引入bootstrap的字体
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
		]
	}
}

引入文件的路径问题

先查看自己编写的文件的具体位置，以此为原点
../为父级目录
./为当前目录
/为根目录
从main.js中想要引用node_modules中的bootstrap中的css文件时路径应该为
找到父级目录的node_modules中的[email protected]@bootstrap中的dist中的css中的bootstrap.css文件
../node_modules/[email protected]@bootstrap/dist/css/bootstrap.css
而想要引用index.css时，路径应该为
找到当前路径的src文件夹中的css文件夹中的index.css文件
./src/css/index.css

引入babel

class Person{
	static info = {
		name : "张三",
		age : 20
	}
};
console.log(Person.info);
// 首先，为了引入这样的高级语法,我们必须要引入babel
// 引入babel的过程
// 1、首先下好babel需要的所有的依赖
// cnpm i @babel/core @babel/preset-env @babel/plugin-proposal-class-properties babel-loader -D
// 2、在webpack.config.js文件中,加入对babel-loader的引用
// 3、在项目根路径下创建.babelrc文件,写上下好的插件和预设

const path = require('path')

module.exports = {
	entry : path.join(__dirname,'./src/main.js'),
	output : {
		path : path.join(__dirname,'./dist'),
		filename : 'bundle.js'
	},
	module:{
		rules:[
			// 一定要去除node_modules文件夹
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
		]
	}
}

{
     "presets":["@babel/preset-env"],
     "plugins":["@babel/plugin-proposal-class-properties"]
}

//这是用到的所有babel和webpack相关的版本信息
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

使用render函数


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="./lib/vue.min.js">script>
head>
<body>
	<div id="app">
		
	div>
	<template id="temp">
		<h3>哈哈哈哈哈哈哈哈哈哈h3>
	template>
	<script type="text/javascript">
		var templates = {
			template : "#temp"
		}
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{

			},
			// 使用渲染,可将模板的html代码返回,直接替换掉vue实例控制的html控件。将内容直接进行一个替换。
			// 所以在真正的html页面上,
就不存在了,直接被替换为了template中的html代码
			render:function(createElements){
				return createElements(templates);
			}
		})
	script>
body>
html>

webpack中引用vue

// 为了引用Vue 首先 我们在npm中需要下载安装vue
// cnpm i vue -S
// 然后使用下面的代码加载vue的时候 我们发现了不对劲 因为根据提示得知 我们导入的vue是个残缺的vue 不是我们想要的vue
// import Vue from 'vue'
// 这里牵扯到了包的搜索机制
// 首先 我们会去找到一个叫做node_modules的文件夹
// 然后在里面找到对应的vue文件夹
// 然后找到package.json文件
// 然后根基文件中的main指示 引入对应的vue包 这就是全过程 因为引入的是残缺的包 所以我们需要把路径改一改
// 方法有以下三种
// 1、直接改变下载来的vue中的main属性 指向我们需要的文件(但是不推荐 太low了)
// 2、修改当前文件中的导入路径 直接指明路径 自定义 但是还是不够优雅
// import Vue from '../node_modules/vue/dist/vue.js'
// 3、修改webpack.config.js中的配置 当要加载以vue结尾的东西的时候 我们就按照指定的文件位置去加载
import Vue from 'vue'

var vm=new Vue({
	el:'#app',
	data:{
		msg:"123"	
	}
})

const path = require('path')

module.exports = {
	entry : path.join(__dirname,'./src/main.js'),
	output : {
		path : path.join(__dirname,'./dist'),
		filename : 'bundle.js'
	},
	module:{
		rules:[
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
		]
	},
	resolve:{
		// 设置加载的路径 同时不用理会node_modules文件夹
		alias:{
			'vue$':'vue/dist/vue.js'
		}
	}
}

使用残缺版的vue文件，渲染页面

// 当仅仅只是加载runtime-only的时候 如果我们要使用渲染组件 那我们只能使用render 否则都会报错
import Vue from 'vue'

// 建议将模板函数写道一个单独的文件里面
// 然后就需要一个新的loader否则是无法加载的
// cnpm i vue-loader vue-template-compiler -D
// 在webpack.config.js中添加规则 完成以后就可以解析vue文件了
import login from './login.vue'
// 但是 如果你的vue-loader的版本是大于15的 需要参考官方文档 来更新webpack.config.js中的配置
// 而这个配置中涉及到的插件是无需下载的 因为在下载vue的时候就下载好了
var vm=new Vue({
	el:'#app',
	data:{
	
	},
	// 当引用的vue文件是残缺版的时候 只能通过render函数来渲染组件
	render:function(createElements){
		return createElements(login);
	}
})

const path = require('path')
// 引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	entry : path.join(__dirname,'./src/main.js'),
	output : {
		path : path.join(__dirname,'./dist'),
		filename : 'bundle.js'
	},
	module:{
		rules:[
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
             // 使用这个loader
			{test:/\.vue$/,use:'vue-loader'}
		]
	},
	plugins:[
		// 使用这个插件
		new VueLoaderPlugin()
	]
}

在js中编写代码使用export 和 export default 向外暴露

import Vue from 'vue'

// 当使用import * from *或者import *的时候 可以获取该js文件中向外暴露的内容
// 比如这里 我们在vue文件中的script标签中写一个export default{} 然后就能将其中的内容进行一个暴露
// 而我们获取其中的方法如下所示 获取data()中的返回值的msg 还有methods方法中的show()方法
// 因为他不用设置名字 所以每一个文件中能够使用export default的次数都只有一次 不然的话不知道你要获取的暴露内容是哪些
// 但如果你使用export {精确标 as 你想要设置的属性名字}的时候 就可以使用无限多个 如下
import login,{title as planet,animal} from './login.vue'

var vm=new Vue({
	el:'#app',
	data:{
	
	},
	render:function(createElements){
		// 这里的login 我们照样可以拿过来当作template使用的
		return createElements(login);
	}
});
// 这只是为了暴露数据和方法 单纯拿到对应的数据和方法
console.log(login.data().msg+"------"+login.methods.show());
console.log(planet+"-----------"+animal)

webpack中使用router

import Vue from 'vue'
import login from './login.vue'
// 1 先使用cnpm下载安装vue-router
// cnpm i vue-router -S
// 2 导入对应的文件
import VueRouter from 'vue-router'

import router1 from './router1.vue'
import router2 from './router2.vue'

// 3 在Vue中导入VueRouter
Vue.use(VueRouter)

// 4 创建router实例
var router = new VueRouter({
	routes:[
		{path:'/router1',component:router1},
		{path:'/router2',component:router2}
	]
})

var vm=new Vue({
	el:'#app',
	data:{
	
	},
	render:function(createElements){
		return createElements(login);
	},
	// 5 引入router 因为是用render渲染的 所以router的坑需要放到render渲染的模板文件中去 避免被render删除而不显示出来
	router:router
});

webpack中使用router并引入子路由

import Vue from 'vue'
import login from './login.vue'
import VueRouter from 'vue-router'
import router1 from './router1.vue'
import router2 from './router2.vue'

// 1 引入子组件模板
import son1 from './son1.vue'
import son2 from './son2.vue'

Vue.use(VueRouter)

var router = new VueRouter({
	routes:[
		{
			path:'/router1',
			component:router1,
			children:[
				// 2 直接写好子组件的模板
				// 3 然后在其当前组件的父组件中写上对应的router标签即可
				{path:'son1',component:son1},
				{path:'son2',component:son2},
			]
		},
		{path:'/router2',component:router2}
	]
})

var vm=new Vue({
	el:'#app',
	data:{
	
	},
	render:function(createElements){
		return createElements(login);
	},
	router:router
});

webpack中路由的样式使用scoped限定

使用MintUI的css样式和组件

import Vue from 'vue'
import login from './login.vue'
import VueRouter from 'vue-router'
import router1 from './router1.vue'
import router2 from './router2.vue'
import son1 from './son1.vue'
import son2 from './son2.vue'

// 1 安装mint-ui
// cnpm i mint-ui -S
// 2 引入mint-ui
import MintUI from 'mint-ui'
// 3 导入css文件
import 'mint-ui/lib/style.css'
// 4 向Vue中安装MintUI
Vue.use(MintUI)
// 5 然后就可以直接在页面中使用MintUI组件了 想要什么组件可以查看MinutUI官网的中文文档 http://mint-ui.github.io/#!/en

Vue.use(VueRouter)

var router = new VueRouter({
	routes:[
		{
			path:'/router1',
			component:router1,
			children:[
				{path:'son1',component:son1},
				{path:'son2',component:son2},
			]
		},
		{path:'/router2',component:router2}
	]
})

var vm=new Vue({
	el:'#app',
	data:{
	
	},
	render:function(createElements){
		return createElements(login);
	},
	router:router
});

使用MintUI的js事件

使用MUI

import Vue from 'vue'
import login from './login.vue'
import VueRouter from 'vue-router'
import router1 from './router1.vue'
import router2 from './router2.vue'
import son1 from './son1.vue'
import son2 from './son2.vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
Vue.use(VueRouter)

// 使用MUI
// 安装MUI的包 类似于Bootstrap的使用方法 但是我们不能直接使用npm或者cnpm的方式去下载 因为他不支持
// 所以我们需要去GitHub上下载对应的文件 https://github.com/dcloudio/mui
// 将下载过来的文件的dist文件夹整个移动到我们的src目录下面的lib文件夹里面
// 这个lib文件夹专门放置无法从npm或者cnpm下载的包
// 然后导入这个文件
// 然后就可以直接使用MUI的样式了
// 具体样式可以参考GitHub上给出的例子 用法如同bootstrap和layui
import './lib/MUI/css/mui.min.css'


var router = new VueRouter({
	routes:[
		{
			path:'/router1',
			component:router1,
			children:[
				{path:'son1',component:son1},
				{path:'son2',component:son2},
			]
		},
		{path:'/router2',component:router2}
	]
})

var vm=new Vue({
	el:'#app',
	data:{
	
	},
	render:function(createElements){
		return createElements(login);
	},
	router:router
});

抽离路由文件

import Vue from 'vue'
import login from './login.vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
import './lib/MUI/css/mui.min.css'
// 1 照样还要引入VueRouter 为了可以在Vue中安装Vue
import VueRouter from 'vue-router'
// 2 在Vue中使用VueRouter
Vue.use(VueRouter)
// 3 导入抽离的文件 将这个导入的对象作为原来的router来使用
import router from './router.js'


var vm=new Vue({
	el:'#app',
	data:{
	
	},
	render:function(createElements){
		return createElements(login);
	},
	router:router
});


// 1 引入VueRouter
import VueRouter from 'vue-router'
// 2 引用我们设置的路由文件
import router1 from './router1.vue'
import router2 from './router2.vue'
import son1 from './son1.vue'
import son2 from './son2.vue'
// 3 创建路由对象
var router = new VueRouter({
	routes:[
		{
			path:'/router1',
			component:router1,
			children:[
				{path:'son1',component:son1},
				{path:'son2',component:son2},
			]
		},
		{path:'/router2',component:router2}
	]
})
// 4 将路由对象暴露出去
export default router

地址

链接：https://pan.baidu.com/s/1AZWfuiIuxOQDRJkypFz8bg 
提取码：fpm5

你可能感兴趣的:(#,学习笔记)

  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 语文主题教学学习笔记之87 东哥杂谈
    “语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
  • 《转介绍方法论》学习笔记 小可乐的妈妈
    一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
  • JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式androidjava常用设计模式
    博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
  • 新能源汽车 BMS 学习笔记篇—BMS 基本定义及分类 WPG大大通 其他笔记汽车BMS经验分享新能源电池
    一、BMS定义1、概念：BMS（BatteryManagementSystem）即电池管理系统，其管理对象是二次电池（充电电池或蓄电池），其主要目的是电池的利用率，防止电池出现过度充电和过度放电，可应用于电动汽车、电瓶车、机器人、无人机等图片来源：腾讯网https://new.qq.com《标准普尔警告，电动汽车电池生产面临供应链和地缘政治风险》2、四大功能①感知和测量：检测电池的电压、电流、温度
  • 吴恩达深度学习笔记(30)-正则化的解释 极客Array
    正则化（Regularization）深度学习可能存在过拟合问题——高方差，有两个解决方法，一个是正则化，另一个是准备更多的数据，这是非常可靠的方法，但你可能无法时时刻刻准备足够多的训练数据或者获取更多数据的成本很高，但正则化通常有助于避免过拟合或减少你的网络误差。如果你怀疑神经网络过度拟合了数据，即存在高方差问题，那么最先想到的方法可能是正则化，另一个解决高方差的方法就是准备更多数据，这也是非常
  • 个人学习笔记7-6：动手学深度学习pytorch版-李沐 浪子L 深度学习深度学习笔记计算机视觉python人工智能神经网络pytorch
    #人工智能##深度学习##语义分割##计算机视觉##神经网络#计算机视觉13.11全卷积网络全卷积网络（fullyconvolutionalnetwork，FCN）采用卷积神经网络实现了从图像像素到像素类别的变换。引入l转置卷积（transposedconvolution）实现的，输出的类别预测与输入图像在像素级别上具有一一对应关系：通道维的输出即该位置对应像素的类别预测。13.11.1构造模型下
  • golang学习笔记--MPG模型 xxzed golang#学习笔记学习笔记golang
    MPG模式：M（Machine）：操作系统的主线程P（Processor）：协程执行需要的资源（上下文context），可以看作一个局部的调度器，使go代码在一个线程上跑，他是实现从N：1到N：M映射的关键G（Goroutine）：协程，有自己的栈。包含指令指针（instructionpointer）和其它信息（正在等待的channel等等），用于调度。一个P下面可以有多个G1、当前程序有三个M,
  • 碎片化学习笔记分享 剑客写作
    现在生活节奏很快，学习力成为了我们拥有的最大财富。碎片化学习是最好的。首先，不要太过自信，学会虚心学习，是我们面对现实的好方法，才能够常保新鲜。平时我们要拥有什么工具呢？1.思维导图2.写在印象笔记里3.听书，消燥耳机4.教学输出5.录音笔里面最好的方式就是教学输出法，记忆里最好。当输出时我们集中精力记忆里最好。有人认为缩短睡眠时间来学习，其实最好的方式是保持最好的睡眠，记忆力会更好。剥夺睡眠，会
  • 《随园诗话》学习笔记三百零六 飞鸿雪舞
    卷五凡诗之传者，都在灵性五、五斗米与诗【原文】丁丑，余觅一抄书人，或荐黄生，名之纪，号星岩者，人甚朴野。偶过其案头，得句云；“破庵僧卖临街瓦，独井人争向晚泉。”余大奇之，即饷米五斗。自此欣然大用力于诗。五言句云：“云开日脚直，雨落水纹圆。竹锐穿泥壁，蝇酣落酒尊。钓久知鱼性，樵多识树名。笔残芦并用，墨尽指同磨。＂七言云：＂小窗近水寒偏觉，古木遮天曙不知。旧生萍处泥犹绿，新落花时水亦香。旧甓恐闲都贮水
  • D15 论语学习笔记 许小兔Angelina
    悟：上级对下级的宽容：凡事成定局，就不你说了；已接近完结的事，也没必要匡正和挽回了；既然是过去的事，也没必要追究得失和责任了。对待孩子教育也是，不用“问责制”，这样容易让孩子因为害怕担责而说谎。应当循循善诱，避免再犯错才是最重要的。3.16：【原文】子曰：“射不主皮，为力不同科，古之道也。”【译文】孔子说：“射箭比赛不以射透为主，而主要看是否射得准确，因为人的力量不同，自古如此。”3.17：【原文
  • 网络工程师学习笔记（一） 专业白嫖怪 网络工程师学习笔记学习笔记网络
    为了备战下半年的软考——网络工程师，利用每天的下班的闲暇时间看书听课，然后自己手敲整理的系列资料。希望能够对你们有所帮助第一章__计算机网络概述计算机网络的定义：将分散的具有独立运算功能的计算机系统，通过通信线路和通信设备进行连接起来的实现资源的共享。ARPAnet网络的特征：资源共享、分散控制、分组交换1946年第一台通用计算机—埃尼亚克能够相互连通进行数据交换。1960年提出巨型网络，出现了对
  • K8S学习笔记02——K8S组件 沉淅尘 #Docker#K8Skubernetes
    Kubernetes组件一、控制平面组件（ControlPlaneComponents）(1)kube-apiserver(2)etcd(3)kube-scheduler(4)kube-controller-manager(5)cloud-controller-manager二、Node组件1.kubelet2.kube-proxy3.容器运行时（ContainerRuntime）三、插件（Add
  • 「Python」2020.04.08学习笔记 | 第六章文件（a+）模式+把随机手机号写入文件小练习 Yetta的书影屋
    学习测试开发的Day97，真棒！学习时间为40M第九次全天课(下午视频二20M-50M）>>>fp.seek(0)0>>>fp.read()'你好11你好12你好13你好14你好15\n你好16\n你好17\n你好18\n'>>>fp.seek(0,0)0>>>fp.write("*********************************\n")34>>>fp.seek(0,0)0>>>f
  • 《金文成〈中庸〉学习笔记401。2020-2-24》 金吾生
    《金文成〈中庸〉学习笔记401。2020-2-24》今天是庚子年戊寅月丁酉日，二月初二，2020年2月24日星期一。二月二龙抬头。第二十二章【唯天下至诚，为能尽其性；能尽其性，则能尽人之性；能尽人之性，则能尽物之性；能尽物之性，则能赞天地之化育；能赞天地之化育，则可以与天地参矣。】上一节，船山讲解说，性作为天用之本体，于圣人和匹夫匹妇而言并无二致，区别来自于诚。诚的区别来自于纯粹与掺杂。掺杂什么呢
  • CDGA学习笔记三-《数据安全》 zy_chris 网络安全
    七、数据安全7.1引言数据安全包括安全策略和过程的规划、建立与执行，为数据和信息资产提供正确的身份验证、授权、访问和审计。要求来自以下方面：（1）利益相关方（2）政府法规（3）特定业务关注点（4）合法访问需求（5）合同义务7.1.1业务驱动因素1、降低风险信息安全首先对组织数据进行分级分类，对组织数据进行分类分级的整个流程：1）识别敏感数据资产并分类分级2）在企业中查找敏感数据3）确定保护每项资产
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • 遇到僵尸进程，怎么处理---学习笔记 summer@彤妈 性能优化linux
    僵尸进程解释当iowait升高时，进程很可能因为得不到硬件的响应，而长时间处于不可中断状态。从ps或者top命令的输出中，你可以发现它们都处于D状态，也就是不可中断状态（UninterruptibleSleep）。既然说到了进程的状态，进程有哪些状态你还记得吗？我们先来回顾一下。top和ps是最常用的查看进程状态的工具，我们就从top的输出开始。下面是一个top命令输出的示例，S列（也就是Stat
  • C++学习笔记----6、内存管理（五）---- 智能指针（3） 王俊山IT c++学习笔记开发语言
    2、shared_ptr有时候吧，有些对象或者一部分代码需要同一个指针的拷贝。那么unique_ptr不能被拷贝，因此就不能用于些场景。这样的话，std::shared_ptr就是一个支持能够被拷贝的拥有共享属主的智能指针。但是，如果有指向同一个资源的多个shared_ptr实例，那么怎么知道什么时候去释放资源呢？这可以通过对于引用记数来解决，这个我们以后再聊。首先，让我们看一下怎么构造与使用sh
  • 【学习笔记】武志红心理学—潜意识决定命运 万万千千
    冰山一角什么构成了我们的命运？命运是由我们的显意识和潜意识来决定的。我们可以用一张图做一个比喻。看过“冰山一角”图片的都知道，潜意识就是水面以下的部分，显意识是水面以上的部分，从体积来看，潜意识占了大部分，而显意识只是冰山一角，纵向来看，庞大的潜意识支撑着冰山一角的显意识，才得以让冰山漂浮在水面。延伸到我们的人生，我们对自己显意识层面的想法很容易感知到，所以我们会说这是“我”自己做的选择。而潜意识
  • Prism 教程 yang_B621 PrismIOC
    http://t.csdnimg.cn/VXSSvhttps://blog.csdn.net/u010476739/article/details/119341731Prism-随笔分类-Hello——寻梦者！-博客园(cnblogs.com)C#IoC学习笔记-缥缈的尘埃-博客园(cnblogs.com)WPF_SchuylerEX的博客-CSDN博客
  • 绘本讲师训练营【第30期】2/21阅读原创《绘本之力》学习笔记2 郑贤钰
    30028郑贤钰今天读了绘本之力《留在灵魂里的东西》读了心里有非常大的感触！两个年幼什么都不懂的孩子，为了自己心爱的东西，攒下来自己的零花钱，却买了一个自己不知道怎么用的东西，当他们觉得这个东西根本就不好，准备扔掉的时候，这是故事中的有趣有爱的老爷爷出现了，帮助孩子们再一次发现之前别人拉出优美的音乐，原来自己买的这一个琴，自认为没用的琴也能够经过老爷爷熟练的演奏也能拉出这样优美的声音，这让孩子们十
  • 仿老师悟 耕海者
    毕业十年了，今天去拜访老师，看到老师的学习笔记，看到老师努力学习，积极提高的状态，我觉着自己真是有些懈怠了，孩子们，老师的老师都在孜孜不倦，我们岂能偷懒！
  • C++学习笔记----7、使用类与对象获得高性能（一）---- 书写类（2） 王俊山IT c++学习笔记开发语言
    2.2、定义成员函数前面对SpreadsheetCell类的定义足以让你生成类的对象。然而，如果想调用setValue()或者getValue()成员函数，连接器就会抱怨这些函数没有定义。这是因为到目前为止，这些成员函数只有原型，而还没有实现。通常，类的定义会在模块接口文件。对于成员函数的定义，你有一个选择：可以在模块定义文件或者在模块实现文件。下面是SpreadsheetCell类，在类内对成员
  • Spring6学习笔记4：事务 ·云扬· SSMJava#Spring学习笔记spring
    1JdbcTemplate1.1简介Spring框架对JDBC进行封装，使用JdbcTemplate方便实现对数据库操作准备工作①搭建子模块搭建子模块：spring-jdbc-tx②加入依赖org.springframeworkspring-jdbc6.0.2mysqlmysql-connector-java8.0.30com.alibabadruid1.2.15③创建jdbc.propertie
  • 连通无向图一般中心的算法及其matlab程序详解 夏天天天天天天天# 图论算法matlab图论
    #################本文为学习《图论算法及其MATLAB实现》的学习笔记#################若服务点只允许取在各顶点上,而服务对象却取在各顶点及各边(或弧)上的点,则在所有顶点中选定一个顶点作为图的一般中心其条件是该点离它本身的最远服务对象(包括顶点及各边(或弧)上的点)的距离达到极小值。寻找无向图的一般中心对解决网络最佳服务点确定的问题是十分有效的，使得服务对象的范围
  • 学习笔记：FW内容安全概述 TKE_yinian
    内容安全概述信息安全概述主要威胁关于防护简介内容安全威胁应用层威胁内容安全技术WEB安全应用安全入侵防御检测邮件安全数据安全网络安全反病毒全局环境感知沙箱检测信息安全概述•信息安全是对信息和信息系统进行保护，防止未授权的访问、使用、泄露、中断、修改、破坏并以此提供保密性、完整性和可用性。•为关键资产提供机密性、完整性和可用性（CIA三元组）保护是信息安全的核心目标。CIA（Confidential
  • java的socket实现一个九宫棋游戏 睡不醒的小泽
    前言一个简单的socket小作品=v=一个机酱在大三实验课中接触到很基础的JAVA语言socket编程。至于你问为什么嵌入式的机酱会弄些Java吗？emmmmm，可能是当初C语言版的不够好玩吧，另外如果碰巧有用，欢迎抱走的yoo在之前的笔记《网络基础知识和网络编程》中有讲解过关于网络编程的一些基本知识，以及一些LinuxC的socket编程，希望粗浅了解socket内部肌理的同学，右转咱的学习笔记
  • 【每日一词】D33 edge 宠辱不惊的中年少女
    1）学习笔记：edge：优势，=advantagebeanabsoluteedge有绝对优势AhasanedgeoverB表示A比B更好maintainone'sedge保持优势loseone'sedge失去优势innovativeedge创新方面的优势2）查字典延伸：A.就工作经验而言，她显然要比我们面试过的其他人都胜出一筹。Intermsofexperience,shedefinitelyha
  • C/C++Win32编程基础详解视频下载 择善Zach 编程C++Win32
    课题视频：C/C++Win32编程基础详解 视频知识：win32窗口的创建                   windows事件机制 主讲：择善Uncle老师 学习交流群：386620625 验证码：625 --
  • Guava Cache使用笔记 bylijinnan javaguavacache
    1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常 我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。 实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
  • 解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
    解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程 一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。 分析过程：    既然是temp表空间有问题，那当
  • Struct在jsp标签 不懂事的小屁孩 struct
    非UI标签介绍： 控制类标签： 1：程序流程控制标签   if   elseif    else <s:if test="isUsed"> <span class="label label-success">True</span> </
  • 按对象属性排序 换个号韩国红果果 JavaScript对象排序
    利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
  • 大数据分析让个性化的客户体验不再遥远 蓝儿唯美 数据分析
    顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。 分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。 挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。 然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
  • java笔记4 a-john java
    操作符 1，使用java操作符       操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。       操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
  • 从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
        笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。     笔者因此写上自己的学习心得，希望能给和我一样转变
  • 在springmvc中解决FastJson循环引用的问题 asialee 循环引用fastjson
              我们先来看一个例子：           package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
  • ArrayAdapter和SimpleAdapter技术总结 百合不是茶 androidSimpleAdapterArrayAdapter高级组件基础
    ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果   ArrayAdapter;的数据可以是数组或者是队列        // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
  • 九封信 bijian1013 人生励志
            有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。         2014，写给人
  • Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHPInstallphpMyAdmin
    PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64   一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244   二、安装依赖包 sudo yum install gd
  • 分布式系统理论 bit1129 分布式
    FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
  • ssh2整合(spring+struts2+hibernate)-附源码 白糖_ eclipsespringHibernatemysql项目管理
    最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库   项目用eclipse
  • treetable bug记录 braveCS table
    // 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
  • 编程之美-电话号码对应英语单词 bylijinnan java算法编程之美
    import java.util.Arrays; public class NumberToWord { /** * 编程之美 电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
  • jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
    1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
  • JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动J#
      对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析   /*  流程图拓扑结构解析伪码描述算法         public java.util.ArrayList DFS(String graphid, String stepid, int j)
  • oracle I/O 从属进程 daizj oracle
    I/O 从属进程 　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
  • 高级排序:希尔排序 dieslrae 希尔排序
    public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
  • 初二下学期难记忆单词 dcj3sjt126com englishword
    kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的   Indian 印度的 workplace  工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
  • Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
    目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
  • git命令 shuizhaosi888 git
    ---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
  • qemu-kvm 网络 nat模式 (四) haoningabc kvmqemu
    qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
  • 不要让未来的你，讨厌现在的自己 jingjing0907 生活 奋斗 工作 梦想
     故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
  • 枚举类型详解 一路欢笑一路走 enum枚举详解enumsetenumMap
    枚举类型详解 一.Enum详解      1.1枚举类型的介绍   JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。      Demo:一个最简单的枚举类   public enum ColorType { RED
  • 第11章 动画效果（上） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipsejsp卡死js卡死
    使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下：   1、取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉，build下只留 classpath dependency Valida
  • MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
    每一行命令都是用分号(;)作为结束 对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
  • zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
    题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。 解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。 判断函数里面做了3次bfs，但是每次bfs节点最多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他