VUE API案例和应用，VUE生命周期，VUE组件化说明，VUE中的路由

最新推荐文章于 2022-04-17 00:32:00 发布

鬼道迷踪

最新推荐文章于 2022-04-17 00:32:00 发布

阅读量127

点赞数

分类专栏：前端 # Vue JS

本文链接：https://blog.csdn.net/weixin_39129186/article/details/119150275

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue JS

3 篇文章 0 订阅

订阅专栏

1 VUE介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2 VUE组件说明

3 VUE基本语法

3.1 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		<!-- 
			入门案例步骤：
				1.导入vue.js文件     html下部编辑
				2.指定区域进行渲染   需要准备div  vue.js代码
				3.创建vue.js对象    指定渲染区域   动态调用
		 -->
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 在div中展现msg属性 
				插值表达式: {{key}}
				-->
			<h1>{{msg}}</h1>
		</div>
		
		<div id="phone">
			<h1>{{ep}}</h1>
		</div>
		
		
		<!-- 1.导入js文件 -->
		
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建vue对象 -->
		<script>
			/**
			 * 语法：
			 * 		1.const  定义常量的
			 * 		2.let   作用与var类似，有作用域的概念
			 * 		3.var 特点：没有作用域
			 */
			const APP= new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					//key:vaule
					msg: "您好vue"	
				}
			})
			
			const PHONE=new Vue({
				el: "#phone",
				data: {
					ep: "what are you doing?"
				}
			})
			
			
		</script>
		
	</body>
</html>

3.2 数据显示
命令: v-text/v-html/v-once/v-pre 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>

		<div id="app">
			<!-- 特点：如果页面没有渲染完成,则直接展现给用户
					   插值表达式需要直接显示
				注意事项：只有显示时采用，输入操作不可使用
				1.v-text指令: 如果页面没有渲染完成,则不显示信息
			 -->
			<h1 v-text="msg"></h1>
			
			<!-- 2.v-html直接渲染html标签 -->
			<div v-html="h3html"></div>
			
			<!-- 3.v-pre跳过预编译显示标签体本身 -->
			<div v-pre>{{msg}}</div>
			
			<!-- 4.v-once 只渲染一一次 -->
			<div v-once>{{once}}</div>
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					msg: "您好vue",
					h3html: "<h1>我是html渲染</h1>",
					once: "我只能被渲染一次"
				}
			})
		</script>
	</body>
</html>

3.3 双向数据绑定
3.3.1双向数据绑定代码

双向数据绑定: 实现了页面与数据的绑定. 页面变数据变 / 数据变页面变.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>

		<div id="app">
			<!-- 双向数据绑定 v-model
			 1.数据端----页面
			 2.页面------数据
			 -->
			<h1 v-text="msg"></h1>
			<input name="msg" v-model="msg"/>
			<br />
			{{msg}}
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					msg: "数据随时修改",
				}
			})
		</script>
	</body>
</html>

3.3.2双向数据绑定代码

知识回顾: MVC模式核心思想 减少代码的耦合性
M Model:封装的数据
V View 视图层: 数据的展现
C Contro 控制层程序的流转的过程
衍生: 3层代码的结构 Controller—Service–Mapper/Dao
针对于: 后端服务器.

MVVM思想说明:
M: Model 封装的数据. 数据层
V: View 数据的展现视图层
VM: viewModel视图数据的控制层控制数据流转
MVVM设计思想是前端模拟后端为了解耦的一种设计思想.

3.3.3双向数据绑定原理

原理步骤:
1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟DOM对象,第一时间更新Model中的属性.
2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一事件通知真实的DOM对象.至此页面数据发生变化.

3.4事件绑定

语法:

	v-on:click="函数/直接进行计算"

