.Vue.js大全

Vue起步

　　1.下载核心库vue.js

　　bower info vue
　　npm init --yes
　　cnpm install vue --save

　　vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快

　　2.vue实现

　　js:
　　　　new Vue({
　　　　　　el:'#itany', //指定关联的选择器
　　　　　　data:{ //存储数据
　　　　　　　　　　msg:'Hello World',
　　　　　　　　　　name:'tom'
　　　　　　　　}
　　　　　　});
　　html:
　　　　<div id="itany">
　　　　　　{{msg}}
　　　　</div>

　　3. 安装vue-devtools插件，便于在chrome中调试vue

　　直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中

　　//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
　　Vue.config.devtools=false;
　　Vue.config.productionTip=false; //阻止vue启动时生成生产消息

Vue常用指令

　　+ v-model
　　双向数据绑定，一般用于表单元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-model</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			new Vue({
				// el:'.itany',
				el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的
				data:{
					name:'', //即使没有值，也不能省略，报错
					age:21,
					flag:true,
					nums:[12,4,23,5],
					user:{id:9527,name:'唐伯虎'}
				}
			});
		}
	</script>
</head>
<body>
	<!-- <div id="itany"> -->
	<!-- <div class="itany"> -->
	<div>
		用户名：<input type="text" v-model="name">
		<br>

		{{name}} <br>
		{{age}} <br>
		{{flag}} <br>
		{{nums}} <br>
		{{user}}
	</div>
</body>
</html>

