VUE

最新推荐文章于 2023-05-16 15:42:40 发布

学JAVA好饿

最新推荐文章于 2023-05-16 15:42:40 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/qq_41891057/article/details/105389746

版权

1、Vue 引言

Vue 渐进式javascript框架:
让我们通过操作很少的DOM,甚⾄不需要操作⻚⾯中任何DOM元素
就很容易的完成数据和视图绑定双向绑定 MVVM

注意: ⽇后在使⽤Vue过程中⻚⾯中不要再引⼊Jquery框架

环境安装

安装nodejs环境（无脑下一步即可）
查看node环境是否安装成功
安装国内阿里云的镜像 cnpm（在管理员身份下运行）
```
npm install cnpm -g
```
安装vue的模板（类似于Maven的骨架）
```
cnpm install vue-cli -g
```
创建一个基于webpack模板的vue
进入该项目目录下，下载该项目所需要的依赖环境
```
cnpm install
```
下载依赖，是依据项目目录下的package.json文件来的
最后可能会有下载失败的一些文件

在当前项目目录下，运行该项目

npm run dev		#将当前项目编译打包，丢到nodejs的服务器上
				#都是些vue内置的静态页面

在这里插入图片描述

安装webpack（类似于项目管理工具Maven）

cnpm install webpack -g
cnpm install webpack-cli -g

在这里插入图片描述

2、Vue入门

2.1 下载Vue.js

<!-- 开发环境版本，包含了有帮助的命令⾏警告-->
<script 
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- ⽣产环境版本，优化了尺⼨和速度 -->
<script
src="https://cdn.jsdelivr.net/npm/vue"></script>

小技巧：直接访问该网址，通过抓包可以直接下载到本地

2.2 Vue第一个入门应用

<!-- 
	vue：mvvn模型  model view viewModel 
	当model中的数据更新，不需要变动view层(不需要再操作dom对象)
	因为viewModel将model层和view层进行了双向绑定
	当我们在控制台操作model中的数据时，界面可以实时更新
-->
<body>
	<!-- View层 模板-->
	<h1 id="app">
		<span>{{message}}</span>
	</h1>

	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var vm = new Vue({
		   //element ⽤来给Vue实例定义⼀个作⽤范围
			el: "#app",
			/* Model层，模拟后台数据 */
			data: {
				message: "hello vue!"
			}
		});
	</script>
</body>

总结

vue实例(对象)中el属性: 代表Vue的作⽤范围⽇后在Vue的作⽤范围内都可以使⽤Vue的语法
vue实例(对象)中data属性: ⽤来给Vue实例绑定⼀些相关数据, 绑定的数据可以通过{{变量名}}在Vue作⽤范围内取出
在使⽤{{}}进⾏获取data中数据时,可以在{{}}中书写表达式,运算符,调⽤相关⽅法,以及逻辑运算等
el属性中可以书写任意的CSS选择器,但是在使⽤Vue开发是推荐使⽤id选择器

3、v-text v-html

3.1 v-text

v-text : ⽤来获取data中数据将数据以⽂本的形式渲染到指定标签内部
类似于javascript 中 innerText

{{}} (插值表达式) 和 v-text获取数据的区别在于

使⽤v-text取值会将标签中原有的数据覆盖使⽤插值表达式的形式不会覆盖标签原有的数据
使⽤v-text可以避免在⽹络环境较差的情况下出现插值闪烁

3.2 v-html

v-html :⽤来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部类似于javascript中 innerHTML

4、vue中事件绑定

4.1 绑定事件基本语法

<!-- View层 模板-->
<div id="app">
	<!-- 绑定事件 -->
	<button type="button" v-on:click="maki">
		通过v-on:click方式绑定事件
	</button>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		data: {
			message: "hello"
		},
		/* 方法必须定义在vue的methods对象中 */
		methods: {
			maki: function() {
				alert(this.message);
			}
		}
	});
</script>

this指的就是当前的Vue实例，⽇后可以在事件中通过使⽤this获取Vue实例中相关数据