具体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>

		<div id="app">
			<!-- 需求：实现数据自增操作
			 1.语法： v-on:click="函数/直接计算"
			 2.简化语法 v-on: 可以简化为 @
			 -->
			 <h3>数值：{{num}}</h3> <br />
			 <button v-on:click="num++">自增</button>
			 <button @click="num--">自减</button>
			 <button @click="num*=num">自乘</button>
			  <button @click="num=num/5">自除5</button>
			  <!-- <button @click="addNum()">计算</button> -->
			  <button @click="addNum">计算+1</button>
			  <button @click="addNum2">计算-1</button>
		</div>
		
		<script src="../js/vue.js"></script>
		
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					num: 100
				},
				methods: {
					// key 方法名: value  方法体
					addNum: function(){
						this.num++	
					},
					//方法的简化
					addNum2(){
						this.num--
					}
				}
			})
		</script>	
	</body>
</html>

3.5按键触发机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发操作</title>
	</head>
	<body>
		<div id="app">
		<!-- 
		语法:	
		1.v-on:keydown="" 按下触发
		2.v-on:keyup=""   弹起来触发
		3.v-on:keypress="" 小键盘触发
		按键支持:
		.enter  .tab
		.delete (捕获“删除”和“退格”键)
		.esc   .space
		.up .down .left .right
					 
		需求:用户通过输入 按特殊的键位触发函数 
		要求1. 按钮实现加法操作 num = num + num2
		要求2. 用户按回车按钮实现触发 
		要求3. 用户按空格键实现触发 
	-->
	  <h3>用户数据：{{num}}</h3>
	  <!-- <input type="text" v-on:keyup.enter="addNum" v-model="num2" /> -->
	  <input type="text" v-on:keyup.space="addNum" v-model="num2" />
	  <button @click="addNum">计算</button>
		</div>
		
		<script src="../js/vue.js"></script>
		
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					num: 100,
					num2:0
				},
				methods: {
					addNum(){
						//this.num+=parseInt(this.num2)
						//将字符串转化为数值类型
						this.num+=parseInt(this.num2)
					}
				}
			})	
		</script>	
	</body>
</html>

3.6 计算器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
	</head>
	<body>

		<div id="app">
			<h1>总数： {{count}}</h1>
			数值1：<input name="num1" type="text" v-model="num1"/><br />
			数值2：<input name="num2" type="text" v-model="num2" v-on:keyup.enter="addNum"/><br /><br />
			<button @click="addNum">加</button>
			<button @click="reduce">减</button>
			<button @click="ride">乘</button>
			<button @click="except">除</button>
		</div>
		
		<script src="../js/vue.js"></script>
		
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					count: 0,
					num1: 0,
					num2: 0
				},
				methods: {
					addNum(){
						//this.num+=parseInt(this.num2)
						//this.num/=parseInt(this.num2)
						this.count=parseInt(this.num1)+parseInt(this.num2)
					},
					reduce(){
						//this.num+=parseInt(this.num2)
						//this.num/=parseInt(this.num2)
						this.count=parseInt(this.num1)-parseInt(this.num2)
					},
					ride(){
						//this.num+=parseInt(this.num2)
						//this.num/=parseInt(this.num2)
						this.count=parseInt(this.num1)*parseInt(this.num2)
					},
					except(){
						//this.num+=parseInt(this.num2)
						//this.num/=parseInt(this.num2)
						this.count=parseInt(this.num1)/parseInt(this.num2)
					}
				}
			})	
		</script>
	</body>
</html>

3.7 按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>

		<div id="app">
			<!-- 难点: 元素可能需要嵌套,事件可能嵌套
			说明: 如果事件嵌套则必然带来事件的冒泡.
			解决方案: 阻止事件冒泡  .stop属性
			 -->
			数值：{{num}}
			<div @click="num++">
				嵌套结构
			<button @click.stop="num++">计算</button>
			</div>
			<hr />
			<!-- 需求2:
			a标签作用中的href的跳转是默认规则
			要求: 用户点击a标签 不跳转页面,同时触发事件
			解决: 阻止标签的默认行为  @click.prevent
			-->
			<a href="http://baidu.com" @click.prevent="aClick">百度</a>
			<!-- 用途: prevent阻止页面跳转  a标签/form表单 action同步请求 -->
						<!-- 需求2:
							 a标签作用中的href的跳转是默认规则
							 要求: 用户点击a标签 不跳转页面,同时触发事件
							 解决: 阻止标签的默认行为  @click.prevent	
						 -->
		</div>
		
		<script src="../js/vue.js"></script>
		
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					num: 0
				},
				methods: {
						aClick(){
							console.log("点击事件")
						}
					}	
			})	
		</script>
	</body>
