Vue学习实践笔记（五）

最新推荐文章于 2025-02-17 09:49:04 发布

原创最新推荐文章于 2025-02-17 09:49:04 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨Vue.js中的关键概念，包括父子组件传值、路由应用、计算属性与监听、Promise异步处理及组件渲染。通过具体示例，解析Vue在实际项目中的高效运用。

Demo1：复习——父子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<com1 :parentmsg="msg" @func="getMsgFormSon"></com1>
	</div>
	<template id="tmpl">
		<div>
			<p>子组件---{{ parentmsg }}</p>
			<button @click="sendMsg">向父组件传值</button>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		var com1 = {
			template: '#tmpl',
			props: ['parentmsg'],
			data() {
				return {
					msg: '子组件的数据'
				}
			},
			methods: {
				sendMsg(){
					this.$emit('func', this.msg)
					console.log(this.msg)
				}
			}
		}
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '父组件的数据',
				msgFormSon: ''
			},
			methods: {
				getMsgFormSon(data){
					this.msgFormSon = data
					console.log(data)
				}
			},
			components: {
				com1
			}
		})
	</script>
</body>
</html>

Demo2：复习——路由基本用法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/vue-router.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<router-link to="/login">登录</router-link>		
		<router-link to="/register">注册</router-link>		
		<router-view></router-view>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var login = {
			template: '<p>登录部分</p>'
		}
		var register = {
			template: '<p>注册部分</p>'
		}
		var router = new VueRouter({
			routes: [ 
				{ path: '/', redirect: '/login' },
				{ path: '/login', component: login },
				{ path: '/register', component: register }
			],
			linkActiveClass: 'myactive'
		})
		var vm = new Vue({
			el: '#app',
			router
		})
	</script>
</body>
</html>

Demo3：名称案例——利用对keyup事件的监听实现姓名拼接、使用watch监听文本框数据的改变实现姓名拼接、使用computed计算属性实现姓名拼接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/vue-router.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<p>监听keyup实现姓名拼接</p>
		<input placeholder="姓" type="text" v-model="firstname1" @keyup="getFullname1"> + 
		<input placeholder="名" type="text" v-model="lastname1" @keyup="getFullname1"> = 
		<input placeholder="姓名" type="text" v-model="fullname1">
		<br><br><hr>
		<p>使用watch监听文本框数据的变化实现姓名拼接</p>
		<input placeholder="姓" type="text" v-model="firstname2"> + 
		<input placeholder="名" type="text" v-model="lastname2"> = 
		<input placeholder="姓名" type="text" v-model="fullname2">
		<br><br><hr>
		<p>使用computed计算属性实现姓名拼接</p>
		<input placeholder="姓" type="text" v-model="firstname3"> + 
		<input placeholder="名" type="text" v-model="lastname3"> = 
		<input placeholder="姓名" type="text" v-model="fullname3">
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				firstname1: '',
				lastname1: '',
				fullname1: '',
				firstname2: '',
				lastname2: '',
				fullname2: '',
				firstname3: '',
				lastname3: ''
				// 此处不用也不能定义fullname3，会与computed中的冲突
			},
			methods: {
				// 监听数据变化，进行业务逻辑操作，可以看做watch和computed的结合体
				// 适合写方法调用
				getFullname1() {
					this.fullname1 = this.firstname1 + this.lastname1
				}
			},
			watch: { // 可以监视data中数据的变化，然后触发在这里面定义的函数
				// 更侧重业务逻辑的处理
				// 适合监听虚拟的、非DOM的值，比如路由
				'firstname2': function(newVal, oldVal) {
					this.fullname2 = newVal + this.lastname2
				},
				'lastname2': function(newVal, oldVal) {
					this.fullname2 = this.firstname2 + newVal
				}
			},
			computed: { // computed中定义的属性称为“计算属性”，其本质是一个方法，只不过使用时直接把方法名当做属性，并不会作为方法被调用
				// 计算属性的求值结果，会被缓存起来，方便下次直接使用
				// 只适合简单求值
				// 适合经过一系列复杂运算/操作后返回一个结果的场景
				'fullname3': function() {
					return this.firstname3 + this.lastname3
				}
			}
		})
	</script>
</body>
</html>

