Vue学习实践笔记（四）

最新推荐文章于 2023-09-21 13:57:57 发布
最新推荐文章于 2023-09-21 13:57:57 发布
阅读量205 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FED_AF/article/details/105928701
版权
  • 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">
		</com1>
	</div>
	<template id="tmpl">
		<div>
			<p>子组件----{{ parentmsg }}</p>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '父组件的数据'
			},
			components: {
				// 子组件默认无法访问到父组件中的data数据和methods方法
				com1: {
					template: '#tmpl',
					props: ['parentmsg'] // 父组件传过来的parentmsg属性，要先在props数组中定义一下
				}
			}
		})
	</script>
</body>
</html>
  • Demo2：发表评论——组件传值、传方法和本地缓存localStorage的用法
<!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 @func="loadComments"></com1>
		<ul>
			<li v-for="item in list" :key="item.id">
				<span>评论人：{{ item.user }}</span>
				{{ item.content }}
			</li>
		</ul>
	</div>
	<template id="tmpl">
		<div>
			<div>
				<label>评论人：</label>
				<input type="text" v-model="user">
			</div>
			<div>
				<label>评论内容：</label>
				<textarea v-model="content"></textarea>
			</div>
			<div><button @click="postComment">发表评论</button></div>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				list: [
					{ id: Date.now(), user: '李白', content: '天生我才必有用' },
					{ id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
					{ id: Date.now(), user: '小马', content: '嘶嘶嘶' }
				]
			},
			methods: {
				loadComments() { // 从本地的localStorage中加载评论列表
					var list = JSON.parse(localStorage.getItem('cmts') || '[]')
					this.list = list
				}
			},
			components: {
				'com1': {
					template: '#tmpl'
					, data: function(){
						return { 
							user: '',
							content: ''
						}
					}
					, methods: { 
						postComment() {
							var comment = { id: Date.now(), user: this.user, content: this.content }
							// 从localStorage中获取所有的评论
							var list = JSON.parse(localStorage.getItem('cmts') || '[]')
							list.unshift(comment)
							// 重新保存最新的评论数据
							localStorage.setItem('cmts', JSON.stringify(list))
							this.user = this.content = ''
							this.$emit('func')
						}
					}
				}
			},
			created() {
				this.loadComments()
			}
		})
	</script>
</body>
</html>
  • Demo3——使用ref获取DOM元素和组件引用
<!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">
		<p ref="myp">使用ref获取DOM元素</p>
		<button @click="getElement">调用组件方法</button>
		<com1 ref="mycom1"></com1>
	</div>
	<template id="tmpl">
		<div>
			<p>使用ref获取DOM组件</p>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			methods: {
				getElement() {
					this.$refs.mycom1.show()
				}
			},
			components: {
				'com1': {
					template: '#tmpl'
					, data: function(){
						return { 
							msg: '子组件'
						}
					}
					, methods: { 
						show() {
							console.log('调用了子组件的方法')
						}
					}
				}
			}
		})
	</script>
</body>
</html>
  • Demo4：路由——路由对象的定义和用法、router-view标签和router-link标签的用法、redirect重定向的使用、设置选中路由高亮、切换动画
<!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>
	<style>
	.router-link-active, .myactive{
		color: #f00;
		font-weight: 800;
		font-style: italic;
		font-size: 80px;
		text-decoration: underline;
		background-color: #0f0;
	}
	.v-enter, .v-leave-to{
		opacity: 0;
		transform: translateX(140px);
	}
	.v-enter-active, .v-leave-active{
		transition: all 0.5s ease;
	}
	</style>
</head>
<body>
	<div id="app">
		<!-- router-link默认渲染为a标签 -->
		<router-link to="/login">登录</router-link>
		<router-link to="/register">注册</router-link>
		<!-- a标签不会应用路由样式，所以推荐用router-link代替a -->
		<a href="/#/login">登录</a>
		<a href="/#/register">注册</a>
		<!-- 路由规则匹配到的组件会展示到router-view中去 -->
		<transition>
			<router-view></router-view>
		</transition>
	</div>
	<script type="text/javascript" charset="UTF-8">
	var login = {
		template: '<P>登录</P>'
	}
	var register = {
		template: '<P>注册</P>'
	}
	// 可以将配置对象作为参数传递给vue路由对象的构造函数
	var routerObj = new VueRouter({
		// routes: {}  //  表示一条路由匹配规则
		routes: [ 
			// 表示一组路由匹配规则，每条规则都是一个对象，包含两个必须的属性
			// path属性表示所监听的路由链接地址
			// component属性表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
			// component的值必须是组件的模板对象，不能是组件的引用名称
			// redirect属性表示监听到path时重定向到指定的url，值是字符串类型
			{ path: '/', redirect: '/login' },
			{ path: '/login', component: login },
			{ path: '/register', component: register }
		],
		linkActiveClass: 'myactive'
	})
		var vm = new Vue({
			el: '#app',
			router: routerObj // 将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
		})
	</script>
