测开-Vue开发part2

ChasingTheDawn
115 阅读3分钟

vue组件化开发

使用div布局时：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#nav {
				height: 100px;
				width: 1360px;
				background-color: orangered;
			}
			#left {
				height: 500px;
				width: 900px;
				background-color: aquamarine;
				float: left;
				
			}
			#right {
				height: 500px;
				width: 460px;
				background-color: antiquewhite;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id='nav'></div>
		<div id='left'></div>
		<div id='right'></div>
	</body>
</html>
组件的注册和使用
  • 全局组件的注册和使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
		<style type="text/css">
			#nav {
				height: 100px;
				width: 1360px;
				background-color: orangered;
			}
			#left {
				height: 500px;
				width: 900px;
				background-color: aquamarine;
				float: left;
				
			}
			#right {
				height: 500px;
				width: 460px;
				background-color: antiquewhite;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id='app'>
			<!-- 组件的使用 -->
			<nav-cont></nav-cont>
			<left-cont></left-cont><right-cont></right-cont>
		</div>
		
	</body>
	<script type="text/javascript">
		// 全局的组件定义
		Vue.component('nav-cont',{
			template:
			// 踩坑：把代码通过引号引起来
			"<div id='nav'><h1>导航栏内容</h1></div>"
		})
		Vue.component('left-cont',{
			template:
			"<div id='left'><h1>左边内容</h1></div>"
		})
		Vue.component('right-cont',{
			template:
			"<div id='right'><h1>右边内容</h1></div>"
		})
		
		var vm=new Vue({
			el:'#app'
		})
	</script>
</html>

组件的命名：

image.png

定义的全局组件在其他的组件中也可以使用。

  • 局部组件的注册和使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script> -->
			
		</script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<vm-btn1></vm-btn1>
			<vm-btn2></vm-btn2>
		</div>
		
	</body>
	<script type="text/javascript">
		var vm =new Vue({
			el:'#app',
			data:{
				
			},
			//定义局部组件
			components:{
				//子组件的数据 同样是放在data中，
				//注意：组件中的data是一个方法，数据为函数data return出来的内容
				// 组件的模板内容只能有一个根节点，即最外层只有一个元素
				'vm-btn1':{
					template:"<div><button @click='handleClick' type='button'>{{msg}}</button><p>{{name}}</p></div>",
					data:function(){
						return {
							msg:"子组件按钮1",
							name: "什么名字"
						}
					},
					//组件中的方法定义在methods里
					
					methods:{
						handleClick:function(){
							console.log("点击了按钮")
						}
					}
					},
				'vm-btn2':{template:"<button type='button'>子组件按钮2</button>"}
			}
		})
	</script>
</html>

局部组件只能在正文中使用，不能用于其他组件中。

遇到报错：Error compiling template: Component template should contain exactly one root

组件的模板<template>应该只能包含一个根元素，也就是是说作为元素<template>的直系儿子的元素只能有一个。

解决办法是将template的子元素用一个div包裹起来

父组件往子组件中传数据

实现步骤：

  1. 在子组件中通过props来定义接收数据的参数名{子组件的属性名}
  2. 父组件在引用子组件时，通过属性绑定的形式传递参数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用子组件 -->
			<data-view :all="msg"></data-view>
			
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component('data-view',{
			// 子组件使用父组件的数据,指定父组件中引用该组件时传递的参数名
			// 被el:'#app'使用，为它的子组件
                        // 使用props接收父组件传来的参数
			props:["all"],
                        // 使用传递来的数据
			template:'<div>{{all}}</div>'
		})
		var vm =new Vue({
			el:'#app',//父组件
			data:{
				msg:"父组件的msg"
			
			}
		})
	</script>
</html>