Demo4——使用watch监听路由地址的改变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/vue-router.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<router-link to="/login">登录</router-link>		
		<router-link to="/register">注册</router-link>		
		<router-view></router-view>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var login = {
			template: '<p>登录部分</p>'
		}
		var register = {
			template: '<p>注册部分</p>'
		}
		var router = new VueRouter({
			routes: [ 
				{ path: '/', redirect: '/login' },
				{ path: '/login', component: login },
				{ path: '/register', component: register }
			],
			linkActiveClass: 'myactive'
		})
		var vm = new Vue({
			el: '#app',
			router,
			watch: {
				'$route.path': function(newVal, oldVal) {
					console.log(newVal + '---' + oldVal)
				}
			}
		})
	</script>
</body>
</html>

Demo5——使用vue实例的render方法渲染组件


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="./js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
	</div>
	<script type="text/javascript" charset="UTF-8">
	var login = {
		template: '<p>这是登录组件</p>'
	}
	var vm = new Vue({
		el: '#app',
		data: {
		},
		methods: {
		},
		render: function(createElements) {
		// createElements是一个方法，调用它能够将指定的组件模板，渲染为html结构
			return createElements(login)
			// 这里return的结果会替换页面中el指定的那个容器
		}
	});
</script>
</body>
</html>

Demo6——利用es6的Promise解决回调地狱

/*

	1. Promise是一个构造函数，可以new Promise()得到一个Promise的实例
	2. 在Promise上，有两个函数，分别叫做resolve（成功之后的回调函数）和reject（失败之后的回调函数）
	3. 在Promise的构造函数的Prototype属性上，有一个.then()方法，只要是Promise构造函数创建的实例，都可以访问到.then()方法
	4. Promise表示一个异步操作，每当我们new一个Promise的实例，这个实例就表示一个具体的异步操作
	5. 既然Promise创建的实例是一个异步操作，那这个异步操作的结果只能有两种状态：
		状态1：异步执行成功了，需要在内部调用成功的回调函数resolve把结果返回给调用者
		状态2：异步执行失败了，需要在内部调用失败的回调函数reject把结果返回给调用者
		由于Promise实例是一个异步操作，所以无法使用return把操作的结果返回给调用者，需要使用回调函数，把成功或失败的结果返回给调用者
	6.我们可以在Promise实例上调用.then()方法，预先为这个Promise异步操作指定成功和失败的回调函数
	7.Promise实例中的构造函数一经创建就会执行，如果想按需调用，需要用函数包裹起来
	8.通过.then指定回调函数的时候，成功的回调函数必须传，但失败的回调可以不传
	9.通过.catch捕获异常，当任意一个.then异常时都会中止，转而去执行.catch
	10.如果希望一个.then发生异常后下一个.then继续执行，应该为.then指定失败时的回调
	11.如果希望一个.then发生异常后不继续执行其他.then，不要为.then指定失败时的回调，而使用.catch捕获异常
	12.如果使用.catch，则所有的.then都不能有失败的回调
*/

const fs = require('fs')

function getFileByPath(fpath) {
	vue promise = new Promise(function(resolve, reject) {
		fs.readFile(fpath, 'utf-8', (err, dataStr) => {
			if (err) return reject(err)
			resolve(dataStr)
		})
	})
	return promise
}
/*
	下面这种情况就叫做“回调地狱”
	getFileByPath('./1.txt')
		.then(function(data) {
			console.log(data)

			getFileByPath('./2.txt')
				.then(function(data) {
					console.log(data)

					getFileByPath('./3.txt')
						.then(function(data) {
							console.log(data)
						}, function(err) {
							console.log(err.message)
						})

				}, function(err) {
					console.log(err.message)
				})

		}, function(err) {
			console.log(err.message)
		})
*/
// 正确用法
getFileByPath('./1.txt')
	.then(function(data) {
		console.log(data)
		return getFileByPath('./2.txt')
	}, function(err) {
		console.log(err.message)
		return getFileByPath('./2.txt')
	})
	.then(function(data) {
		console.log(data)
		return getFileByPath('./3.txt')
	}, function(err) {
		console.log(err.messtage)
		return getFileByPath('./3.txt')
	})
	.then(function(data) {
		console.log(data)
	}, function(err) {
		console.log(err.message)
	})

getFileByPath('./1.txt')
	.then(function(data) {
		console.log(data)
		return getFileByPath('./2.txt')
	}
	.then(function(data) {
		console.log(data)
		return getFileByPath('./3.txt')
	}
	.then(function(data) {
		console.log(data)
	}
	.catch(function(err) {
		console.log(err.message)
	})