Vue学习总结1

最新推荐文章于 2024-05-14 11:19:40 发布
最新推荐文章于 2024-05-14 11:19:40 发布
阅读量218 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63479468/article/details/125446951
版权

1、Vue核心

1.1Vue简介

1.1.1官网

1.中文官网：https://cn.vuejs.org/

2.英文官网：https://vuejs.org/​​​​​​

1.1.2 介绍与描述

1.动态构建用户界面的渐进式JavaScript框架

2.作者：尤雨溪

1.1.3Vue特点

1.遵循MVVM模式

2.编码简洁，体积小，运行效率高，适合移动/PC端开发

3.它本身只关注UI，也可以引入第三方库开发项目

1.1.4. 与其它 JS 框架的关联

1. 借鉴 Angular 的 模板 和 数据绑定 技术
2. 借鉴 React 的 组件化 和 虚拟 DOM 技术

1.1.5. Vue 周边库

1. vue-cli: vue 脚手架
2. vue-resource
3. axios
4. vue-router: 路由
5. vuex: 状态管理
6. element-ui: 基于 vue 的 UI 组件库(PC 端)
……

1.2初始Vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.root容器里的代码依然符合HTML规范，不过混入了一些特殊的Vue语法

3.root容器里的代码被称为Vue模板

4.Vue实例和容器是一一对应的

5.真实开发中只有一个Vue实例，并会配合组件一起使用

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

*注意区分：js表达式 和 js代码语句

        1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：比如a ,a+b, demo(1), x === y ? 'a' : 'b'

        2.js代码语句：if(){}、for(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象。
					name:'atguigu',
					address:'北京'
				}
			})

		</script>
	</body>
</html>

1.3模板语法

1.3.1插值语法：

1.功能：用于解析标签体内容

2.写法：{{xx}}，xx是js表达式，且可以直接读取到data中的所有属性

1.3.2指令语法（以v-开头）

1.功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）

2.例：v-bind:href="xxx" 或 简写为   :href="xxx",xxx同样要写js表达式，且可以直接读取到data中所有属性

3.说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'百度',
					url:'http://www.baidu.com',
				}
			}
		})
	</script>
</html>

1.4数据绑定

1.4.1 单向绑定（v-bind）

数据只能从data流向页面

1.4.2 双向绑定（v-model）

数据不仅能从data流向页面，还可以从页面流向data

*注意：

        1.双向绑定一般都应用在表单雷元素上（如：input、select等）

        2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'百度'
			}
		})
	</script>
</html>

1.5 MVVM模型

 

1.M：模型（model）：对应data中的数据

2.V：视图（view）：模板

3.VM：视图模型（View Model）：Vue实例对象

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'百度',
				address:'北京',
			}
		})
		console.log(vm)
	</script>
</html>

 1.6数据代理

1.6.1回顾Object.defineProperty方法

            let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}

			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false

				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})

			// console.log(Object.keys(person))

			console.log(person)

1.6.2 什么是数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

            let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})

1.6.3 Vue中的数据代理

1.通过vm对象来代理data对象中属性的操作

2.优点：更加方便操作data中的属性

3.基本原理：通过Object.defineProperty()把data对象中所有的属性添加到vm身上；为每一个添加到vm身上的属性，都指定一个getter/setter；在getter/setter内部去操作data中对应的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'百度',
				address:'北京'
			}
		})
	</script>
</html>

1.7 事件处理

1.7.1 事件的基本使用

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不要用箭头函数，否则this指向的就不是vm了

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象

5.@click="demo" 和 @click="demo($event)" 效果一致，但是后者可以传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

1.7.2 事件修饰符

1.prevent：阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

1.7.3键盘事件

1.Vue中常用的按键名：

回车 => enter        删除 => delete(捕获“删除”和“退格”键)        退出 => esc        空格 => space        换行 => tab(必须配合keydown去使用)        上 => up    下 => down    左 => left    右 =>right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

（2）配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'百度'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

