vue components and routing exercises

Keywords: Vue

1, Two ways to define components

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

<script src="js/vue.js"></script>
<script>
		/**
		 * Mode 1: first create the component builder, and then create the component by the component builder
		 */
		//1. Use Vue.extend() to create a component constructor
		var MyComponent=Vue.extend({
			template:'<h3>Hello World</h3>'
		});
		//2. Use vue.component (tag name, component builder) to create components according to the component builder
		Vue.component('hello',MyComponent);
		
		/**
		 * Mode 2: create components directly (recommended)
		 */
		// Vue.component('world',{
		Vue.component('my-world',{
			template:'<h1>Hello, the world</h1>'
		});

		var vm=new Vue({ //The vm here is also a component, which is called Root component
			el:'#itany',
			data:{
				msg:'Internet gambling'
			}
		});	
	</script>

2, Classification of components

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

<script src="js/vue.js"></script>
<script>
		/**
		 * Global component, which can be used in all vue instances
		 */
		Vue.component('my-hello',{
			template:'<h3>{{name}}</h3>',
			data:function(){ //When storing data in a component, it must be in the form of a function that returns an object
				return {
					name:'alice'
				}
			}
		});

		/**
		 * Local component, which can only be used in the current vue instance
		 */
		var vm=new Vue({
			el:'#itany',
			data:{
				name:'tom'
			},
			components:{ //Local components
				'my-world':{
					template:'<h3>{{age}}</h3>',
					data(){
						return {
							age:25
						}
					}
				}
			}
		});	
	</script>

3, Reference template

<div id="itany">
		<my-hello></my-hello>
		<my-hello></my-hello>
</div>
<template id="wbs">
		<!-- <template>Must have and have only one root element -->
		<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',  //Specifies the name of the component. The default is the label name. It can not be set
					template:'#wbs',
					data(){
						return {
							msg:'Welcome to Nanjing Weblog',
							arr:['tom','jack','mike']
						}
					}
				}
				
			}
		});	
	</script>

4, Dynamic components

	<div id="itany">
		< button @ Click = "flag ='my-hello '" > show Hello components < / button >
		< button @ Click = "flag ='my-world '" > show world components < / button >


		<div>
			<! -- use keep alive component to cache inactive components, which can keep state and avoid re rendering. By defau lt, inactive components will be destroyed and re created every time -- >
			<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>I am hello Components:{{x}}</h3>',
					data(){
						return {
							x:Math.random()
						}
					}
				},
				'my-world':{
					template:'<h3>I am world Components:{{y}}</h3>',
					data(){
						return {
							y:Math.random()
						}
					}
				}
			}
		});	
	</script>

5, Parent child components and data transfer between components

	<div id="itany">
		<my-hello></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>I am hello Parent component</h3>
			<h3>Access your own data:{{msg}},{{name}},{{age}},{{user.username}}</h3>
			<h3>To access data for a subcomponent:{{sex}},{{height}}</h3>
			<hr>

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

	<template id="world">
		<div>
			<h4>I am world Sub components</h4>
			<h4>To access data in a parent component:{{message}},{{name}},{{age}},{{user.username}}</h4>
			<h4>Access your own data:{{sex}},{{height}}</h4>
			<button @click="send">Pass the data of the child component up to the parent component</button>
		</div>
	</template>

	<script>
		var vm=new Vue({ //Root components
			el:'#itany',
			components:{
				'my-hello':{  //Parent component
					methods:{
						getData(sex,height){
							this.sex=sex;
							this.height=height;
						}
					},
					data(){
						return {
							msg:'Internet gambling',
							name:'tom',
							age:23,
							user:{id:9527,username:'Tang Pahu'},
							sex:'',
							height:''
						}
					},
					template:'#hello',
					components:{
						'my-world':{ //Sub components
							data(){
								return {
									sex:'male',
									height:180.5
								}
							},
							template:'#world',
							// props:['message','name','age','user '] / / a simple string array
							props:{ //It can also be an object, allowing configuration of advanced settings, such as type judgment, data verification, and setting default values
								message:String,
								name:{
									type:String,
									required:true
								},
								age:{
									type:Number,
									default:18,
									validator:function(value){
										return value>=0;
									}
								},
								user:{
									type:Object,
									default:function(){ //The default value of an object or array must be returned as a function
										return {id:3306,username:'Autumn fragrance'};
									}
								}
							},
							methods:{
								send(){
									// console.log(this); / / this indicates the current sub component instance
									this.$emit('e-world',this.sex,this.height); //Use $emit() to trigger an event to send data
								}
							}
						}
					}
				}
			}
		});	
	</script>