传一组数据+v-for使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用子组件 -->
			<data-view :all="case1"></data-view>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component('data-view',{
			// 子组件使用父组件的数据,指定父组件中引用该组件时传递的参数名
			// 被el:'#app'使用，为它的子组件
			props:["all"],
			template:'<table border="1"><tr><th>序号</th><th>接口名</th><th>项目名</th><th>描述</th><th>创建时间</th></tr><tr v-for="item in all"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.productName}}</td><td>{{item.describe}}</td><td>{{item.creatTime}}</td></tr></table>',
		})
		var vm =new Vue({
			el:'#app',//父组件
			data:{
				msg:"父组件的msg",
				case1:[{
					"id":1,
					"name":"登录接口",
					"productName":"自动化测试项目",
					"describe":"正常流",
					"creatTime":"2022-03-22 12:00:01"
				},{
					"id":2,
					"name":"查询接口",
					"productName":"自动化测试项目",
			
                        "describe":"正常流",
					"creatTime":"2022-03-23 12:00:01"
				}]
			}
		})
	</script>
</html>
子组件往父组件中传数据

实现步骤：

  1. 子组件中定义一个事件

    通过$emit触发自定义事件，并分别传入对应参数$emit('自定义的事件名',传递的数据)

    示例：

    当点击这个button时，触发自定义的run事件 <button @click="$emit(\'run\',item)">执行</button>

  2. 在父组件中监听事件

    父组件在引用子组件时，通过事件监听机制，来监听子组件的自定义事件@run=

    并指定方法去处理这个事件@run="recvData($event)"

    当触发事件时，子组件中传递过来的数据，父组件可以通过$event接收

    @自定义的事件名="处理事件的方法($event)"

    示例：

    <data-view :all="case1" @run="recvData($event)"></data-view>

  3. 在处理事件的方法中接收数据并处理

    示例：

    methods:{
// 父组件监听到子组件触发事件之后，接收数据的方法
// val 就是传入的值
    recvData:function(val){
	console.log("父组件中接收数据的方法，监听：",val)
	// 接收到的数据传给info
	this.info = val
        }
}

功能：点击执行按钮，将这条数据信息展示在表格下面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<data-view :all="case1" @run="recvData($event)"></data-view>
			<br>
			<div id="">
				<!-- 点击子组件中的执行按钮，将点击的那条数据传给父组件进行现实 -->
				<h3>用例执行的信息：{{info}}</h3>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component('data-view',{
			// 子组件使用父组件的数据,指定父组件中引用该组件时传递的参数名
			// 被el:'#app'使用，为它的子组件
			props:["all"],
			template:'<table border="1"><tr><th>序号</th><th>接口名</th><th>项目名</th><th>描述</th><th>创建时间</th><td>操作</td></tr><tr v-for="item in all"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.productName}}</td><td>{{item.describe}}</td><td>{{item.creatTime}}</td><td><button @click="$emit(\'run\',item)">执行</button></td></tr></table>',
		})
		var vm =new Vue({
			el:'#app',//父组件
			data:{
				msg:"父组件的msg",
				case1:[{
					"id":1,
					"name":"登录接口",
					"productName":"自动化测试项目",
					"describe":"正常流",
					"creatTime":"2022-03-22 12:00:01"
				},{
					
					"id":2,
					"name":"查询接口",
					"productName":"自动化测试项目",
					"describe":"正常流",
					"creatTime":"2022-03-23 12:00:01"
				}],
				// 子组件传数据给父组件的info
				info:""
			},
			methods:{
				// 父组件监听到子组件触发事件之后，接收数据的方法
				// val 就是传入的值
				recvData:function(val){
					console.log("父组件中接收数据的方法，监听：",val)
					// 接收到的数据传给info
					this.info = val
				}
			}
		})
	</script>
</html>
兄弟组件之间传数据
插槽
  1. 插槽概念

定义组件时，给父组件预留填充html内容（空白），作用：父组件往子组件中传递内容

图片.png

把html填充在插槽slot的位置上，效果：

图片.png

把父组件的这段html传给子组件中的<slot></slot>

  1. 具名插槽：

传递多个插槽时如何区分，使用具名插槽。name属性。

图片.png