琳琳在哪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基本内容总结学习
07-01
包含路由，组件传值，路由对象，路由守卫等
vue-vue2核心1
飘然渡沧海的博客
08-31 170
vue学习1-初识vue vue介绍 初识vue <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head>
Vue学习心得与总结
2201_75464762的博客
12-28 1038
大二开课，跟老师学+自学，一开始看老师分享的培训课程深入学习，虽然知道学习内容且有计划，但总是学着学着就学不下去（课程冗长没有成就感，知识理论不太好接受，学的蛮难过的），最后，三天打鱼两天晒网。我认识到Vue不仅仅是一种框架，更是一种优秀的工具和理念，在我未来的开发中，我会继续深入学习和实践Vue.js，不断提升自己的能力。通过实际的开发经验，我学会了如何将Vue.js应用于真实的项目中，如何与后端API进行交互，获取和更新数据，以及如何处理用户输入和交互反馈，这些都是学习课程中不能替代的经验。
vue学习总结
m0_63757700的博客
11-20 434
vue2总结
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue学习总结
weixin_44844866的博客
03-14 1406
Vue框架是什么？ Vue源码主要实现了以下几个功能： 1.通过DOM获取html元素：相当于document.querySelector() 2.将想要显示出来的数据传递给对应的html元素 Vue的使用方法： 1.在标签中引入vue.js文件 2.new Vue()实例化，传入el和data 3.辅以vue指令的使用 Vue的MVVM模型 M-model：用于传入的数据，可自定义但多从服务器直接获取。 V-view：在页面上显示出来的结果 VM-view model：是model和view的中间桥梁，即
Vue的学习总结
baijiubaige的博客
11-01 2101
说起前端框架能想到什么？Vue，React，Angular。尤其是Vue是一款被国人所创的框架。 Vue的作者尤雨溪结合React与Angular的各自有点创作出了这款框架。 那么这就是Vue自身的特点：1.简单，能更快的上手。 2.结合Angular指令1与React组件思维。 3.生态丰富，因集合Angular与React，和自我钻研故（插件多）API文档完善 下面是我最近学习Vue的这段时间的一些小总结： Vue中包含了 实例化参数（new Vue）...
Vue 学习总结笔记 (一)
IT_Holmes的博客
01-18 6838
1. Vue 的介绍2. MVC和MVVC的基本流程3. Vue 的使用详解4. Vue 模板语法5. 单向绑定 和 双向绑定6.el和data的两种写法方式7. MVVM的架构图8. 数据代理 Object.defineProperty方法9. 数据代理10. Vue 事件处理
Vue学习总结(全）
梦码城博客中心
02-24 4152
Vue项目的创建安装 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-proj
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 30万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue.js学习总结
code_J的博客
10-31 6400
目录 一、Vue.js的基础介绍 1.什么是Vue.js 2.Vue.js的特点 3.Vue.js的安装 4.创建一个Vue程序 二、基础语法指令 1.v-bind 2.v-if， v-else 3.v-else-if 4.v-for 5.v-on 三、双向绑定、组件 1.什么是双向数据绑定 2.表单双向数据绑定 (1)、单行文本 (2)、多行文本 (3)、单复选框 (4)、多复选框 (5)、单选按钮 (6)、下拉框 3.组件 (1)、什么是组件 (2)、组件基
vue基础学习总结经验
04-26
vue基础学习总结经验，让你可以更轻松的了解并快速的掌握vue入门
vue源码学习总结 深入响应式原理
01-08
Vue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props 初始化注入 initState(vm) // 初始化 data/props/method/...
VUE3知识图谱学习总结
10-24
VUE3知识图谱学习总结
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 463
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
前端面试题日常练-day05 【面试题】
qq_44640575的博客
05-11 386
解释：在CSS中，使用`.`作为类选择器，可以选择所有具有指定class名称的元素。例如，如果想选择所有class为"my-class"的元素，可以使用`.my-class`选择器来实现。这样的选择器可以为元素添加特定的样式或者在JavaScript中进行处理。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
最新发布
s_sos0的博客
05-14 364
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
小满zs 学习vue3
07-17
非常好，Vue 3 是一个非常流行的 JavaScript 框架，它具有简单易学、高效、灵活等特点。...在学习过程中，你可以参考 Vue 3 的官方文档和教程，也可以参考一些优秀的开源项目，并且不断进行实践和总结。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值