</html>

4 属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{width: 100px;height: 100px;background-color: red;}
			.blue{width: 200px;height: 200px;background-color: blue;}
			
		</style>
		
	</head>
	<body>

		<div id="app">
			<!-- a标签的属性绑定
				需求: href中的属性动态赋值
				语法:v-bind:href="vue中的属性"
			 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化写法 -->
			<a :href="url2">京东</a><hr />
				<!-- 2.class类型绑定 
				class中可以定义多个样式.简化程序的调用
				需求: 需要动态的为class赋值
				规则: :class是属性的绑定,绑定之后查找对应的属性
				colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式
			-->			
			<div :class="colorClass">我是灵活的样式</div><hr />
			
			<!-- 3. 属性切换 
				    需求: 通过按钮控制样式是否展现 属性
					语法: :class={class类型的名称: false}
			-->			
			<div :class="{blue:flag}">我是class样式</div>
			<button @click="flag=!flag">切换</button>
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					url2: "http://www.jd.com",
					colorClass:"red",
				flag:true
				}
			})
		</script>
	</body>
</html>

5 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="app">
			<!-- 分支结构
				语法: 
					1.v-if   	 如果为真则展现标签
					2.v-else-if  必须与v-if连用
					3.v-else 	 必须与v-if连用	取反
				案例:
					要求: 按照用户的考试成绩 评级
						  >=90分  优秀
						  >=80分  良好
						  >=70分  中等
						  >=60分  及格
						  否则    不及格
			 -->			
		<h3>评级</h3>
		请输入分数:<input type="number" v-model="score" />
		<div v-if="score>=90">优秀</div>
		<div v-else-if="score>=80">良好</div>
		<div v-else-if="score>=70">中等</div>	
		<div v-else-if="score>=60">及格</div>	
		<div v-else>不及格</div>
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					score:100
				}
			})
		</script>
	</body>
</html>

6 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="app">
			<!-- 
				1.什么时候使用循环
					多次重复的执行同一个操作.
				2.什么数据使用循环
					1.数组
					2.对象
					3.数组套对象(集合)
			 -->
						 
		<!-- 1.遍历数组 将数组中的数据在页面中展现 -->
		<p v-for="item in array" v-text="item"></p>
		
		<!-- 2.获取下标
		 语法:v-for="(遍历的元素,遍历的下标) in array"
		 -->
		<p v-for="(item,index) in array">
			下标:{{index}}~~~~~数据值:{{item}}
		</p>
		
		<!-- 3.遍历对象 -->
		<p v-for="(value,key,index) in user">
			{{index}}~~~{{key}}~~{{value}}
		</p>
		
		<!-- 4.遍历集合 -->
		<div v-for="user in userList ">
			ID:{{user.id}} |
			name:{{user.name}} |
			age:{{user.age}}	
			<p v-for="(value,key,index) in user">
				{{index}}~~~{{key}}~~{{value}}
			</p>
		</div>
		
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP= new Vue({
				el: "#app",
				data: {
					array: ["郭晶晶","大王","熊二"],
					user:{
						id:100,
						name:"tomcat",
						age:18
					},
					userList: [
						{
							id:100,
							name:"tomcat",
							age:18
						},
						{
							id:200,
							name:"mysql",
							age:20
						}
					]
				}
			})
		</script>
	</body>
</html>