　　+ v-for
　　对数组或对象进行循环操作，使用的是v-for，不是v-repeat
　　注：在vue1.0中提供了隐式变量，如$index、$key，在vue2.0中去除了隐式变量，已被废除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-for</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			new Vue({
				el:'#itany',
				data:{
					arr:[12,4,5,34,2,11],
					user:{id:9527,name:'唐伯虎',age:25},
					arr2:[12,4,5,34,2,11,12],
					users:[
						{id:9527,name:'唐伯虎',age:25},
						{id:1001,name:'秋香',age:22},
						{id:1002,name:'石榴姐',age:24}
					]
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- {{arr}} -->

		<ul>
			<!-- 普通循环 -->
			 <li v-for="value in arr">{{value}}</li>
			 <!--<li v-for="value in user">{{value}}</li>-->

			<!-- 键值循环 -->
			<!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->
			<!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> -->

			<!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by -->
			<!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->

			<!--<li v-for="(user,index) in users">-->
				<!--{{index+1}},{{user.id}},{{user.name}},{{user.age}}-->
			<!--</li>-->
		</ul>
	</div>
</body>
</html>

　　+ v-on
　　用来绑定事件，用法：v-on:事件="函数"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-on</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{  //存储数据
					arr:[12,34,45,23,5]
				},
				methods:{ //存储方法
					show:function(){
						console.log('show方法');
					},
					add(){
						// console.log(this); //this表示当前vue实例
						// console.log(this===vm); //true
						this.arr.push(666); //使用this访问当前实例中的成员
						// this.show();
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <button onclick="show()">点我</button> -->
		<button v-on:click="show">点我</button>
		<button v-on:click="add()">向数组中添加一个元素</button>
		<br>
		{{arr}}
		<hr>
		
		<button v-on:mouseover="show">鼠标经过</button>
		<button v-on:dblclick="show">鼠标双击</button>
	</div>
</body>
</html>

　　+ v-show/v-if
　　用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用指令：v-show</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{ 
					flag:true
				},
				methods:{ 
					change(){
						this.flag=!this.flag;
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <button v-on:click="change">隐藏</button> -->
		<button v-on:click="flag=!flag">隐藏</button>

		<hr>
		<div style=" 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>
	</div>
</body>
</html>

事件与属性

　　1.事件

　　事件简写

　　　　v-on:click="" 简写方式 @click=""

　　事件对象$event

　　　　包含事件相关信息，如事件源、事件类型、偏移量 target、type、offsetx

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件简写和事件对象$event</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(){
						console.log(111);
					},
					print(e){
						// console.log(e);
						console.log(e.target.innerHTML); //DOM对象
						console.log(this);
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<button v-on:click="show">点我</button>
		<button @click="show">点我</button>
		<hr>

		<button @click="print($event)">Click Me</button>
	</div>
</body>
</html>

　　事件冒泡

　　　　阻止事件冒泡：
　　　　　　a)原生js方式，依赖于事件对象
　　　　　　b)vue方式，不依赖于事件对象@click.stop

　　事件默认行为

　　　　阻止默认行为：
　　　　　　a)原生js方式，依赖于事件对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡和默认行为</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(){
						console.log(111);
						// e.stopPropagation();
					},
					print(){
						console.log(222);
					},
					write(){
						console.log(333);
					},
					study(){
						console.log(444);
						// e.preventDefault();
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<div @click="write">
			<p @click="print">
				<!-- <button @click="show($event)">点我</button> -->
				<button @click.stop="show">点我</button>
			</p>
		</div>
		<hr>

		<!-- <a href="#" @click="study($event)">俺是链接</a> -->
		<a href="#" @click.prevent="study">俺是链接</a>
	</div>
</body>
</html>

　　键盘事件

　　　　回车：@keydown.13 或@keydown.enter
　　　　上：@keydown.38 或@keydown.up

　　　　默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

　　事件修饰符

　　　　.stop - 调用 event.stopPropagation()。
　　　　.prevent - 调用 event.preventDefault()。
　　　　.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
　　　　.native - 监听组件根元素的原生事件。
　　　　.once - 只触发一次回调。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>键盘事件</title>
	<script src="js/vue.js"></script>
	<script>
		/**
		 * 自定义键位别名
		 */
		Vue.config.keyCodes={
			a:65,
			f1:112
		}

		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(e){
						console.log(e.keyCode);
						if(e.keyCode==13){
							console.log('您按了回车');
						}
					},
					print(){
						// console.log('您按了回车');
						// console.log('您按了方向键上');
						console.log('11111');
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- 键盘事件：@keydown、@keypress、@keyup -->
		<!-- 用户名：<input type="text" @keydown="show($event)"> -->
		
		<!-- 简化按键的判断 -->
		<!-- 用户名：<input type="text" @keydown="show($event)"> -->
		<!-- 用户名：<input type="text" @keydown.13="print"> -->
		<!-- 用户名：<input type="text" @keydown.enter="print"> -->
		<!-- 用户名：<input type="text" @keydown.up="print"> -->
		用户名：<input type="text" @keydown.f1="print">
		
		<!-- 事件修饰符 -->
		<button @click.once="print">只触发一次</button>
	</div>
</body>
</html>

　　2.属性

　　属性绑定和属性的简写

　　　　v-bind 用于属性绑定， v-bind:属性=""

　　　　属性的简写：v-bind:src="" 简写为 :src=""

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性绑定和属性的简写</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
					w:'200px',
					h:'100px'
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <img src="{{url}}"> -->

		<!-- 可以直接访问vue中的数据，不需要使用{{}} -->
		<!-- <img v-bind:src="url"> -->

		<img :src="url" :width="w" :height="h">
	</div>
</body>
</html>

　　class和style属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>class和style属性</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					bb:'aa',
					dd:'cc',
					flag:true,
					num:-2,
					hello:{aa:true,cc:true},
					xx:{color:'blue',fontSize:'30px'},
					yy:{backgroundColor:'#ff7300'}
				}
			});
		}
	</script>
	<style>
		.aa{
			color:red;
			font-size:20px;
		}
		.cc{
			background-color:#ccc;
		}
	</style>
</head>
<body>
	<div id="itany">
		<!-- 
			class属性
		 -->
		<!-- <p class="aa">南京网博</p> -->  <!-- 可以访问，普通css方式 -->

		<!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->

		<!-- 方式1:变量形式 -->
		<!-- <p :class="bb">南京网博</p> -->

		<!-- 方式2：数组形式，同时引用多个 -->
		<!-- <p :class="[bb,dd]">南京网博</p> -->

		<!-- 方式3：json形式，常用！！！ -->
		<!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->
		<!-- <p :class="{aa:num>0}">南京网博</p> -->

		<!-- 方式4：变量引用json形式 -->
		<!-- <p :class="hello">南京网博</p> -->
		
		<!-- 
			style属性
		 -->
		 <p :style="[xx,yy]">itany</p>

	</div>
</body>
</html>

模板

　　Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
　　模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法

　　1. 数据绑定的方式

　　　　a.双向绑定
　　　　　　v-model
　　　　b.单向绑定
　　　　　　方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
　　　　　　方式2：使用v-text、v-html

　　2. 其他指令

　　　　v-once 数据只绑定一次
　　　　v-pre 不编译，直接原样显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模板</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					msg:'welcome to itany'
				},
				created:function(){
					// alert(111);
				}
			});
		}
	</script>
	<style>
		/* 必须配置css样式，否则不生效 */
		[v-cloak]{ 
			display:none;
		}
	</style>
</head>
<body>
	<div id="itany">
		<input type="text" v-model="msg">

		<h3>aaa<span v-cloak>{{msg}}</span></h3>
		
		<h3 v-text="msg"></h3>

		<h3 v-html="msg"></h3>

		<h3 v-once>{{msg}}</h3>

		<h3 v-pre>{{msg}}</h3>


	</div>
</body>
</html>

过滤器

　　用来过滤模型数据，在显示之前进行数据处理和筛选
　　语法：{{ data | filter1(参数) | filter2(参数)}}

　　1. 关于内置过滤器
　　　　vue1.0中内置许多过滤器，如：
　　　　　　currency、uppercase、lowercase
　　　　　　limitBy
　　　　　　orderBy
　　　　　　filterBy
　　　　vue2.0中已经删除了所有内置过滤器，全部被废除
　　如何解决：
　　　　a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
　　　　b.使用自定义过滤器

　　 2. 自定义过滤器
　　　　分类：全局过滤器、局部过滤器