4.2 Vue中事件的简化语法

<!-- View层 模板-->
<div id="app">
	<!-- 绑定事件 -->
	<button type="button" @click="maki('你好')">
		通过@click方式绑定事件
	</button>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		data: {},
		/* 方法必须定义在vue的methods对象中 */
		methods: {
			maki(name){
				alert(name);
			}
		}
	});
</script>

⽇后在vue中绑定事件时可以通过@符号形式简化 v-on 的事件绑定

4.3 Vue事件函数两种写法

<script>
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		data: {
			message: "hello"
		},
		/* 方法必须定义在vue的methods对象中 */
		methods: {
			//第一种函数写法
			maki: function() {
				alert(this.message);
			},
			//第二种函数写法
			maki2(name){
				alert(name)
			}
		}
	});
</script>

在Vue中事件定义存在两种写法

函数名:function(){}
函数名(){}

在使⽤事件时,可以直接在事件调⽤出给事件进⾏参数传递,在事件定义出通过定义变量接收

5、v-show v-if v-bind

5.1 v-show

⽤来控制⻚⾯中某个标签元素是否展示底层使⽤控制是 display 属性

在使⽤v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
在v-show中可以通过boolean表达式控制标签的展示或隐藏

5.2 v-if

⽤来控制⻚⾯元素是否展示底层控制是DOM元素操作DOM

<!-- View层 模板-->
<div id="app">
	<!-- if else elseif -->
	<h1 v-if="type==='a'">A</h1>
	<h1 v-else-if="type==='b'">B</h1>
	<h1 v-else>C</h1>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		data:{
			type: "a"
		}

	});
</script>

5.3 v-bind

⽤来绑定标签的属性可以动态修改标签的属性

<div id="app">
	<p v-bind:class="{cssA:showCSS}">
	通过v-bind，绑定标签的属性，动态修改标签属性</p>
	
	<!--与上面的效果一样！-->
	<p :class="showCSS? 'cssA' : '' ">
	通过v-bind，绑定标签的属性，动态修改标签属性</p>
</div>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			showCSS: true,
		},
		methods: {}
	});
</script>

注意 v-bind:属性名有一种简化写法
直接 :属性名即可

6、v-for的使用

用来遍历数据

<!-- View层 模板-->
<div id="app">
	<!-- for循环 -->
	<h1 v-for="(item,index) in items">
		{{item.message}}--{{index}}
	</h1>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		/* []表示数组，{}表示对象 */
		data:{
			items: [
				{message: "hello"},
				{message: "Vue!"},
				{message: "前端"}
			]
		}

	});
</script>

7 、v-model 双向绑定

⽤来绑定标签元素的值与vue实例对象中data数据保持⼀致,从而实现双
向的数据绑定机制

<!-- View层 模板-->
<div id="app">
	<!-- 双向绑定，当view层变化，model层也变化 -->
	<input type="text" v-model="message" />{{message}}
	
	性别：
	<!-- 双向绑定，可以将value和message绑定住 -->
	<input type="radio" name="sex" value="男" checked 
	v-model="message"/>男
	<input type="radio" name="sex" value="女" 
	v-model="message"/>女

	当前选中的是：
	{{message}}

	下拉框：
	<select v-model="selected">
		<option value="" disabled selected="">---请选择---</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	当前选中的是：
	{{selected}}
</div>

<script>
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		data: {
			message: "",
			selected: ""
		}

	});
</script>

MVVM架构双向绑定机制

Model: 数据 Vue实例中绑定数据

VM: ViewModel 监听器

View: 页面页面展示的数据

8、事件修饰符

⽤来和事件连⽤,⽤来决定事件触发条件或者是阻止事件的触发机制

8.1 stop事件修饰符

用来阻止事件冒泡

<div class="cssA" @click="divClick">
<!-- btn属于div的内部，当btn的事件被触发，div也被触发 -->
<!-- stop事件修饰符，可以阻止事件冒泡 -->
<button type="button" class="btn" 
@click.stop="btnClick">按钮</button>
</div>