7 form表单数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用表单属性</title>
	</head>
	<body>
		<h1>本案例练习 表单提交数据时  数据如何与vue进行数据绑定</h1>
		<div id="app">
			<form id="userForm"action="http://www.baidu.com">
				<div>
					<span>
						姓名:
					</span>
					<span>
						<input type="text" name="name" v-model="name"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!-- 单选框: name属性必须一致 -->
						<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>
						<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				<div>
					<span>爱好:</span>
					<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
					<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
					<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
				</div>
				<div>
					<span>职业</span>
					<!-- 如果需要设置为多选 则添加属性 -->
					<select name="occupation" v-model="occupation" multiple="true">
						<option value="工人">工人</option>
						<option value="教师">教师</option>
						<option value="工程师">工程师</option>
					</select>
				</div>
				<div>
					<span>个人简介</span>
					<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
				</div>
				<div>
					<!-- 阻止默认提交事件 -->
					<input type="submit"  value="提交" v-on:click.prevent="submitForm"/>
				</div>
			</form>
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					name: '输入名称',
					gender: '女',
					//多个数据定义时 应该使用数组
					hobbies:	['吃','喝','玩'],
					occupation: ['工人'],
					userInfo: ''
				},
				methods: {
					submitForm(){
						//数据提交
						console.log("姓名:"+this.name)
						console.log("性别:"+this.gender)
						console.log('爱好:'+this.hobbies)
						console.log('职业:'+this.occupation)
						console.log('用户详情:'+this.userInfo)
						console.log('封装好数据之后,可以使用ajax方式实现数据提交')
					}
				}
			})
		</script>
	</body>
</html>

8 表单修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		语法:
			.number 转化为数值类型
			.trim   去除左右空格
			.lazy   离焦事件才触发
		 
		 -->
		
		<h3>表单修饰符</h3>
		<div id="app">
		<h3>数据展现:{{age}}</h3>
		年龄: <input type="text" v-model.number="age" />
		<button @click="addNum">增加</button>
		<hr />
		
		用户输入的长度:{{name.length}}<br />
		用户名:<input type="text" v-model.trim="name" />
		
		<hr />
		展现数据lazy~~~{{msg}} <br />
		<input type="text" v-model.lazy="msg" />
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					age: 18,
					name: '',
					msg: 0
				},
				methods: {
					addNum(){
						this.age+=1
					}
				}
			})
		</script>
	</body>
</html>

9 计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 需求:
				 将用户的输入内容进行反转
				 API:
					1.字符串转化为数组 拆串 split('')
					2.将数组倒序		.reverse()
					3.将数组转化为字符串 .join('')
					
				 计算属性功能用法:
					1.插值表达式中应该写简单的算数计算,如果复杂应该封装
					2.如果数据操作相同则应该简化过程.
				 总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
			 -->
			<h3>数据展现:
			{{msg.split('').reverse().join('')}}
			</h3>
			<input type="text" v-model="msg" />
			<hr />
			
			<h3>数据展现:
			{{reverse()}}<br /> <!-- 方法多次执行-->
			{{reverse()}}<br />
			{{reverse()}}<br />
			{{reverse()}}<br />
			{{reverseCom}}<br /><!-- 计算属性只执行一次-->
			{{reverseCom}}<br />
			{{reverseCom}}<br />
			{{reverseCom}}<br />
			</h3>
			<input type="text" v-model="msg" />
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					msg:"abc"
				},
				methods: {
					reverse(){
						console.log("方法执行!!!")
						return this.msg.split('').reverse().join('')
					}
				},
				computed:{
					//key:value  必须添加返回值
					reverseCom(){
						console.log("计算属性")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

10 数组操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 数组的方法  java中的叫法push:入栈 pop弹栈
				push() 	在结尾追加元素
				pop()	删除最后一个元素
				shift()	删除第一个元素
				unshift() 在开头追加元素
				splice() 替换数组中的数据 !!!!
				sort()	 数据排序
				reverse() 数组反转
			 -->
		输入框:<input type="text" v-model="msg" /><br />
		<span v-for="value in array">
			{{value}}
		</span><br />
		<button @click="push">push</button>
		<button @click="pop">pop</button>
		<button @click="shift">shift</button>
		<button @click="unshift">unshift</button>
		<button @click="splice">替换</button>
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					array:["a","b","c"],
					msg:""
				},
				methods: {
					push(){
						this.array.push(this.msg)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.msg)
					},
					splice(){
						/**
						 * 参数: 3个参数
						 * 		arg1: 操作数据的起始位置 从0开始
						 * 		arg2: 操作的数量     阿拉伯数字
						 * 		arg3: 替换后的数据.可以有多个(可变参数类型)
						 * 案例:
						 * 		1.将第一个元素,替换为msg
						 * 			this.array.splice(0,1,this.msg)
						 * 		2.将前2个元素替换为msg
						 * 			this.array.splice(0,2,this.msg) 前2个替换
						 * 			this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据
						 * 		3.将最后一个替换为msg
						 * 			let index = this.array.length - 1;
									this.array.splice(index,1,this.msg)
								4.删除第二个元素
						 */
						
						//如果只有2个参数,则表示删除
						this.array.splice(1,1)
					}
				}
			})
		</script>
	</body>