　　　　自定义全局过滤器
　　　　　　使用全局方法Vue.filter(过滤器ID,过滤器函数)

　　　　自定义局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义过滤器</title>
	<script src="js/vue.js"></script>
	<script>
		/**
		 * 自定义全局过滤器
		 */
		Vue.filter('addZero',function(data){
			// console.log(data);
			return data<10?'0'+data:data;
		});
		/*Vue.filter('number',(data,n) => {
			// console.log(data,n);
			return data.toFixed(n);
		});*/
		Vue.filter('date',data => {
			let d=new Date(data);
			return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
		});
		

		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					currentTime:Date.now()
				},
				filters:{ //局部过滤器
					number:(data,n) => {
						return data.toFixed(n);
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <h3>{{3 | addZero}}</h3> -->
		
		<!-- 课后作业：自己实现toFiexed()四舍五入的功能 -->
		<h3>{{12.345678 | number(2)}}</h3>
		<!-- <h3>{{12.045 | number(2)}}</h3> -->

		<h3>{{currentTime | date}}</h3>
	
	</div>
</body>
</html>

Vue生命周期

　　vue实例从创建到销毁的过程，称为生命周期，共有八个阶段，分别为数据观测前，数据观测后，模板挂载前，模板挂载后，组件更新前，组件更新后，组件销毁前，组件销毁后

　　其中最常用的就是监测数据后(created)和模板挂载后(mounted)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue生命周期</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					msg:'welcome to itany'
				},
				methods:{
					update(){
						this.msg='欢迎来到南京网博！';
					},
					destroy(){
						// this.$destroy();
						vm.$destroy();
					}
				},
				beforeCreate(){
					alert('组件实例刚刚创建，还未进行数据观测和事件配置');
				},
				created(){  //常用！！！
					alert('实例已经创建完成，并且已经进行数据观测和事件配置');
				},
				beforeMount(){
					alert('模板编译之前，还没挂载');
				},
				mounted(){ //常用！！！
					alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
				},
				beforeUpdate(){
					alert('组件更新之前');
				},
				updated(){
					alert('组件更新之后');
				},
				beforeDestroy(){
					alert('组件销毁之前');
				},
				destroyed(){
					alert('组件销毁之后');
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		{{msg}}
		<br>

		<button @click="update">更新数据</button>
		<button @click="destroy">销毁组件</button>
	</div>
</body>
</html>

计算属性

　　1.基本用法

　　计算属性也是用来存储数据，但具有以下几个特点：

数据可以进行逻辑处理操作
对计算属性中的数据进行监视

　　2.计算属性 VS 方法

　　将计算属性的get函数定义为一个方法也可以实现类似的功能

计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行

　　3.get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
默认只有get，如果需要set，要自己添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
</head>
<body>
    <div id="itany">
        <!--基本用法-->
        <h2>基本属性：{{ msg }}</h2>
        <h2>计算属性：{{ msg2 }}</h2>

        <!--对数据处理再显示-->
        <h2>基本属性：{{ msg.split(' ').reverse().join(' ') }}</h2>
        <h2>计算属性：{{ reverseMsg }}</h2>
        <button @click="change">修改值</button>
        <p>小结：如果涉及值运算，运用计算属性，提高代码可读性和可维护性</p>

        <br>

        <!--计算属性 vs 方法-->
        <h2>{{ num1 }}</h2>
        <h2>{{ num2 }}</h2>
        <h2>{{ getNum2() }}</h2>
        <button onclick="fn()">修改num2</button>
        <p>小结：依赖发生变化时，才会执行计算属性，否则取的是 之前缓存的结果</p>

        <!--get和set-->
        <h2>{{ num2 }}</h2>
        <button @click="change2">修改计算属性</button>
    </div>

    <script>
        var vm = new Vue({
            el : '#itany',
            data : {
                msg : 'welcome to dasha',
                num1 : 8
            },
            computed : {//计算属性
                msg2 : function(){//该函数必须有返回值，用来获取属性，称为get函数
                    return '欢迎来到南京网博'
                },
                reverseMsg : function(){
                    //可以包含逻辑处理操作，同时reverseMsg依赖于msg
                    return this.msg.split(' ').reverse().join(' ')
                },
                num2 : {
                    get : function(){
                        console.log('num2:' + new Date());
                        return this.num1 - 1;
                    },
                    set : function(val){
                        console.log('修改num2值');
                        this.num1 = val;
                    }
                }
            },
            methods : {
                getNum2(){
                    console.log('基本方法');
                    console.log(new Date());
                    return this.num1 - 1;
                },
                change(){
                    this.msg = 'i love you';
                },
                change2(){
                    this.num2 = 111;
                }
            }
        });

        function fn(){
            setInterval(function(){
                //console.log(vm.num2);  计算属性触发
                console.log(vm.getNum2());  //基本方法
            },1000)
        }
    </script>
</body>
</html>

Vue实例的属性和方法

　　1.属性

vm.$el 获取vue实例关联的元素  DOM对象

vm.$data 获取数据对象data  也可以直接用vm.属性名取

```
vm.$options 获取自定义属性
```

vm.$refs 获取所有添加ref属性的元素

　　2.方法

```
vm.$mount()  手动挂载vue实例
```
```
vm.$destroy() 销毁实例
```

vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例的属性和方法</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
</head>
<body>
    <div id="itany">
        {{ msg }}

        <h2 ref="hello">hello</h2>
        <h2 ref="world">world</h2>
    </div>

    <script>
        var vm = new Vue({
            el : '#itany',
            data : {
                msg : 'welcome to itany'
            },
            name : 'tom',
            age : 24,
            show : function(){
                console.log('show');
            }
        });
        /*属性*/
        //vm.属性名 获取data中的属性
        //console.log(vm.msg);

        //vm.$el  获取ue实例关联的元素
        //console.log(vm.$el);  //DOM对象
        //vm.$el.style.color = 'red';

        //vm.$data  //获取数据对象data
        //console.log(vm.$data);
        //console.log(vm.$data.msg);

        //vm.$options  //获取自定义属性
        //console.log(vm.$options);
        //console.log(vm.$options.name);
        //console.log(vm.$options.age);
        //console.log(vm.$options.show);

        //vm.$refs  获取所有添加ref属性的元素
        //console.log(vm.$refs);
        //console.log(vm.$refs.hello); //DOM对象
        //vm.$refs.hello.style.color = 'blue';


        /*方法*/

        //vm.$mount()  手动挂载vue实例
        //vm.$mount('#itany');
        //var vm = new Vue({
        //   data : {
        //        msg : '欢迎来到南京网博',
        //        name : 'tom'
        //    }
        //}).$mount('#itany');

        //vm.$destroy()  销毁实例
        //vm.$destroy();

        // vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM
		//修改数据
		vm.name='汤姆';
		//DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
		// console.log(vm.$refs.title.textContent);
		vm.$nextTick(function(){
			//DOM更新完成，更新完成后再执行此代码
			console.log(vm.$refs.title.textContent);
		});
    </script>
</body>
</html>

　　3.属性修改，添加，删除

vm.$set(object,key,value) vm.set 添加
vm.$delete(object,key) vm.delete 删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加和删除属性： $set、$delete</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
</head>
<body>
    <div id="itany">
        <button @click="doUpdate">修改属性</button>
        <button @click="doAdd">添加属性</button>
        <button @click="doDelete">删除属性</button>

        <br>
        <h2>{{ user.name }}</h2>
        <h2>{{ user.age }}</h2>
    </div>

    <script>
        var vm = new Vue({
            el : '#itany',
            data : {
                user : {
                    id : 1001,
                    name : 'tom'
                }
            },
            methods : {
                doUpdate(){
                    this.user.name = '汤姆'
                },
                doAdd(){
                    //通过普通方式为对象添加属性时 vue无法实时监控
                    //this.user.age = 25; //属性添加成功，但是页面不显示
                    this.$set(this.user,'age',18); //通过vue实例的$set方法为对象体添加属性，可以实时监控到
                    Vue.set(this.user,'age',22);  //全局设置
                    if(this.user.age){
                        console.log(this.user.age);
                        this.user.age++;
                    }else{
                        Vue.set(this.user,'age',1)
                    }
                },
                doDelete(){
                    if(this.user.age){
                        Vue.delete(this.user, 'age');
                    }
                }
            }
        })
    </script>
</body>
</html>

vm.$watch(data,callback[,options]) 除了提供方法监控属性变化，还在 vue实例提供watch选项用于监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视数据的变化 $watch</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
</head>
<body>
    <div id="itany">
        <input type="text" v-model="name">
        <h3>{{ name }}</h3>

        <hr>

        <input type="text" v-model="age">
        <h3>{{ age }}</h3>
        <hr>

        <input type="text" v-model="user.name">
        <h3>{{ user.name }}</h3>
    </div>

    <script>
       var vm = new Vue({
        el : '#itany',
        data : {
            name : 'tom',
            age : 23,
            user : {
                id : 1001,
                name : 'alice'
            }
        },
        watch : {//方式2：使用vue实例提供的watch选项
            age : (newValue,oldValue) => {
                console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue);
            },
            user : {
                handler : (newValue,oldValue) => {
                    console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
                },
                deep : true  //深度监视，当对象中的属性发生变化时也会监视
            }

        }
       });

       //方式1  使用vue实例提供的$watch()方法
       vm.$watch('name',function(newValue,oldValue){
            console.log('name被修改啦，原值：' + oldValue + ', 新值：' + newValue);
       })
    </script>
</body>
</html>

自定义指令

　　分类：全局指令、局部指令

　　1.自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)