8.2 prevent 事件修饰符

阻止标签的默认行为，例如提交表单，跳转页面

<a href="www.baidu.com" @click.prevent="aClick">百度</a>

8.3 self 事件修饰符

阻止该标签内部发生事件后，事件冒泡

<!-- self事件修饰符，可以阻止事件冒泡 -->
<div class="cssA" @click.self="divClick">
<button type="button" class="btn" 
@click="btnClick">按钮</button>
</div>

8.4 once 事件修饰符

让指定事件只触发⼀次

<button type="button" class="btn" 
@click.once="btnClick">按钮</button>

注意：时间修饰符之间可以连用，例如 @click.stop.prevent.once

9、按键修饰符

与键盘中按键事件绑定在⼀起,⽤来修饰特定的按键事件的修饰符

按键修饰符

enter
tab
delete
esc
space
up
down
left
right

9.1 enter 回车键

⽤来在触发回车按键之后触发的事件

<!-- 当回车按键抬起时，触发一个事件 -->
<input v-model="msg" 
@keyup.enter="keyUp" type="text"/>{{msg}}

…

10、Axios 基本使用

10.1 引言

Axios 是⼀个异步请求技术
核心作用就是⽤来在页面中发送异步请求,并获取对应数据在页面中渲染
可以理解为，页面局部更新技术 Ajax

10.2 Axios 第一个程序

中文网站:
https://www.kancloud.cn/yunye/axios/234845
安装:
https://unpkg.com/axios/dist/axios.min.js

10.3 GET方式的请求

<script>
//发送GET⽅式请求
axios.get("http://localhost:8989/user/findAll?name=xiaochen")
//.then里面的是成功的回调函数
.then(function(response) {
 console.log(response.data);
 })
//.catch里面的是失败的回调函数
.catch(function(err){
 console.log(err);
 });
</script>

10.4 POST方式请求

<script>
//发送POST⽅式请求
axios.post("http://localhost:8989/user/save",{
 username:"xiaochen",
 age:23,
 email:"xiaochen@zparkhr.com",
 phone:13260426185})
//.then里面的是成功的回调函数
.then(function(response){
 console.log(response.data);
 })
//.catch里面的是失败的回调函数
.catch(function(err){
 console.log(err);
 });
</script>

10.5 axios并发请求

并发请求：将多个请求在同⼀时刻发送到后端服务接口
最后在集中处理每个请求的响应结果

<script>
//1.创建⼀个查询所有请求
 function findAll(){
 return axios.get("http://localhost:8989/user/findAll?name=xiaochen");
 }
 //2.创建⼀个保存的请求
 function save(){
 return axios.post("http://localhost:8989/user/save",{
 username:"xiaochen",
 age:23,
 email:"xiaochen@zparkhr.com",
 phone:13260426185});
 }
 //3.并发执⾏、⽤来发送⼀组并发请求
 axios.all([findAll(),save()])
 //.than响应成功后的回调函数
 .then(axios.spread(function(res1,res2){ 
 //⽤来将⼀组函数的响应结果汇总处理
 console.log(res1.data);
 console.log(res2.data);
 }));
</script>

11、vue结合axios的小案例

<div id="app">
<input type="text" v-model="name" 
@keyup.delete="shows" @keyup.enter="searchCity" /> 

<input type="button" value="搜索"
@click="searchCity" /> <br>

<span v-for="city in hotCitys">
	<a href="" 
	@click.prevent="searchCitys(city)">{{ city }}</a> &nbsp;
</span>

<hr>

<span v-show="isShow">{{ name }},今天的天气是: {{ message }} </span>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			name: "",
			hotCitys: ["北京", "上海", "广州", "深圳"],
			message: "",
			isShow: false,
			//要把vue对象，提取出来
			//为了在其他属性中可以使用vue对象
			_this=this
		},
		methods: {
			searchCity() {
				//获取输入的城市信息
				let _this = this;
				//发送axios请求
				axios.get("http://localhost:8989/city/find?name=" + this.name).then(function(response) {
					console.log(response.data.message);
					//要分清楚this表示的是哪个对象
					//当使用回调函数时，this表示window对象，而不是vue对象
					_this.message = response.data.message;
					_this.isShow = true;
				}).catch(function(err) {
					console.log(err);
				});
			},
			searchCitys(name) {
				this.name = name;
				this.searchCity(); //函数中调用函数
			},
			shows() {
				this.isShow = false;
			}
		}
	});
