vue组件及路由练习整理

2019独角兽企业重金招聘Python工程师标准>>>

一、定义组件的两种方式

<div id="itany">
		<hello></hello>
		<my-world></my-world>
</div>

<script src="js/vue.js"></script>
<script>
		/**
		 * 方式1：先创建组件构造器，然后由组件构造器创建组件
		 */
		//1.使用Vue.extend()创建一个组件构造器
		var MyComponent=Vue.extend({
			template:'<h3>Hello World</h3>'
		});
		//2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
		Vue.component('hello',MyComponent);
		
		/**
		 * 方式2：直接创建组件(推荐)
		 */
		// Vue.component('world',{
		Vue.component('my-world',{
			template:'<h1>你好，世界</h1>'
		});

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

二、组件的分类

<div id="itany">
		<my-hello></my-hello>
		<my-world></my-world>
	</div>

<script src="js/vue.js"></script>
<script>
		/**
		 * 全局组件，可以在所有vue实例中使用
		 */
		Vue.component('my-hello',{
			template:'<h3>{{name}}</h3>',
			data:function(){ //在组件中存储数据时，必须以函数形式，函数返回一个对象
				return {
					name:'alice'
				}
			}
		});

		/**
		 * 局部组件，只能在当前vue实例中使用
		 */
		var vm=new Vue({
			el:'#itany',
			data:{
				name:'tom'
			},
			components:{ //局部组件
				'my-world':{
					template:'<h3>{{age}}</h3>',
					data(){
						return {
							age:25
						}
					}
				}
			}
		});	
	</script>

三、引用模板

<div id="itany">
		<my-hello></my-hello>
		<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 src="js/vue.js"></script>
	<script>
		var vm=new Vue({
			el:'#itany',
			components:{
				'my-hello':{
					name:'wbs17022',  //指定组件的名称，默认为标签名，可以不设置
					template:'#wbs',
					data(){
						return {
							msg:'欢迎来到南京网博',
							arr:['tom','jack','mike']
						}
					}
				}
				
			}
		});	
	</script>

四、动态组件

	<div id="itany">
		<button @click="flag='my-hello'">显示hello组件</button>
		<button @click="flag='my-world'">显示world组件</button>


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

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

五、父子组件及组件间数据传递

	<div id="itany">
		<my-hello></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>我是hello父组件</h3>
			<h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
			<h3>访问子组件的数据：{{sex}},{{height}}</h3>
			<hr>

			<my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
		</div>
	</template>

	<template id="world">
		<div>
			<h4>我是world子组件</h4>
			<h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
			<h4>访问自己的数据：{{sex}},{{height}}</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:'网博',
							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(){
									// console.log(this);  //此处的this表示当前子组件实例
									this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据
								}
							}
						}
					}
				}
			}
		});	
	</script>

六、单向数据流

	<div id="itany">
		<h2>父组件：{{name}}</h2>
		<input type="text" v-model="name">
		<h2>父组件：{{user.age}}</h2>

		<hr>

		<my-hello :name.sync="name" :user="user"></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>子组件：{{name}}</h3>
			<h3>子组件：{{user.age}}</h3>
			<button @click="change">修改数据</button>
		</div>
	</template>

   <script src="js/vue.js"></script>
	<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.username='alice';
							// this.name='alice';
							// this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
							this.user.age=18;
						}
					}
				}
			}
		});	
	</script>

七、非父子组件间的通信

	<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 src="js/vue.js"></script>
	<script>
		//定义一个空的Vue实例
		var Event=new Vue();

		var A={
			template:'#a',
			data(){
				return {
					name:'tom'
				}
			},
			methods:{
				send(){
					Event.$emit('data-a',this.name);
				}
			}
		}
		var B={
			template:'#b',
			data(){
				return {
					age:20
				}
			},
			methods:{
				send(){
					Event.$emit('data-b',this.age);
				}
			}
		}
		var C={
			template:'#c',
			data(){
				return {
					name:'',
					age:''
				}
			},
			mounted(){ //在模板编译完成后执行
				Event.$on('data-a',name => {
					this.name=name;
					// console.log(this);
				});

				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>

八、slot内容分发

	<div id="itany">
		<!-- <my-hello>wbs17022</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>
			<slot name="s2"></slot>
			<h3>welcome to itany</h3>
			<!-- <slot>如果没有原内容，则显示该内容</slot> -->
			<slot name="s1"></slot>
		</div>
	</template>

    <script src="js/vue.js"></script>
	<script>

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

九、路由基本用法

<style>
		/* .router-link-active{
			font-size:20px;
			color:#ff7300;
			text-decoration:none;
		} */
		.active{
			font-size:20px;
			color:#ff7300;
			text-decoration:none;
		}
</style>

	<div id="itany">
		<div>
			<!-- 使用router-link组件来定义导航，to属性指定链接url -->
			<router-link to="/home">主页</router-link>
			<router-link to="/news">新闻</router-link>
		</div>
		<div>
			<!-- router-view用来显示路由内容 -->
			<router-view></router-view>
		</div>
	</div>

    <script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
	<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>

十、路由嵌套和参数传递

	<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>
		</div>

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

	<template id="user">
		<div>
			<h3>用户信息</h3>
			<ul>
				<router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
				<router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
			</ul>
			<router-view></router-view>
		</div>
	</template>

    <script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
	<script>
		var Home={
			template:'<h3>我是主页</h3>'
		}
		var User={
			template:'#user'
		}
		var Login={
			template:'<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>'
		}
		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, //简写，相当于routes:routes
			linkActiveClass:'active' //更新活动链接的class类名
		});

		new Vue({
			el:'#itany',
			router, //注入路由
			methods:{
				push(){
					router.push({path:'home'}); //添加路由，切换路由
				},
				replace(){
					router.replace({path:'user'}); //替换路由，没有历史记录
				}
			}
		});
	</script>

转载于:https://my.oschina.net/u/2427561/blog/1858911