　　2.自定义局部指令

vue实例中，directives选项中定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
</head>
<body>
    <div id="itany">
        <!--<p>验证钩子函数 或者 说是指令执行的生命周期</p>-->
        <!--<h3 v-hello>{{ msg }}</h3>-->
        <!--<button @click="change">更新数据</button>-->
        <!--<hr>-->

        <!--<p>定义指令参数验证</p>-->
        <!--<h3 v-world:wbs17022.haha>{{ msg }}</h3>-->

        <p>自定义局部指令</p>
        <input type="text" v-model="msg" v-focus>
    </div>
    <script>
        /*自定义全局指令*/
        /*注：使用指令时必须在指令名称前加前缀v-，即v-指令名称*/

        Vue.directive('hello',{
            bind(){//常用！
               alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
            },
            inserted(){
                alert('被绑定元素插入到DOM中时调用');
            },
            update(){
                alert('被绑定元素所在模板更新时调用');
            },
            componentUpdated(){
                alert('被绑定元素所在模版完成一次更新周期时调用');
            },
            unbind(){
                alert('指令与元素解绑时调用，只调用一次');
            }
        });


        //钩子函数的参数
        Vue.directive('world',{
            bind(el,binding){
                console.log(el);
                el.style.color = 'red';

                console.log(binding);  //指令name
                console.log(binding.arg);  //冒号后面的值
                console.log(binding.modifiers);  //后缀对象  {haha: true}
            }
        });

        //传入一个简单的函数， bind 和 update时调用
        Vue.directive('wbs',function(){
            alert('wbs17022');
        });

       var vm = new Vue({
            el : '#itany',
            data : {
                msg : 'welcome to itany'
            },
            methods : {
                change(){
                    this.msg = 'hello world'
                }
            },
            directives : {//自定义局部指令
                focus : {
                    //当被绑定元素插入到DOM中时获取焦点
                    inserted(el){
                        el.focus();
                    }
                }
            }
       });

    </script>