</script>

12、vue生命周期

⽣命周期钩子 ====> 生命周期函数
在这里插入图片描述

1、beforeCreate

该函数执行时，vue实例仅仅完成了自身事件绑定和生命周期初始化工作；
还没有el，data，methods相关属性

<script>
	new Vue({
		el:"#app",
		data:{
			msg: 'hello'
		},
		methods:{
			
		},
//1、该函数执行时，vue实例仅仅完成了自身事件绑定和生命周期初始化工作；还没有el，data，methods相关属性
		beforeCreate(){		
			console.log("beforeCreate---"+this.msg);
		},
	});
</script>

在这里插入图片描述

2、created

该函数执行时，vue实例已经初始化了el，data，methods相关属性

<script>
	new Vue({
		el:"#app",
		data:{
			msg: 'hello'
		},
		methods:{
			
		},
//2、该函数执行时，vue实例已经初始化了el，data，methods相关属性
		created() {
			console.log("created---"+this.msg);
		}
	});
</script>

在这里插入图片描述

3、beforeMount

该函数执行时，vue将el中指定作用范围作为一个模板进行编译
数据并没有渲染

<div id='app'>
	<span id="sp">
		{{msg}}
	</span>
</div>

<script>
	new Vue({
		el:"#app",
		data:{
			msg: 'hello'
		},
		methods:{
			
		},
//3、该函数执行时，vue将el中指定作用范围作为一个模板进行编译，数据并没有渲染
		beforeMount() {
			console.log("beforeMount---"+document.getElementById("sp").innerText)
		}
	});
</script>

在这里插入图片描述

4、mounted

该函数执行时，已经将数据渲染到模板上，并且挂载到了页面中

<div id='app'>
	<span id="sp">
		{{msg}}
	</span>
</div>

<script>
	new Vue({
		el:"#app",
		data:{
			msg: 'hello'
		},
		methods:{
			
		},
//4、该函数执行时，已经将数据渲染到模板上，并且挂载到了页面中
		mounted() {
			console.log("mounted---"+document.getElementById("sp").innerText)
		}
	});
</script>

在这里插入图片描述

5、beforeUpdate

该函数在data中数据发生变化时执行，页面显示的依然是原始数据

<div id='app'>
	<span @click="changeData" id="sp">
		{{msg}}
	</span>
</div>

<script>
	new Vue({
		el:"#app",
		data:{
			msg: 'hello'
		},
		methods:{
			changeData(){
				this.msg='world';
			}
		},
//5、该函数在data中数据发生变化时执行，页面显示的依然是原始数据
		beforeUpdate() {
			console.log("beforeUpdate，data中的值---"+this.msg);
			console.log("beforeUpdate，页面中的值---"+document.getElementById("sp").innerText)
		}
	});
</script>

在这里插入图片描述

6、updated

该函数在data中数据发生变化后执行，页面中数据也发生变化，保持了一致

<div id='app'>
	<span @click="changeData" id="sp">
		{{msg}}
	</span>
</div>

<script>
	new Vue({
		el:"#app",
		data:{
			msg: 'hello'
		},
		methods:{
			changeData(){
				this.msg='world';
			}
		},
//6、该函数在data中数据发生变化后执行，页面中数据也发生变化，保持了一致
		updated() {
			console.log("updated，data中的值---" + this.msg);
			console.log("updated，页面中的值---" + document.getElementById("sp").innerText)
		}
	});
</script>

在这里插入图片描述

7、beforeDestroy

该函数执行时，vue中的el，methods，data，component都没被销毁

8、destroyed

该函数执行时，vue实例被彻底销毁