图片.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<data-view :all="case1" @run="recvData($event)">
				<template slot="second">
					<p>这是第二个插槽</p>
				</template>
				<template slot="first">
					<h1>自动化测试平台</h1>
				</template>
			</data-view>
			<br>
			<div id="">
				<!-- 点击子组件中的执行按钮，将点击的那条数据传给父组件进行现实 -->
				<h3>用例执行的信息：{{info}}</h3>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component('data-view',{
			// 子组件使用父组件的数据,指定父组件中引用该组件时传递的参数名
			// 被el:'#app'使用，为它的子组件
			props:["all"],
			template:'<div><slot name="first"></slot><h3>--分割线--</h3><slot name="second"></slot><table border="1"><tr><th>序号</th><th>接口名</th><th>项目名</th><th>描述</th><th>创建时间</th><td>操作</td></tr><tr v-for="item in all"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.productName}}</td><td>{{item.describe}}</td><td>{{item.creatTime}}</td><td><button @click="$emit(\'run\',item)">执行</button></td></tr></table></div>',
		})
		var vm =new Vue({
			el:'#app',//父组件
			data:{
				msg:"父组件的msg",
				case1:[{
					"id":1,
					"name":"登录接口",
					"productName":"自动化测试项目",
					"describe":"正常流",
					"creatTime":"2022-03-22 12:00:01"
				},{
					
					"id":2,
					"name":"查询接口",
					"productName":"自动化测试项目",
					"describe":"正常流",
					"creatTime":"2022-03-23 12:00:01"
				}],
				info:""
			},
			methods:{
				recvData:function(val){
					console.log("父组件中接收数据的方法，监听：",val)
					// 接收到的数据传给info
					this.info = val
				}
			}
		})
	</script>
</html>
element ui

官网 element.eleme.cn/#/zh-CN

<!-- 引入element ui -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<!-- 引入element ui -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<data-view></data-view>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('data-view',{
			// 子组件使用父组件的数据,指定父组件中引用该组件时传递的参数名
			// 被el:'#app'使用，为它的子组件
			props:["all"],
			template:'<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu>',
			data() {
			      return {
			        activeIndex: '1',
			        activeIndex2: '1'
			      };
			    },
			methods: {
			      handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      }
			    }
		})
		
		var vm =new Vue({
			el:"#app"
		})
	</script>
</html>
单文件组件

前后端交互axios

安装axios

官网 ：www.axios-js.com/

安装方式：

图片.png

提供一个接口来进行请求

http://httpbin.org/get

http://httpbin.org/post
axios发送get请求
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 发送一个get请求,但是是异步的，所以res不是他的响应数据，res是一个Promise对象
			const pro = axios.get("http://httpbin.org/get1")
			console.log(pro)
			//  ---- 请求成功的获取方法
			// 使用then方法获得返回的响应数据
			pro.then(function(response){//回调函数中的参数response接收请求返回的响应数据
				console.log(response)//什么时候执行这个funtion？什么时候返回了数据什么时候执行
				//获取响应体 data
				console.log(response.data)
				// 获取响应状态 status码
				console.log(response.status)
			})
			// ----请求错误的获取方法
			pro.catch(function(error){
				console.log(error.response)
				let respone = error.response
				console.log(respone.data)
			})
			// 使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围
		</script>
	</body>
</html>

图片.png

自定义 HTTP 状态码的错误范围：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		
			// 使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围
			const pro = axios.get('http://httpbin.org/get1', {
			  validateStatus: function (status) {
				  //HTTP 状态码的错误范围
                                  // return Ture 那就可以所有请求都走then方法，不用再定义catch方法了。
			    return status < 500; // 小于500才算错误
			  }
			})
			pro.then(function(response){
				console.log(response)
				//获取响应体 data
				console.log(response.data)
				// 获取响应状态 status码
				console.log(response.status)
			})
		</script>
	</body>
</html>

这样404也不算错误状态，能够正常打印：

图片.png

axiso创建实例：

图片.png

<body>
		<script type="text/javascript">
			//使用axiso创建请求对象
			const request = axios.create({
				validateStatus: function (status) {
					//把所有请求状态码都当成成功的
				  return true; 
				},
				// 指定基本的url域名
				baseURL:"http://httpbin.org"
			})
			// 使用链式调用
			request.get("/get1").then(function(response){
				console.log(response.data)
			})
		</script>
</body>

get请求传参