</body>
</html>

动画

　　Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果本质上还是使用CSS3动画：transition、animation

　　使用transition组件，将要执行动画的元素包含在该组件内<transition>运动的元素</transition> 过滤的CSS类名：6个，通过设置好这几个类就达到动画的效果，提供8个钩子函数在动画生命周期里写入触发事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个动画</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <style>
        p{
            width : 300px;
            height : 300px;
            background-color : red;
        }
        .fade-enter-active,.fade-leave-active{
            transition : all 3s ease;
        }
        .fade-enter-active{
            opacity : 1;
            width : 300px;
            height : 300px;
        }
        .fade-leave-active{
            opacity : 0;
            width : 50px;
            height : 50px;
        }
        /* .fade-enter需要放在.fade-enter-active的后面*/
        .fade-enter{
            opacity : 0;
            width : 100px;
            height : 100px;
        }
    </style>
</head>
<body>
    <div id="itany">
        <button @click="flag=!flag">点我</button>

        <!--name可以随便取-->
        <transition name="fade"
        @before-enter="beforeEnter" @enter="enter"
        @after-enter="afterEnter" @before-leave="beforeLeave"
        @leave="leave" @after-leave="afterLeave">
            <p v-show="flag">wang bo</p>
        </transition>
    </div>
    <script>
       var vm = new Vue({
            el : '#itany',
            data : {
                flag : false
            },
            methods : {
                beforeEnter(el){
                    alert('动画进入之前');
                },
                enter(){
                    alert('动画进入');
                },
                afterEnter(el){
                    alert('动画进入之后');
                    el.style.background='blue';
                },
                beforeLeave(){
                    alert('动画即将离开之前')
                },
                leave(){
                    alert('动画离开');
                },
                afterLeave(el){
                    alert('动画离开之后');
                    el.style.background = 'red';
                }
            },

       });

    </script>
</body>
</html>

　　当然你也可以结合第三方提供动画插件animate实现动画效果，只要使用它提供的样式就可以了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<link rel="stylesheet" href="css/animate.css">
	<script src="js/vue.js"></script>
	<style>
		p{
			 300px;
			height: 300px;
			background-color:red;
			margin:0 auto;
		}
	</style>
</head>
<body>
	<div id="itany">
		<button @click="flag=!flag">点我</button>
		
		<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
			<p v-show="flag">网博</p>
		</transition>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:false
			}
		});
	</script>
	
</body>
</html>

　　上面transition标签也只能实现单个动画效果，如果想实现多个动画效果，就必须使用transition-group标签，并且每个动画标签都要给key属性绑定一个唯一值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多元素动画</title>
	<link rel="stylesheet" href="css/animate.css">
	<script src="js/vue.js"></script>
	<style>
		p{
			 100px;
			height: 100px;
			background-color:red;
			margin:20px auto;
		}
	</style>
</head>
<body>
	<div id="itany">
		<button @click="flag=!flag">点我</button>
		
		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
			<p v-show="flag" :key="1">itany</p>
			<p v-show="flag" :key="2">网博</p>
		</transition-group>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				flag:false
			}
		});
	</script>
	
</body>
</html>

组件component

　　组件的使用方法

　　组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码组件是自定义元素（对象）

　　定义组件的两种方式：