13、vue中的组件（Component）

1、组件作用

用来减少vue实例对象中的代码量，将一些标签抽取出来，定义为一个组件
可以根据不同业务功能划分不同的多个组件，然后由多个组件去完成整个页面的布局，便于页面开发管理和维护

2、组件注册（template属性）

2.1 全局组件

全局组件注册给vue实例，以后可以在任意vue实例范围内使用该组件

<div id="app">
	<!--使用全局组件，在vue实例范围内使用-->
	<mytemplate></mytemplate>
</div>

<!--抽取出模板，在vue实例范围外-->
<template id="template1">
	<h1>全局组件</h1>
</template>

<script>
	//注册全局组件！
	Vue.component("mytemplate", {
		template: "#template1"		//将抽取出的模板注册
	})

	var vm = new Vue({
		el: "#app",
		data: {},
		methods: {}
	});
</script>

注意

Vue.Component用来开发全局组件，与vue实例同级！
参数1：组件名称
参数2：组件配置{ }
template：组件中的html代码，有且仅有一个root标签
使用组件时，在vue的作用范围内
若注册组件时，使用驼峰命名
例如： userName
使用组件时，需要写为： user-name

2.2局部组件

使用vue实例中的components属性注册一个局部组件，只能在该vue实例中使用，不会对其他vue实例产生影响

1、第一种方式

<div id="app">
	<mytemplate></mytemplate>
</div>

<template id="template1">
	<h1>局部组件</h1>
</template>

<script>
	//只有当前vue实例可以使用
	var vm = new Vue({
		el: "#app",
		data: {},
		methods: {},
		components:{						//注册局部组件
			mytemplate:{					//组件名称
				template:"#template1"		//组件对应的模板
			}
		}
	});
</script>

2、第二种方式

<div id="app">
	<mytemplate></mytemplate>
</div>

<template id="template1">
	<h1>局部组件</h1>
</template>

<script>
	//只是将第一种方式中的，组件名称对应的对象，抽取为一个变量
	let mytemplate={
		template: '#template1'
	};
	
	//只有当前vue实例可以使用
	var vm = new Vue({
		el: "#app",
		data: {},
		methods: {},
		components:{					//注册局部组件
			//组件名称：对象{template:模板}	
			mytemplate:mytemplate		
		}					
	});
</script>

3、组件中的props属性

用来给组件传递数据的！

3.1通过在组件标签上声明静态数据，传递给组件内部

<div id="app">
	<mytemplate name='Maki' age='18'></mytemplate>
</div>

<template id="template1">
	<h1>姓名：{{name}}，年龄：{{age}}</h1>
</template>

<script>
	//将注册组件时，设置的一些属性，抽取为一个变量
	let mytemplate = {
		//设置组件对应的模板
		template: '#template1',
		//接收组件标签，传递的参数
		props: ['name','age']
	};

	//只有当前vue实例可以使用
	var vm = new Vue({
		el: "#app",
		data: {},
		methods: {},
		components: { 					//注册局部组件
			mytemplate: mytemplate, 	//注册组件
		}
	});
</script>

3.2通过v-bing，在组件标签上绑定属性，传递动态数据给组件内部

<div id="app">
	<mytemplate :name='username' :age='userage'></mytemplate>
</div>

<template id="template1">
	<h1>姓名：{{name}}，年龄：{{age}}</h1>
</template>

<script>
	//将注册组件时，设置的一些属性，抽取为一个变量
	let mytemplate = {
		template: '#template1',
		//接收的其实是vue实例中的data中的值
		props: ['name', 'age']
	};

	//只有当前vue实例可以使用
	var vm = new Vue({
		el: "#app",
		data: {
			username: 'Maki',
			userage: 18
		},
		methods: {},
		components: { //注册局部组件
			mytemplate: mytemplate, //注册组件
		}
	});
</script>

4、组件中的data属性

可以在组件内部，使用自己的数据

<div id="app">
	<mytemplate></mytemplate>
</div>

<template id="template1">
	<h1>姓名：{{name}}</h1>
</template>