</html>

11 VUE生命周期

周期:
1.初始化周期
1.beforeCreate vue对象实例化之前(刚开始)
2. created
3. beforeMount
4. Mounted 说明VUE对象实例化成功(DIV渲染完成)
2.修改周期
1. beforeUpdate 用户修改数据之前
2. updated 用户修改数据之后
3.销毁周期
1. beforeDestroy VUE对象销毁前
2. destroyed VUE对象销毁后(最后一步)

** 生命周期函数的作用:
如果需要对VUE对象中的数据进行额外的操作.则使用生命周期函数.
目的: 框架的扩展性更好.(实现定制化) **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>

12 组件化思想

12.1 组件化说明
说明: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱不便于管理. 开发维护时成本较高.
组件化思想:
在VUE中可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.
关键字: 组件–页面 (html/css/js)

12.2 组件入门写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化结构</title>

	</head>
	<body>
		<div id="app">
		<!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用. 
			实现策略: 组件化思想
			 2.组件化步骤:
			1.定义组件   
			全局组件: 任意的DIV都可以引入该组件
			局部组件: 只有特定的DIV可以引入组件
			2. 编辑组件的key(注意驼峰规则的写法)    
			 编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}
			html标签: 使用template进行标记
			3.通过key对组件进行引用.
			-->
				 <!-- 1.组件标签的使用 放到app标签之内 才能解析
							2.如果采用驼峰规则命令则中间使用-线连接
					-->			
		<hello-com></hello-com>
		<hello-com></hello-com>
		<hello-com></hello-com>
		</div>
			<!-- 定义组件的模版html 
					 注意事项: 
							1.切记标识在app之外!!!!
							2.要求模版字符串必须有根标签 div		
			-->		
		<template id="helloTem">
			<div>
				<h3>静夜思</h3>
				床前明月光，疑是地上霜。
				举头望明月，低头思故乡。
				引入属性：{{msg}}
			</div>
		</template>
		
		
		
		<!-- 1.引入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入axios.js -->	
		<script src="../js/axios.js"></script>
		
		<script>
			Vue.component("helloCom",{
				data(){
					return{
						msg:"我是一个组件"
					}
				},
				template:"#helloTem"
			})
			
			
				const app = new Vue({
					el: "#app",
					data: {
						
					},
					methods: {
				
					}
				})
		</script>

	</body>
</html>

12.3 局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>

	</head>
	<body>
		<div id="app">
			<hello-com></hello-com>
			<hello-com></hello-com>
			<hello-com></hello-com>
		</div>
		
		<template id="helloTem">
			<div>
				<h1>我是局部组件aaaaaaaa</h1>
				属性取值：{{msg}}
			</div>
		</template>
		
		<!-- 1.引入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入axios.js -->	
		<script src="../js/axios.js"></script>
		
		
		
		
		<script>
			let helloCom={
				//属性定义
				data(){
					return{
						msg:"我是局部组件"
					}
				},
				template:"#helloTem"
			}
			
			
			
		/*说明：只能在某个VUE的对象之内，使用组件标签4*/	
				const app = new Vue({
					el: "#app",
					data: {
						
					},
					methods: {
				
					},
					//定义局部组件
					components:{
						//组件key: 组件体
						//helloCom: helloCom
						//如果key-value相同 则js可以简化为key
						helloCom
					}
				})
		</script>

	</body>