<body>
		<script type="text/javascript">
			//使用axiso创建请求对象
			const request = axios.create({
				validateStatus: function (status) {
				  return true; 
				},
				baseURL:"http://httpbin.org"
			})
			// get请求传参 
			// 方式1：：get(url,{params:{key:value,key:value}})
			request.get("/get1",
				{params:{id:101}}
			).then(function(response){
				console.log(response.data)
			})
			// 方式2: 参数拼接到url上，get(url？key=value&key=value)
			request.get("/get1?id=1001").then(function(response){
				console.log(response.data)
			})
		</script>
	</body>
axios发送post请求

post请求 、表单请求：

<body>
		<script type="text/javascript">
			const request = axios.create({
				baseURL:"http://httpbin.org",
			})
			// 发送post请求
			request.post("/post",{username="lei",password="123456"}).then(
			function(response){
				console.log("post请求")
				console.log(response.data)
			})
			// 表单请求 application/x-www-form-urlencoded format
			const params = new URLSearchParams();
			params.append('param1', 'value1');
			params.append('param2', 'value2');
			axios.post('/post', params).then(
			function(response){
				console.log("post请求")
				console.log(response.data)
			})
		</script>
</body>
全局的axios配置

配置基本的host:

axios.defaults.baseURL = 'https://api.example.com';

配置headers:

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

图片.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建请求实例
			const request = axios.create({
				baseURL:"http://httpbin.org",
			})
			// 添加请求拦截器:每次请求之前都会自动请求
			request.interceptors.request.use(function (config) {
			    // 在发送请求之前做些什么
				// 传入config，可以修改config
				// 接口需要鉴权 token，后面讲
			    return config;
			  })
			  // 基本不用，可以删掉
			  // , function (error) {
			  //   // 对请求错误做些什么 
			  //   return Promise.reject(error);
			  // });
			  // 添加响应拦截器：每次请求之后，响应之前会自动调用
			  request.interceptors.response.use(function (response) {
			      // 对响应数据做点什么
				  // 只需要返回的data
			      return response.data;
			    }, function (error) {
			      // 对响应错误做点什么
			      return Promise.reject(error);
			    });
				// 请求
				request.get("/get").then(function(response){
					// 返回的response就是response的data，因为拦截器那里做了修改
					console.log(response)
				})
			  
		</script>
	</body>
</html>
async await的使用

如果不喜欢用catch then 的方法来获取数据，也可以通过 async await的方式来处理异步的部分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建请求实例
			const request = axios.create({
				baseURL:"http://httpbin.org",
			})
			// 添加请求拦截器
			request.interceptors.request.use(function (config) {
			    return config;
			  })
			  // 添加响应拦截器：
			  request.interceptors.response.use(function (response) {
			      // 对响应数据做点什么
			      return response.data;
			    }, function (error) {
			      // 对响应错误做点什么
			      return Promise.reject(error);
			    });
				// 使用async await
				async function getProject(){
					// await只能使用在async定义的异步函数中
					const response = await request.get("/get")
					console.log(response)
				}
				// 调用函数
				getProject()
			  
		</script>
	</body>
</html>

登录示例：结合vue、axsio、elementUI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入elementUI -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="用户名">
			    <el-input v-model="formLogin.user"></el-input>
			  </el-form-item>
				<el-form-item label="密码">
				  <el-input v-model="formLogin.pwd" type="password"></el-input>
				</el-form-item>
			  <el-form-item>
			      <el-button type="primary" @click="loginHandle">登录</el-button>
			    </el-form-item>
			</el-form>
			
		</div>
		
		
		
	</body>
	<script type="text/javascript">
		const request = axios.create({
			baseURL:"http://127.0.0.1:5000/",
		})
		var vm = new Vue({
			el:"#app",
			data:{
				formLogin:{
					user:"",
					pwd:""
				}
			},
			methods:{
				loginHandle:function(){
					console.log(this.formLogin)
					request.post("/api/user/login",this.formLogin).then(
					function(response){
						console.log(response.data)
						if (response.data.code == "1"){
							alert("登录成功，跳转首页")
						}else{
							alert("登录失败，给出提示")
						}
						
						
					})
				},
				// 使用asnyc await方法请求
				// loginHandleAsnyc:async function(){
				// 	const response = await request.post("/api/user/login",this.formLogin)
				// 	console.log(response.status)
				// 	console.log(response.data)
				// }
			}
		})
	</script>