<script>
	//将注册组件时，设置的一些属性，抽取为一个变量
	let mytemplate = {
		template: '#template1',
		//组件内部自己的data数据
		data(){
			return {
				name: 'Maki'
			};
		}
	};

	//只有当前vue实例可以使用
	var vm = new Vue({
		el: "#app",
		data: {},
		methods: {},
		components: { //注册局部组件
			mytemplate: mytemplate, //注册组件
		}
	});
</script>

5、组件中的methods属性

可以在组件内部，定义自己的函数

<!-- View层 模板-->
<div id="app">
	<mytemplate></mytemplate>
</div>

<template id="template1">
	<h1 @click="clickme">姓名：{{name}}</h1>
</template>

<script>
	//将注册组件时，设置的一些属性，抽取为一个变量
	let mytemplate = {
		template: '#template1',
		//组件内部自己的data数据
		data(){
			return {
				name: 'Maki'
			};
		},
		//组件内部自己的函数
		methods:{
			clickme(){
				//this表示当前组件对象
				alert(this.name);
			}
		}
	};

	//只有当前vue实例可以使用
	var vm = new Vue({
		el: "#app",
		/* Model层，模拟后台数据 */
		data: {},
		methods: {},
		components: { //注册局部组件
			mytemplate: mytemplate, //注册组件
		}
	});
</script>

14、vue中的路由（VueRouter）

1、什么是路由，路由的作用

根据请求路径，按照一定的规则进行请求的转发，帮助我们实现统一请求的管理，用来在vue中实现组件的动态切换

2、使用路由

2.1 引入路由，是vue全家桶里的另一个项目

注意：必须在引入vue的下面，再引入路由

<script 
src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2.2 声明组件模板

<template id="#login">
	<h1>登录</h1>
</template>
<template id="#register">
	<h1>注册</h1>
</template>

<script>
	//声明组件模板
	let login={					//login模板抽取为一个变量
		template: '#login'
	}
	let register={				//register模板抽取为一个变量
		template: '#register'
	}
</script>

2.3 创建路由对象，并定义规则

<script>
	//路由实例
	let router = new VueRouter({
		//定义路由规则，注册组件模板
		routes:[
		//login请求，显示login模板的组件
		{path:'/login',component:login},

		//register请求，显示register模板的组件
		{path:'/register',component:register},
		
		//第一次进入页面时，重定向到/login
		{path:'/',redirect:'/login'}
		]
	});
</script>

2.4 将路由对象注册到vue实例

<script>
	//Vue实例
	let vue = new Vue({
		el: "#app",
		data: {},
		methods: {
	
		},
		router:router		//将路由对象，注册到vue实例
	});
</script>

2.5 在页面中显示路由的组件

<div id="app">
	<!--该组件会根据路由规则，动态的显示模板-->
	<router-view></router-view>
</div>

2.6 使用链接，根据路由规则来动态切换组件

<div id="app">
	<!--发送的请求，必须是#/...-->
	<a href="#/login">登录</a>
	<a href="#/register">注册</a>
	<!--该组件会根据路由规则，动态的显示模板-->
	<router-view></router-view>
</div>

在这里插入图片描述

3、路由中的router-link组件

作用：用来替换我们切换路由的标签，发送请求时，可以不再加 # 号

<div id="app">
	<!-- 			
		<a href="#/login">登录</a>
		<a href="#/register">注册</a> 
	-->
	<router-link to="/login">登录</router-link>
	<router-link to="/register" tag="button">注册</router-link>
	<!--该组件会根据路由规则，动态的显示模板-->
	<router-view></router-view>
</div>

可以使用tag属性，将该标签渲染为指定的标签，默认是a标签

4、路由中的参数传递

4.1 传统的参数传递

通过?拼接参数

<!-- 传统方式 -->
<router-link to="/login?name=张三">登录</router-link>