6, > one way data flow

	<div id="itany">
		<h2>Parent component:{{name}}</h2>
		<input type="text" v-model="name">
		<h2>Parent component:{{user.age}}</h2>

		<hr>

		<my-hello :name.sync="name" :user="user"></my-hello>
	</div>
	
	<template id="hello">
		<div>
			<h3>Sub components:{{name}}</h3>
			<h3>Sub components:{{user.age}}</h3>
			<button @click="change">Modifying data</button>
		</div>
	</template>

   <script src="js/vue.js"></script>
	<script>
		var vm=new Vue({ //Parent component
			el:'#itany',
			data:{
				name:'tom',
				user:{
					name:'zhangsan',
					age:24
				}
			},
			components:{
				'my-hello':{ //Sub components
					template:'#hello',
					props:['name','user'],
					data(){
						return {
							username:this.name //Mode 1: store the data in another variable and operate again
						}
					},
					methods:{
						change(){
							// this.username='alice';
							// this.name='alice';
							// this.$emit('update:name','alice'); / / method 2: a. using. sync, you need to explicitly trigger an update event
							this.user.age=18;
						}
					}
				}
			}
		});	
	</script>

7, Communication between non parent and child components

	<div id="itany">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

	<template id="a">
		<div>
			<h3>A Components:{{name}}</h3>
			<button @click="send">Send data to C assembly</button>
		</div>
	</template>

	<template id="b">
		<div>
			<h3>B Components:{{age}}</h3>
			<button @click="send">Send array to C assembly</button>
		</div>
	</template>
	
	<template id="c">
		<div>
			<h3>C Components:{{name}}，{{age}}</h3>
		</div>
	</template>

    <script src="js/vue.js"></script>
	<script>
		//Define an empty Vue instance
		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(){ //Execute after template compilation
				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>

8, slot content distribution

	<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>If there is no original content, the content will be displayed</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>

9, Routing basic usage

<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>
			<! -- use router link component to define navigation, to property to specify link URL -- >
			< router link to = "/ home" > Home Page < / router link >
			< router link to = "/ news" > News < / router link >
		</div>
		<div>
			<! -- router view is used to display routing content -- >
			<router-view></router-view>
		</div>
	</div>

    <script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
	<script>
		//1. Define components
		var Home={
			template:'<h3>I am the home page.</h3>'
		}
		var News={
			template:'<h3>I am news.</h3>'
		}

		//2. Configure routing
		const routes=[
			{path:'/home',component:Home},
			{path:'/news',component:News},
			{path:'*',redirect:'/home'} //redirect
		]

		//3. Create route instance
		const router=new VueRouter({
			routes, //Short for routes:routes
			// mode:'history', / / change mode
			linkActiveClass:'active' //Update the class class name of the activity link
		});

		//4. Create the root instance and mount the route to the Vue instance
		new Vue({
			el:'#itany',
			router //Injection routing
		});
	</script>

10, Route nesting and parameter passing

	<div id="itany">
		<div>
			<router-link to="/home">homepage</router-link>
			<router-link to="/user">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">Add routing</button>
		<button @click="replace">Replacement routing</button>
	</div>

	<template id="user">
		<div>
			<h3>User information</h3>
			<ul>
				<router-link to="/user/login?name=tom&pwd=123" tag="li">User login</router-link>
				<router-link to="/user/regist/alice/456" tag="li">User registration</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>I am the home page.</h3>'
		}
		var User={
			template:'#user'
		}
		var Login={
			template:'<h4>User login... Get parameters:{{$route.query}},{{$route.path}}</h4>'
		}
		var Regist={
			template:'<h4>User registration... Get parameters:{{$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, //Short for routes:routes
			linkActiveClass:'active' //Update the class class name of the activity link
		});

		new Vue({
			el:'#itany',
			router, //Injection routing
			methods:{
				push(){
					router.push({path:'home'}); //Add route, switch route
				},
				replace(){
					router.replace({path:'user'}); //Replace route, no history
				}
			}
		});
	</script>

Posted by lalloo on Sun, 09 Feb 2020 10:29:16 -0800

Programmer Group

vue components and routing exercises

Hot Keywords