Vue.js学习笔记，2021.01.26

最新推荐文章于 2024-05-14 10:48:06 发布

QzjAuroraJun

最新推荐文章于 2024-05-14 10:48:06 发布

阅读量173

点赞数

分类专栏： Vue.js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/maybyyoulove/article/details/113207451

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.使用vue实现发微博效果(发布和删除效果)


```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入需要发布内容" v-model="val"/>{{val}}
			<br><br>
			
			<button type="button" v-on:click="send()">立即发布</button>
			<div>
				<ul>
					<li v-for="(item,index) in list">{{item}}<span style="margin-left:10px;cursor: pointer;" v-on:click="del(index)">X</span></li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				val:'',
				list:['今天重庆天气阵雨','今天又要保障更新...'],
			},
			methods:{
				send(){//发布,unshift数组前插入数据
					this.list.unshift(this.val)
					
				},
				del(a){//删除
					this.list.splice(a,1)
				}
			}
		})
	</script>
</html>

2.spa单页面开发，vue实现spa的优势
1、什么是spa?

单页Web应用(single-page application，简称为SPA)。

是一种特殊的Web应用。

它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript和CSS。

一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。

取而代之的是利用JavaScript动态的变换HTML的内容，从而实现UI与用户的交互。

由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。

2、spa的优点

1.良好的交互体验:因为是局部渲染，每个部分是单独的模块。避免了不必要的跳转和重复渲染
2.前后端分离，提高开发效率，架构清晰。
3.减轻服务器的压力:服务器只需要提供数据，不需要管前端展示逻辑和页面合成，提高了性能。
4.共用一套后端程序代码。

3、spa的缺点

1.不利于SEO(搜索引擎)优化

2.可能出现首屏加载时间过长的问题。

1). (为实现单页面。需要在加载页面时将js、css统一加载，部分页面按需加载）
2). 因首屏加载时间过长导致白屏，如何解决？可以利用骨架屏效果

3.页面复杂度提高。复杂逻辑程度成倍增加。

3.用vue的动态组件，实现移动端仿京东分类导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				font-weight: 700;
				color: #00883D;
				border: 1px solid #00883D;
				cursor: pointer;
			}
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
        <div id="app">
			<ul>
				<li v-cloak v-for="(item, index) in nav" :class="{active:index == num}" @click="change(index)">{{item}}</li>
			</ul>
			<div>
				<div v-cloak v-for="(item, index) in content"  v-show="num == index">{{item}}</div>
			</div>
        </div>
	</body>
	<script src="../js/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				num: 0,
                name: 'hello Vue',
				nav: ['新闻','娱乐','音乐','社会'],
				content:['新闻Content','娱乐Content','音乐Content','社会Content']
			},
			methods:{
				change(index) {
					this.num = index;
				}
			}
		})
	</script>
</html>

浏览器效果演示：
在这里插入图片描述

QzjAuroraJun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记，2021.01.26

使用vue实现发微博效果(发布和删除效果)```html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <body> <div id="app"> <input type="text" placeholder="请输入需要发布内容" v-model="val"/>{{val}}
复制链接

扫一扫