</body>
</html>
  • Demo5：路由——两种传参方式
<!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?id=10&name=zs">登录</router-link>
		<router-link to="/register/12/zx">注册</router-link>
		<router-view></router-view>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var login = {
			template: '<P>第一种传参方式 --- {{ $route.query.id }} --- {{ $route.query.name }}</P>',
			data() {
				return {
					msg: '123'
				}
			}
		}
		var register = {
			template: '<P>第二种传参方式 --- {{ $route.params.id }} --- {{ $route.params.name }}</P>'
		}
		var routerObj = new VueRouter({
			routes: [ 
			{ path: '/', redirect: '/login' },
			{ path: '/login', component: login },
			{ path: '/register/:id/:name', component: register }
			]
		})
		var vm = new Vue({
			el: '#app',
			router: routerObj
		})
	</script>
</body>
</html>
  • Demo6：路由——路由的嵌套
<!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 tag="button" to="/account">外层组件按钮 </router-link>
		<router-view></router-view>
	</div>
	<template id="tmpl">
		<div>
			<P>外层组件内容</P>
			<router-link tag="button" to="/account/login">内层组件按钮</router-link>
			<router-view></router-view>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		var account = {
			template: '#tmpl'
		}
		var login = {
			template: '<p>内层组件内容</p>'
		}
		var router = new VueRouter({
			routes: [{ 
				path: '/account',
				component: account,
				// 子路由的path前面不要带/
				children: [{ path: 'login', component: login }]
			}]
		})
		var vm = new Vue({
			el: '#app',
			// 下面是router: router的简写
			router
		})
	</script>
</body>
</html>
  • Demo7——命名视图实现经典布局
<!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>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.header {
			background-color: orange;
			height: 80px;
		}
		.container {
			display: flex;
			height: 400px;
		}
		.left {
			background-color: lightgreen;
			width: px;
			flex: 2;
		}
		.main {
			background-color: lightpink;
			width: px;
			flex: 8;
		}
	</style>
</head>
<body>
	<div id="app">
		<router-view></router-view>
		<div class="container">
			<router-view name="left"></router-view>
			<router-view name="main"></router-view>
		</div>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var header = {
			template: '<p class="header">顶部</p>'
		}
		var leftBox = {
			template: '<p class="left">侧边栏</p>'
		}
		var mainBox = {
			template: '<p class="main">主体区</p>'
		}
		var router = new VueRouter({
			routes: [
				{ 
					path: '/', components: {
						default: header,
						left: leftBox,
						main: mainBox
					}
				}
			]
		})
		var vm = new Vue({
			el: '#app',
			router
		})
	</script>
</body>
</html>

 