先创建组件构造器，然后由组件构造器创建组件
直接创建组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义组件的两种方式</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <hello></hello>
        <my-world></my-world>
    </div>
    <script>
        /*方式1：先创建组件构造器，然后由组件构造器创建组件*/

        //1.使用Vue.extend()创建一个组件构造器
        var MyComponent = Vue.extend({
            template : '<h3>Hello World</h3>'
        });

        //2.使用Vue.component(标签名,组件构造器) 根据组件构造器来创建组件
        Vue.component('hello', MyComponent);


        /*方式2：直接创建组件(推荐)*/
        Vue.component('my-world',{
           template : '<h1>你好,世界</h1>'
        })

        var vm = new Vue({//这里的vm也是一个组件  称为根组件Root
            el : '#itany',
            data : {
                msg : 'wang bo'
            }
        })
    </script>
</body>
</html>

　　组件分为全局组件、局部组件，全局组件由Vue.component方法定义，而局部组件则是vue实例中的components里定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的分类</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>
    <script>
        /*全局组件，可以在所有vue实例中使用*/
        Vue.component('my-hello',{
            template : '<h3>{{ name }}</h3>',
            data : function(){//在组件中存储数据时，必须以函数形式，函数返回一个对象
                return {
                    name : 'alex'
                }
            }
        });


        /*局部组件，只能在当前vue实例中使用,vue实例中提供components选项定义*/
       vm = new Vue({
            el : '#itany',
            data : {
                name : 'wang bo'
            },
            components : {
                'my-world' : {
                    //vue实例本身也是组件，和当前my-world组件是父子组件关系，子组件是不能直接访问父组件的data数据的
                    //template : '<h3>{{ name }}</h3>',
                    template : '<h3>{{ age }}</h3>',
                    data(){
                        return {
                            age : 25
                        }
                    }
                }
            }

        })
    </script>
</body>
</html>

　　引用模板：除了在组件里的template选项指定模板外，另外还提供了一种方式--将组件内容放到模板<template>中并引用