</html>

知识点：

图片.png

vue路由

单页面应用 single page web application，SPA

SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。

单页面，根据不同的路由地址，返回不同的templete

Vue Router官网： router.vuejs.org/zh/

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

安装：可以npm 也可以script引入

<!-- 引入vue-router -->
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

路由：

路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

路由示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 路由占位符：路由组件展示的地方 -->
			<router-view></router-view>
                        <!-- 路由link: 点击跳转到/home -->
                        <router-link to="/home"></router-link>
                        
		</div>
	</body>
	<script type="text/javascript">
		/*
		第一步：定义展示页面内容的组件
		第二步：定义路由规则
		第三步：初始化路由对象
		第四步：将路由对象绑定到vue实例中去
		第五步：在根组件中创建路由视图的展示位置<router-view></router-view>
		*/
		// 路由模式，只用写组件内容，不用components注册
		// 首页 
		const home = {
			template:'<div><h1>这是项目首页</h1></div>'
		}
		// 登录页面
		const login = {
			template:'<div><h1>这是项目登录页</h1></div>'
		}
		// 定义路由规则
		const router = new VueRouter({
			// 通过router指定路由规则
			routes:[{
				// 访问路径/时，展示home组件
				path:"/",components:home	
			},
			{
				path:"/login",components:login	
			}]
		})
		
		var vm=new Vue({
			el:"#app",
			// 将路由对象绑定到vue实例
			router:router
		})
	</script>
</html>

重定向路由：redirect

const router = new VueRouter({
        routes:[{
                path:"/check",redirect:"/getList"
        }]
})

命名路由：name

const router = new VueRouter({
        routes:[{
                path:"/check",
                redirect:"/getList",
                name: "check"
                
        }]
})

路由视图：router-view 、路由链接：router-link

<!-- 路由占位符：路由组件展示的地方 -->
<router-view></router-view>
<!-- 路由link: 点击跳转到/home -->
<router-link to="/home"></router-link>

声明式路由：

使用router-link声明我点击这个按钮时跳转到/home页面，这种访问方式叫声明式路由。

<router-link to="/home"><button type="button">首页</button></router-link>

编程式路由： 有时候还需要进行值的判断来判断是否跳转页面，使用编程式路由this.$router.push()

image.png

带参数的路由：通过:参数拼接 image.png

导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

image.png

vue-cli的使用

介绍及安装

image.png

Vue CLI 有几个独立的部分——如果你看到了我们的源代码，你会发现这个仓库里同时管理了多个单独发布的包。

image.png

image.png

创建一个项目

使用命令，需要选配一些配置，英文界面

vue create hello-world

使用图形化界面，web页面，容易看懂和操作

vue ui

打开页面版的界面

image.png

image.png

image.png

这三项打开：

image.png

非专业前端 可以把语法规范关闭。 image.png

默认使用2.x image.png

保存预设：

image.png

项目结构：

image.png

index.js文件 image.png

app.vue文件

主要结构是三个部分，template -- 写html ，script --写js，style--写css

image.png

装插件 or 装依赖

image.png

image.png

安装完成后，在项目文件中会在plugins下新增element.js文件

image.png

安装axios插件可有，也可以选择安装原生的axios依赖：

image.png

vue的插件与依赖的区别：插件是基于vue的一些列功能包，离开了vue就不能使用。依赖不基于vue，引用这个依赖就可以使用。

需要自己手动导入：import axios from 'axios' （main.js）

运行项目：

image.png

打开首页：

image.png

初始化的项目页面如下，我们需要清掉它初始化的内容：

image.png

1.App.vue页面：

image.png

2.不使用views目录结构，删掉

3.删掉views对应的路由规则删掉

image.png

4.删掉自带的组件helloworld,componets文件夹下

这样就得到了一个干净的项目了。

avatar
文章
阅读
粉丝