<script>
	//路由实例
	let router = new VueRouter({
		//定义路由规则，注册组件模板
		routes: [{
			//接受到login请求后，显示login组件
				path: '/login',
				component: login 
			},
			{
			//接受到register请求后，显示register组件
				path: '/register', 
				component: register
			},
			{
			//第一次进入页面时，重定向到/login
				path: '/', 
				redirect: '/login'
			}
		]
	});
</script>

组件中获取参数

<template id="login">
	<h1>登录 {{this.$route.query.name}}</h1>
</template>

<script>
	//声明组件模板
	let login = {
		template: '#login',
		//组件也有生命周期，组件一创建完毕就执行
		created() {
			console.log(this.$route.query.name);
		}
	};
</script>

4.2 restFul风格的参数传递

使用路径方式传递参数

<router-link to="/register/李四" tag="button">注册</router-link>

更改路由规则

<script>
	//路由实例
	let router = new VueRouter({
		//定义路由规则，注册组件模板
		routes: [{
			//接受到login请求后，显示login组件
				path: '/login',
				component: login 				
			},
			{
			//接受到register/参数 请求后，显示register组件
				path: '/register/:name', 		
				component: register
			},
			{
			//第一次进入页面时，重定向到/login
				path: '/', 
				redirect: '/login'
			}
		]
	});
</script>

组件中获取参数

<template id="register">
	<h1>注册 {{this.$route.params.name}}</h1>
</template>

<script>
	//声明组件模板
	let register = {
		template: '#register',
		//组件也有生命周期，组件一创建完毕就执行
		created() {
			console.log(this.$route.params.name);
		}
	};
</script>

5、嵌套路由

5.1 声明组件模板

<template id="product">
	<div>
		<h1>商品管理</h1>
		<router-link to="/product/add">商品添加</router-link>
		<router-link to="/product/alter">商品修改</router-link>

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

<script>
	//声明组件模板
	let product = {
		template: '#product'
	};
	let add = {
		template: '<h4>商品添加</h4>'
	};
	let alter = {
		template: '<h4>商品修改</h4>'
	};
</script>

5.2 创建路由对象，定义规则

//路由实例
let router = new VueRouter({
	//定义路由规则，注册组件模板
	routes: [{
		//接受到product请求后，显示product组件
		path: '/product',
		//接收到product/xxx 请求后，在不覆盖父组件的情况下，显示子组件
		component: product,
		children:[
			{path:'add',component:add},
			{path:'alter',component:alter},
		]
	}, ]
});

5.3 将路由对象注册到vue实例

//Vue实例
var vm = new Vue({
	el: "#app",
	data: {},
	methods: {

	},
	router: router //将路由对象，注册到vue实例
});

5.5 全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a href="#/product">商品管理</a>
			<router-view></router-view>
		</div>

		<template id="product">
			<div>
				<h1>商品管理</h1>
				<router-link to="/product/add">商品添加</router-link>
				<router-link to="/product/alter">商品修改</router-link>

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

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

		<script>
			//声明组件模板
			let product = {
				template: '#product'
			};
			let add = {
				template: '<h4>商品添加</h4>'
			};
			let alter = {
				template: '<h4>商品修改</h4>'
			};

			//路由实例
			let router = new VueRouter({
				//定义路由规则，注册组件模板
				routes: [{
					//接受到product请求后，显示product组件
					path: '/product',
					//接收到product/参数 请求后，在不覆盖父组件的情况下，显示子组件
					component: product,
					children:[
						{path:'add',component:add},
						{path:'alter',component:alter},
					]
				}, ]
			});

			//Vue实例
			var vm = new Vue({
				el: "#app",
				data: {},
				methods: {

				},
				router: router //将路由对象，注册到vue实例
			});
		</script>

	</body>
</html>

学JAVA好饿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE

Vue 引言渐进式 JavaScript 框架1、渐进式易⽤ html css javascript⾼效开发前端⻚⾯⾮常⾼效灵活开发灵活多样性# 总结Vue 是⼀个javascript 框架# 后端服务端开发⼈员::Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚⾄不需要操作⻚⾯中任何DOM元素,就很容易的完成数据和视图绑定双向绑定 MV...
复制链接

扫一扫