　　另外在用template标签定义模板时，需要保证template标签只有一个根元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用模板</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
    </div>

    <template id="wbs">
        <!--template必须有且只有一个根元素-->
        <div>
            <h3>{{ msg }}</h3>
            <ul>
                <li v-for="value in arr">{{ value }}</li>
            </ul>
        </div>
    </template>
    <script>
        var vm = new Vue({
            el : '#itany',
            components : {
                'my-hello' : {
                    name : 'wbs17022',  //指定组件的名称，默认为标签名，可以不设置
                    template : '#wbs',
                    data(){
                        return {
                            msg : 'welcome to the world',
                            arr : ['tom', 'jack', 'mike']
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

　　动态组件

<component :is="">组件多个组件使用同一个挂载点，然后动态的在它们之间切换，is属性绑定了哪个组件，哪个组件就处于挂载状态
<keep-alive>组件可以防止非活动组件重复渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <button @click="flag='my-hello'">显示hello组件</button>
        <button @click="flag='my-world'">显示world组件</button>

        <!--使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建-->
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>
    </div>


    <script>
        var vm = new Vue({
            el : '#itany',
            data : {
                flag : 'my-hello'
            },
            components : {
                'my-hello' : {
                    template : '<h2>我是hello组件{{x}}</h2>',
                    data(){
                        return {
                            x : Math.random()
                        }
                    }
                },
                'my-world' : {
                    template : '<h3>我是world组件{{y}}</h3>',
                    data(){
                        return {
                            y : Math.random()
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

　　组件间数据传递

　　在一个组件内部定义另一个组件，称为父子组件，子组件只能在父组件内部使用，默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

　　子组件访问父组件的数据：

在调用子组件时，通过自定义属性绑定想要获取的父组件中的数据
在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据

　　总结：父组件通过props向下传递数据给子组件
　　注：组件中的数据共有三种形式：data、props、computed

　　父组件访问子组件的数据：

在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

　　总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件及组件间数据传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>

        <!--嵌套的子组件是不可以直接访问的，只能在父组件的模板下访问-->
        <!--<my-world></my-world>-->
    </div>

    <template id="hello">
        <div>
            <h3>我是hello父组件</h3>
            <h3>访问自己的数据：{{ msg }},{{ name }},{{ age }},{{ user.username }}</h3>
            <br>
            <h4>子组件只能在父模板下访问</h4>
            <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
            <!--<my-world :message="msg" :name="name" :age="age" :user="user"></my-world>-->

            <h3>访问子组件的数据：{{ sex }}，{{ height }}</h3>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子组件</h4>
            <h4>访问自己的数据：{{ sex }},{{ height }}</h4>

            <br>

            <h4>访问父组件中的数据：{{ message }},{{ name }},{{ age }},{{ user.username}}</h4>
            <button @click="send">将子组件的数据向上传递给父组件</button>
        </div>
    </template>

    <script>
        var vm = new Vue({//根组件
            el : '#itany',
            components : {
                'my-hello' : { //父组件
                      methods : {
                          getData(sex,height){
                              this.sex = sex;
                              this.height = height;
                          }
                      },
                      data(){
                            return {
                                msg : 'wang bo',
                                name : 'tom',
                                age : 23,
                                user : {id:9527,username:'唐伯虎'},
                                sex : '',
                                height : ''
                            }
                      },
                      template : '#hello',
                      components : {
                            'my-world' : {//子组件
                                data(){
                                    return {
                                        sex : 'male',
                                        height : 180.5
                                    }
                                },
                                template : '#world',
                                //props : ['message','name','age','user']  //简单的字符串数组
                                props : {//也可以是对象形式
                                    message : String,
                                    name : {
                                        type : String,
                                        required : true,
                                    },
                                    age : {
                                        type : Number,
                                        default : 18,
                                        validator : function(value){
                                            return value >= 0;
                                        }
                                    },
                                    user : {
                                        type : Object,
                                        default : function(){//对象或数组的默认值必须使用函数的形式来返回
                                            return {id:3306,username:'秋香'};
                                        }
                                    }
                                },
                                methods : {
                                    send(){//如果你希望在加载就被父组件访问到，可以用vue生命周期中挂载事件
                                        //console.log(this);  //此处的this表示当前子组件实例
                                        this.$emit('e-world',this.sex,this.height);  //使用$emit()触发一个事件，发送数据
                                    }
                                }
                            }
                      }

                }
            }
        })
    </script>
</body>
</html>

　　单向数据流

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
子组件不允许直接修改父组件中的数据，报错

　　子组件修改父组件解决方案：

如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
如果子组件想修改数据并且同步更新到父组件，两个方法：

使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）需要$emit显式地触发一个更新事件
可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单向数据流</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <h2>父组件:{{ name }}</h2>
        <h4>双向绑定，改变父组件的数据，子组件传入的数据也会跟着改</h4>
        <input type="text" v-model="name">
        <h2>父组件{{ user.age }}</h2>

        <hr>

        <!--在调用子组件时，通过.sync允许子组件修改指定名称父组件传递的数据-->
        <my-hello :name.sync="name" :user="user"></my-hello>

    </div>

    <template id="hello">
        <div>
            <h3>子组件{{ name }}</h3>
            <!--变量赋值修改-->
            <!--<h3>子组件{{ username }}</h3>-->
            <h3>子组件{{ user.age }}</h3>

            <h4>而子组件想修改父组件的数据，是不能直接修改的，修改报错</h4>

			<!--方式1：赋值给新的变量-->
            <button @click="change">修改数据</button>
        </div>
    </template>

    <script>
        var vm = new Vue({
            el : '#itany',
            data : {
                name : 'tom',
                user : {
                    name : 'zhangsan',
                    age : 24
                }
            },
            components : {
                'my-hello' : {
                    template : '#hello',
                    props : ['name','user'],
                    data(){
                        return {
                            username : this.name  //方式1:将数据存入另一个变量中再操作
                        }
                    },
                    methods : {
                        change(){
                            //this.name = 'alex';  直接修改 报错
                            //this.username = 'alex';  赋值修改
                            this.$emit('update:name','alex');  //方式2：a.使用.sync，需要用$emit显式触发更新事件
                            this.user.age = 10000;  //方式2：b.利用对象是引用类型，修改属性时，不会改变内存地址
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

　　非父子组件间的通信

var Event=new Vue(); 创建一个空实例，相当于中介者
发送组件发送数据：Event.$emit(事件名,数据)
接收组件接收数据：Event.$on(事件名,data => {})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件通信</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-a></my-a>
        <my-b></my-b>
        <my-c></my-c>
    </div>

    <template id="a">
        <div>
            <h3>A组件{{ name }}</h3>
            <button @click="send">将数据发送给C组件</button>
        </div>
    </template>

    <template id="b">
        <div>
            <h3>B组件{{ age }}</h3>
            <button @click="send">将数组发送给C组件</button>
        </div>
    </template>

    <template id="c">
        <div>
            <h3>C组件{{ name }}{{ age }}</h3>
        </div>
    </template>

    <script>
        //定义一个空的Vue实例
        var Event = new Vue({
			name : 'yes'
		});

        var A = {
            template : '#a',
            data(){
                return {
                    name : 'tom'
                }
            },
            methods : {
                send(){
                    Event.$emit('data-a', this.name);
                }
            }
        };

        var B = {
            template : '#b',
            data(){
                return {
                    age : '2555'
                }
            },
            methods : {
                send(){
                    Event.$emit('data-b', this.age);
                }
            }
        };

        var C = {
            template : '#c',
            data(){
                return {
                    name : '',
                    age : ''
                }
            },
            mounted(){//在模板编译完成后执行
            	//Event.$on('data-a',function(name){
				//	console.log(name);
				//	console.log(this);  //此时的this是Event,也就是空Vue实例
				//});

                Event.$on('data-a',name => {
                    this.name = name;
                    console.log(this);  //此时this是C组件，和上面的函数调用方式有所区别
                });

                Event.$on('data-b',age => {
                    this.age = age;
                })
            }
        };


        var vm = new Vue({
            el : '#itany',
            components : {
                'my-a' : A,
                'my-b' : B,
                'my-c' : C
            }
        })
    </script>
</body>
</html>

slot内容分发

本意：位置、槽
作用：用来获取组件中的原内容，可以在模板中实现对原内容进行排版，类似angular中的transclude指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot内容分发</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <!--<my-hello></my-hello>-->
        <!--<my-hello>456</my-hello>-->

        <my-hello>
            <ul slot="s1">
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
            <ol slot="s2">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </my-hello>

    </div>

    <template id="hello">
        <div>
            <h3>welcome to itany</h3>
            <!--如果my-hello标签间没有内容，则用默认值123-->
            <!--<slot>123</slot>-->

            <slot name="s2"></slot>
            <hr>
            <slot name="s1"></slot>
        </div>
    </template>

    <script>
        var vm = new Vue({
            el : '#itany',
            components : {
                'my-hello' : {
                    template : '#hello'
                }
            }
        });
    </script>
</body>
</html>

vue-router路由

　　使用Vue.js开发SPA（Single Page Application）单页面应用，根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用 [参考](https://router.vuejs.org/zh-cn)

　　cnpm install vue-router -S

　　基本用法

　　路由配置分四步走

定义组件就是链接跳转时，显示的内容
配置路由就是把url和组件添加映射关系
创建路由实例提供配置路由参数，包括上面的路由映射关系，和显示样式等
注入路由路由内容应该在哪个vue实例下显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由基本用法</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        .active{
            font-size : 20px;
            color : #ff7300;
            text-decoration : none;
        }
    </style>
</head>
<body>
    <div id="itany">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>

        <div>
          <router-view></router-view>
        </div>
    </div>


    <script>
        //1.定义组件
        var Home = {
            template : '<h3>我是主页</h3>'
        };
        var News = {
            template : '<h3>我是新闻</h3>'
        };

        //2.配置路由
        const routes = [
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'}  //重定向
        ];

        //3.创建路由实例
        const router = new VueRouter({
            routes,  //简写，相当于routes:routes
            //mode : 'history',   //更改模式
            linkActiveClass : 'active'   //更新活动链接的class类名
        });

        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            el : '#itany',
            router  //注入路由
        })

    </script>
</body>
</html>

　　路由嵌套和参数传递

　　传参的两种方式

查询字符串：login?name=tom&pwd=123 {{$route.query}}
rest风格url：regist/alice/456 {{$route.params}}

　　路由实例方法

router.push() 添加路由，功能上与<route-link>相同
router.replace() 替换路由，不产生历史记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套和参数传递</title>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        .active{
            font-size : 20px;
            color : #ff7300;
            text-decoration : none;
        }
    </style>
</head>
<body>
    <div id="itany">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>

        <div>
            <transition
                    enter-active-class="animated bounceInLeft"
                    leave-active-class="animated bounceOutRight"
            >
                <router-view></router-view>
            </transition>

            <hr>

            <button @click="push">添加路由</button>
            <button @click="replace">替换路由</button>

        </div>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <!--router-link里还提供tag选项 用指定生成什么标签-->
                <router-link to="/user/login?username=alex&age=89" tag="li">用户登录</router-link>
                <router-link to="/user/regist/alex/89" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <script>
        var Home = {
            template : '<h3>我是主页</h3>'
        };
        var User = {
            template : '#user'
        };
        var Login = {
            template : '<h4>用户登录....获取参数：{{ $route.query }},{{ $route.path }}</h4>',
            mounted : function(){
                alert(this.$route.query.username);
            }
        };
        var Regist = {
            template : '<h4>用户注册  获取参数:{{ $route.params }},{{ $route.path }}</h4>'
        };

        const routes = [
            {
                path : '/home',
                component : Home
            },
            {
                path : '/user',
                component : User,
                children : [
                    {
                        path : 'login',
                        component : Login
                    },
                    {
                        path : 'regist/:username/:password',
                        component : Regist
                    }
                ]
            },
            {
                path : '*',
                redirect : '/home'
            }
        ];

        const router = new VueRouter({
            routes,
            linkActiveClass : 'active'
        });

        new Vue({
            el : '#itany',
            router,
            methods : {
                push(){
                    router.push({path:'home'});  //添加路由， 本质上就是在触发时 切换路由  这里切换到home
                },
                replace(){
                    router.replace({path:'user'});  //替换路由  还是切换路由  没有历史记录
                }
            }
        })
    </script>
</body>
</html>

相关阅读:
轮叫调度（RoundRobin Scheduling）
Python的Daemon管理器zdaemon
How do you select a particular option in a SELECT element in jQuery? Stack Overflow
元宵爬虫YuanXiaoSpider
python 异步采集,网页爬虫编写 | 一步一步学python
吉林省明日科技有限公司
 简单分析C之Curl模块同php的curl和python的pycurl模块的关系
 fputs
v专用链接破解器专用链接破解器
 crawler jd
原文地址：https://www.cnblogs.com/xinsiwei18/p/9037089.html