Vue.js学习笔记,2021.01.26

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的动态组件,实现移动端仿京东分类导航


<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>

浏览器效果演示:
Vue.js学习笔记,2021.01.26_第1张图片
Vue.js学习笔记,2021.01.26_第2张图片

你可能感兴趣的:(Vue.js,javascript,vue.js)