</html>

13 VUE中的路由

13.1 路由介绍
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

13.2 路由步骤
导入路由.JS
指定路由的跳转链接
定义路由的填充位.
** 4. 封装组件信息, 指定路由对象
在VUE对象中声明路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>

		<div id="app">
		<!-- <a href="设定跳转的地址">百度</a> -->
		
			<!-- 二:定义链接
					1.router-link 被编译之后转化为a标签
					2.关键字 to    被编译之后转化为href属性
			 -->
					 
		<router-link to="/user">用户</router-link>
		<router-link to="/dog">狗狗</router-link>
		
		
			<!--三: 指定路由的填充位置 未来展现组件信息 
				填充的位置被解析之后 就是一个DIV
			 -->		
		<router-view></router-view>
		</div>
		
		
		<!-- 定义组件的标签体 -->		
		<template id="userTem">
			<div>
				<h3>用户信息</h3>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h3>狗狗信息</h3>
			</div>
		</template>



		<!-- 1.导入路由JS    先导入vue.js  再导入路由.js 顺序问题 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			
		/**
		 * 第四步: 准备组件,定义路由对象
		 */		
		
		let userCom={
			template:"#userTem"
		}

		let dogCom={
			template:"#dogTem"
		}
		

			/**
			 * 定义路由对象
			 * routes:  路由的多个映射通过该属性进行定义.
			 * redirect: 实现数据的重定向
			 * 在vue路由中只有重定向没有转发
			 */
			
		let vueRouter=new VueRouter({
			routes:[
				{path:"/",redirect:"/user"},
				{path:"/user",component:userCom},
				{path:"/dog",component:dogCom}
			]
		})
		
			const APP= new Vue({
				el: "#app",
				data: {
				},
				//实现路由的挂载
				router: vueRouter
			})
			
		</script>
		
	</body>
</html>

13.3 路由嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由嵌套</title>
	</head>
	<body>

		<div id="app">
			<!-- 1.定义路由 -->
	<router-link to="/user">用户</router-link>
	<router-link to="/dog">狗</router-link>
	<!-- 路由占位符A -->
	<router-view></router-view>
	
		</div>
		
		
<!-- 定义模版标签 -->
<template id="userTem">
	<div>
		<h3>定义用户组件</h3>
	</div>
</template>

<template id="dogTem">
	<div>
		<h3>定义宠物组件</h3>
		<!-- 准备2个组件  -->
		<router-link to="/samo">萨摩耶</router-link>
		<router-link to="/bite">比特犬</router-link>
		<!-- 定义路由占位符B -->
		<router-view></router-view>
	</div>
</template>


<template id="samoTem">
	<div>
		<h3>白色的</h3>
	</div>
</template>

<template id="biteTem">
	<div>
		<h3>一只凶猛的狗</h3>
	</div>
</template>



		<!-- 1.导入路由JS    先导入vue.js  再导入路由.js 顺序问题 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
		let userCom={
			template:"#userTem",
			
		}
		
		let dogCom={
			template:"#dogTem"
		}
		
		let samoCom={
			template:"#samoTem"
		}
		
		let biteCom={
			template:"#biteTem"
		}
		
		/* 路由展现问题说明:
		如果需要进行路由的嵌套 需要采用children 
		子级的路由会在当前的路由占位符中进行展现
		*/
		//定义路由对象		
		
		let router=new VueRouter({
		routes:[
			{path:"/user",component:userCom},
			{path:"/dog",component:dogCom,children:[
				{path:"/samo",component:samoCom},
				{path:"/bite",component:biteCom}
			]}
		]	
		})
		
		
		//需要vue对象 进行挂载
			const APP= new Vue({
				el: "#app",
				data: {
				},
				//vue对象挂载路由
				router: router
			})
			
		</script>
		
	</body>
</html>

鬼道迷踪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE API案例和应用，VUE生命周期，VUE组件化说明，VUE中的路由

1 VUE介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2 VUE组件说明3 VUE基本语法3.1 入门案例<!DOCTYPE html><html> <head>
复制链接

扫一扫