2021-08-19

最新推荐文章于 2021-08-21 21:42:53 发布

Like-spring

最新推荐文章于 2021-08-21 21:42:53 发布

阅读量83

点赞数

分类专栏：第三阶段

本文链接：https://blog.csdn.net/qq_52585504/article/details/119799237

版权

第三阶段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. VUE

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

1.2 vue优点

体积小，压缩后的文件只有33k
运行效率更高
采用虚拟机DOM，一种可以预先通过JavaScript对数据进行计算，把最终的DOM操作计算处理并优化的技术，由于DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM
双向数据绑定，让开发者不再去操作DOM，将更多的经历投入到业务中去
生态丰富，市面上有大量的开源项目基于vue进行开发，成熟稳定

1.3vue案例

1.3.1 入门案例

ES6x新规范

1.定义变量 var 弊端：没有作用域的概念，如果变量名称重复则可能引发问题
2.定义变量 let 有作用域的概念
3.常量 const 全局唯一不可更改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 1.语法规则：Vue必须定义根目录标签 -->
		<div id="app">
			<!-- 利用插值表达式，获取数据 -->
			{{hello}}
		</div>
		<!-- 2.引入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 3.编辑vue  js -->
		<!--  type="text/html"可以不加 -->
		<script> 
		const app = new Vue({
			//标识VUE的对象的作用范围
			el: "#app",
			data: {
				hello: "helloVue"
			}
		})
		</script>
	</body>
</html>

1.3.2 v-clock属性

介绍:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<title>入门案例</title>
		<style>
		/* 为属性定义样式 */
		[v-clock]{
			/* 定义样式不显示 */
			display: none;}
		</style>
	</head>
	<body>
		<!-- v-clock说明：
		 当程序编译结束时，v-clock失去效果
		 当程序编译没有结束时，v-clock的隐藏效果有效-->
		<div id="app" v-cloak>
			{{hello}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {hello: "helloVue"}
			})
		</script>

1.3.3 数据绑定指令

**v-texr指令：**作用：直接展现解析数据
**v-html指令：**解析HTML的数据
v-pre 指令：
**用法:**跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-once 指令
用法:
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<title>入门案例</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 插值表达式 -->
			<h3>{{hello}}</h3>
			<!--  2.v-text数据展示 vue的指令
					v-text当数据没有解析成功时，页面没有任何数据
					是v-clock是升级版-->
			<h3 v-text="hello"> </h3>
			<!-- 3.v-html -->
			<div v-html="html"></div>
			<!-- 4.v-pre -->
			<div v-pre>{{需要展示的数据}}</div>
			<div v-text="one" v-once></div>
			<h1>双向数据绑定</h1>
			<div style="border: aliceblue;">
				用户名：<input type="text" name="name" v-model="name"
				/>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
		const app = new Vue({
			el: "#app",
			data: {
				hello: "helloVue",
				html:"<h1>好好学习天天向上</h1>",
				one: "java学习",
				name: "admin"
			}
		})
		</script>

v-model 指令
用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.
在这里插入图片描述

1.3.4 MVVM思想

（1）字母解释
1.M model 数据
2.V view 视图
3.VM (view-model) 数据和视图的控制
（2）当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定绑定到页面中

1.4 事件绑定

1.4.1 v-on

 	<!-- v-on可以用@代替 -->
	<button v-on:click="number++">自增</button>
	<!-- 简化操作 -->
	<button @click="number++">自增</button>
	<button @click="addNum">方法自增</button>
			<button @click="addNum2">方法自增2</button>
			<button @click="addNum3">方法自增3</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					number: 1
				},
				methods: {
					addNum: function(){this.number++},
					addNum2(){//this.num=this.num+2 
						this.number+=2},
					addNum3(){this.number+=3}
				}
			})
		</script>

1.4.2 事件修饰符

1.阻止冒泡 stop

<button @click.stop="addNum3">方法自增3</button>

2.组织默认行为

<div>
				<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
			</div>

1.4.3 按键修饰符

<div>
	<input name="username" type="text" @keyup.enter="handler" value="回车触发"/>
	<input name="username" type="text" @keyup.space="handler" value="空格触发"/>
	<input name="username" type="text" @keyup.delete="handler" value="删除键触发"/>
	<input name="username" type="text" @keyup.left="handler" value="<-触发"/>
	<input name="username" type="text" @keyup.right="handler" value="->键触发"/>
</div>

1.4.4 综合案例练习（计算器练习）

<div  id="app" @keyup.enter="handler">
			数据A：<input  type="text" v-model="num1" /><br />
			数据B：<input  type="text" v-model="num2" @keyup.enter="addNum"/><br />
			总数：<span v-text="count"></span>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {num1: '',  num2: '',  count: ''	},
				methods: {addNum(){this.count=parseInt(this.num1)+parseInt(this.num2)   }   }  })
		</script>

1.5属性绑定

v-bind属性绑定
v-bind class样式绑定
v-bind Style样式绑定

<title>样式绑定</title>
		<!-- 定义样式 -->
		<h3>样式绑定</h3>
		<style>
			.red{font-size: 20;
				color: bisque;
				background-color: cornflowerblue;}
		</style>
	</head>
	<body>
		<div  id="app">
			<div class="red">aaaaa</div>
			<div :class="{red:flag}">bbbbb</div>
			<button @click="flag=!flag">切换</button>
			<!-- 入门案例 -->
			<a href="http://www.baidu.com">百度</a>
			<!-- 属性绑定语法 -->
			<a v-bind:href="url"><h3>百度vue1</h3></a>
			<!-- 简化操作 -->
			<a :href="url2"><h3>淘宝vue2</h3></a>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: { url:"http://www.baidu.com",
						url2:"http://www.taobao.com",
						flag: true},
				methods: {}     })
		</script>