FED_AF
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
vue中 localStorage的使用方法（详解）
JavaAlliance
08-09 4584
vue中实现本地储存的方法：localStorage，在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 (1).储存数据（ 解释：比如java后端通过r......
localStorage.setItem()使用
热门推荐
weixin_41997724的博客
11-27 13万+
什么是localStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 localStorage的优势 1、localStorage拓展...
localStorage.getItem
weixin_45677987的博客
03-09 3万+
1:localStorage.getItem WEB应用的快速发展，是的本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。 2: localStorage的方法： localStorage.getItem(key):获取指定key本地存...
组件通信实现vue+localStorage制作todolist
sinat_41843998的博客
10-25 124
今天找到一篇使用组件通信的方法制作的todolist，换了一种思路，有练习了组件通信，先把第一步记录下来 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,
Vue 学习总结笔记 (七)
IT_Holmes的博客
03-09 1703
1. 浏览器本地存储 1.1 浏览器本地存储 1.2 localStorage存储 1.3 sessionStorage 1.4 总结 2. 浏览器本地存储的 todoLists案例 3. Vue 组件自定义事件 3.1 vm.\$on 和 vm.\$emit的使用 3.2 两种组件自定义事件绑定的方式(实现子组件向父组件传值) 3.3 组件自定义事件 解绑 3.4 组件自定义事件的几个误区 4. 全局事件总线 5. 对于todoList的全局事件总线修改
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记 学习笔记
05-07
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、...以上是Vue.js学习笔记的主要内容，涵盖了Vue中的关键概念，帮助你更好地理解和掌握Vue的开发实践。
Vue学习笔记
04-29
通过学习和实践这些知识点，并按照笔记中的案例动手操作，不仅能够掌握Vue的基础用法，也能逐步熟悉更高级的应用场景，为实际的开发工作打下坚实基础。在阅读和理解笔记时，建议结合官方文档和在线示例加深理解，...
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它设计的目标是让开发者能够轻松地构建用户界面，尤其是在Web应用开发中。Vue的核心特性包括声明式渲染、组件...对于初学者来说，逐步理解并实践这些概念是掌握Vue的关键步骤。
vue 界面刷新数据被清除 localStorage的使用详解
12-03
localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法： 1、新建一个store.js文件 localStorage只能存储字符串，非字符串的数据在存储之前会被转换成字符串。在存储一些复杂数据类型时可能有些麻烦,下面方法是先使
vue.js todolist实现代码
11-26
案例知识点： 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); } } App.vue代码 <template>
Vue中如何进行本地存储（LocalStorage）
最新发布
stormjun的博客
09-21 7585
本地存储（LocalStorage）是浏览器提供的一种机制，允许Web应用程序在用户的浏览器中存储数据。这些数据以键值对（key-value pairs）的形式存储，并且可以在浏览器会话之间保持持久性。本地存储是基于域名的，这意味着数据将与特定域名相关联。存储在LocalStorage中的数据在浏览器关闭后仍然保留，直到被明确删除。浏览器为每个域名提供了一定的LocalStorage存储容量，通常为5-10MB。超出容量限制时，需要谨慎管理存储数据。
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
游坦之的博客
04-30 1万+
存储的四个方法 1、存储 localStorage.setItem(key, value); key和value都必须是字符串。 例如：存储数据 【效果图】 【问】如果要传一个对象该怎么办？ 如果直接将对象作为value放进去，会出现这样的现象 用JSON（JSON.stringify() ）转换一下，将对象先转化成字符串，如下 然后就可以将对象，存进去了 2、读取localStorage.setItem(key） 例如：读取存储的数据 【效果图】...
关于使用vuex与localStorage监听刷新的问题，出现全局刷新导致vuex中的值出错
weixin_44022194的博客
12-24 349
关于使用vuex与localStorage监听刷新的问题 window.addEventListener("beforeunload", () => { // 将刷新前的数据放入localStorage中以备刷新后使用 localStorage.setItem("courseCodes", JSON.stringify(this.courseCodes)); ...
vue中localStorage和sessionStroage.getitem(key)的使用
weixin_46481137的博客
01-05 3190
客户端存储数据的两个对象为：1：sessionStorage 2:localStorage sessionStroage.setitem(key,value)保存数据； sessionStroage.getitem(key)获取数据； sessionStroage.remove(key);删除单个数据； sessionStroage.clear();清除所有数据； sessionStroage.keye(index)得到某个索引的key； LocalStroage和sessionStroage保持数据类.
vue使用localStorage.setItem和getItem
sdhuangzheng的博客
08-25 1495
这是原文章：https://www.cnblogs.com/houzheng/p/9067110.html 我是参考这个做出来的，我主要是说，这些代码写在那些部分。 我只是以字符串为例子： 在这里插入图片描述 注意看24，25行，这是件字符串保存起来，还有要注意的是，这两行代码的位置在哪里。 使用的时候： 我是写在方法里面的，只要是注意一下位置，几乎没有什么错误。 ...
vue sessionStorage的setItem和getItem使用
m0_58565372的博客
03-27 1199
1.存储数据：sessionStorage.setItem('名字','要存储的值')2.获取数据：sessionStorage.getItem('名字')
黑马程序员vue学习笔记
09-06
抱歉，我是一个与ChatGPT类似的AI助手，无法提供具体的学习笔记。不过，我可以给你一些建议来学习Vue.js。 1. 官方文档：Vue.js官方文档是最权威的学习资源。你可以从基础概念到高级用法，逐步深入地学习Vue.js。 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值