VUE基础知识一(基本的知识回顾)

最新推荐文章于 2023-09-22 00:22:34 发布
最新推荐文章于 2023-09-22 00:22:34 发布
阅读量244 收藏 1
点赞数
分类专栏： JAVAScript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27217017/article/details/100809407
版权

VUE 基础知识篇一

HELLO WORLD VUE：

参看链接vue

vue -cli 构建vue 工程，对于开发版本和生产版本不同在于，开发版本中包中文件没有经过压缩，方便进行调试和查看对应的脚本信息

1. npm install -g @vue/cli
2. vue create my-project-name

let : 定义变量，const 定义常量一旦初始化，无法重新定义

  1.对于原始jS中与Vue 区别：传统方式采用命令式编程，vue采用生命式编程（实例管理，只需要声明的变量）
   1). 创建div 元素，设置id 属性
    2). 定义一个变量叫message
    3). 将message 变量放到前面div 元素中显示
    声明方式将数据和界面进行分类，只需要嵌套一些东西，vue中变量数据放生变化，界面数据会发生变化, vue 的响应式非常强大

vue 计数器：

思路：定义一个变量，通过按钮让变量值发生变化，增加或者减少。v-on:click 指令进行监听

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   </head>
   <body>
   	<div id = "app">
   		
   		<h2>当前技术: {{counter}}</h2>
   		<!--通过添加函数-->
   		<button v-on:click= "add">+</button>
   		<button v-on:click="subtraction">-</button>
   	</div>
   	
   	<script src ="../js/vue.js"></script>
   	<script>
   		// let/const 在ES6 中 
   		const app = new Vue({
   			el: "#app", // 用于挂载需要管理元素
   			data: {
   				counter: 0
   			},
   			methods:{
   				add: function(){
   					//不能直接写counter 认为是全局变量,app/this,
   					// 里面做了一层代理
   					this.counter ++;
   				},
   				subtraction: function(){
   					this.counter --;
   				}
   			}
   		})
   	</script>
   </body>
</html>

Vue 中mvvm

mvvm: model viewModel view：
model view model 模型

  • 1.viewmodel 将 model中数据直接绑定view中，支持即刻响应模式，一旦model中数据发生修改，DOM中值也会进行修改。
  • 2.view 中如果发生一些事件或者监控操作，通过路径将数据传输给model , 在这里插入图片描述
    1. vue基础的类型, 组件中必须是函数在这里插入图片描述
      开发中什么叫方法什么是函数：本质区别：定义在类中叫方法与某个实例相关联的，函数独立的不在某个类中

vue的生命周期：

当vue中执行某个阶段中，vue源代码中进行回调，某个时期执行这个回调周期，里面通过callHook 进行回调，在运行到某个阶段，进行钩子设置，vue 实例，同样也是在组件中，组件会被销毁，mounted ， update等生命周期
在这里插入图片描述

vue mustache 语法

形成简单的代码规范，缩进2个空格，更加规范
mustache 也就是{{}}，mustache 可以包含简单的表达式

v-once

v-once: 只会保存一次值，之后不会进行及时响应变化
v-once: 无需添加命令:

<div id = "app">
			<h2 v-once>{{message}}</h2>			
		</div>

v-html

解决服务器返回的格式是标签方式，采用v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h2 v-html = "url"></h2>			
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					url: '<a href = "www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

V-text

v-test 使用并不是很灵活，没有mustache 效果，v-test 会把后面拼接字符串文本覆盖掉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h2>{{message}}, 我是谁</h2>
			<h2 v-text = "message">, 我是谁</h2>
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					url: '<a href = "www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

v-pre

用来跳过元素和子元素的编译，将里面内容不进行编译，直接显示出来,不需要进行解析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-pre>{{message}}</h2>
		</div>

		<script src="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					url: '<a href = "www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

v-cloak

解决浏览器显示出没有编译代码，cloak 斗篷用来进行遮挡，解决浏览器在运行过程中出现卡顿过程。
在vue 解析之前，div 中有一个属性v-cloak,在vue 解析后，div 没有一个属性v-cloak 和CSS样式结合使用，后面使用虚拟DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h2 v-pre>{{message}}</h2>
		</div>

		<script src="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					url: '<a href = "www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

v-bind

动态绑定，比较重要，有对应缩写：：
基础动态绑定url

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<img v-bind:src = "imageUrl" alt=""/>
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					imageUrl: 'https://m.360buyimg.com/babel/jfs/t1/56015/5/10346/150886/5d78e9ddEf7d2c431/8e8d54aa37eb47e4.jpg'
				}
			})
		</script>
	</body>
</html>

v-bind 绑定动态class对象
给列表 选中就显示谁，其他给其删除：绑定一个对象语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.active {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id = "app">
			<!-- 控制bool 动态显示哪个class -->
			<h2 v-bind:class = "{active: isActive, line: isLine}">{{message}}</h2>
			<button v-on:click="btnClick">按钮</button>
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					isActive: true,
					isLine: true
				},
				methods:{
					btnClick : function(){
						this.isActive = !this.isActive
					}
				}
			})
		</script>
	</body>
</html>

v-bind绑定样式

  • CSS属性名称时候，比如font-size
    • 使用驼峰命名方式fontSize
    • 短横线分割kebao-case font-size
  • 绑定class有两种语法：
    • 对象语法
    • 数组语法
      动态绑定样式，在组件化开发时候需要绑定对应的样式
      将导航栏单独封装成为一个组件，后续过程中使用这个组件，封装单独组件可以进行复用，
      v-for and v-bind 做一个小东西：点击列表哪一项，哪一项就会文件变成红色
      在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!-- vue 没有添加'' 会将其当成一个变量 简单绑定 -->
			<h2 :style="getStyle()">{{message}}</h2>
			<ul>
				<li v-for="item in movies">
					{{item}}
				</li>
			</ul>
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					movies: ['海王','速度与激情'],
					finalSize: '50px',
					finalColor: 'red'
				},
				methods:{
					getStyle: function(){
						return {fontSize: this.finalSize, color: this.finalColor }
					}
				}
			})
		</script>
	</body>
</html>

vue 中computed 复杂计算属性

计算属性和函数调用最大区别在于： 计算属性具有缓存值，函数调用没有，对于不需要频繁计算属性，使用计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!-- 计算属性 直接写属性名称，不需要添加小括号 -->
			<h2>总价格{{totalPrice}}</h2>
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					books : [
						{id: 110, name: 'Unix编程', price: 119}
					]
				},
				// 计算属性,按照属性方式
				computed:{
					// 定义函数,进行复杂逻辑计算
					fullName: function(){
						return this.message
					},
					totalPrice: function(){
						return this.books.reduce(function(pre,cur){
							return cur.price + pre;
						}, 0)
					}
				}
			})
		</script>
	</body>
</html>

计算属性中setter 和 getter

如果计算属性中没有setter 方法，只有只读属性
在这里插入图片描述
计算属性如果只有getter方法，直接化简单方式
在这里插入图片描述
直接使用setter方法中，注意其中应该带有参数
在这里插入图片描述
在这里插入图片描述

vue 的事件监听 v-on

特别是事件监听，用来与鼠标和键盘事件的监听
在这里插入图片描述

  • v-on 中参数传递问题：·语法糖 @
    在点击按钮过程中需要传递一些参数：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="btn1Click(123)"></button>
			<!-- 如何获取浏览器参数event, 传入$event 不会把event当中变量 -->
			<button @click="btn2Click(123, $event)"></button>
		</div>

		<script src="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					movies: ['海王', '速度与激情']
				},
				methods: {
					btn1Click(param) {
						console.log(param);
					},
					btn2Click(param1, event){
						console.log('----', param1, e)
					}
				}
			})
		</script>
	</body>
</html>

高级应用

v-model 表单绑定

v-model 对表单进行双向绑定，在用户的消息交互过程中 实现表单元素和数据的双向绑定，监控用户输入，对用户输入进行检测
在这里插入图片描述

  • v-mode 基础使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!-- 将message绑定到DOM message中及时响应 -->
			<input type="text" v-model = "message" />
			{{message}}
		</div>
		
		<script src ="../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					movies: ['海王','速度与激情']
				}
			})
		</script>
	</body>
</html>

v-model 使用 v-bind,v-on 组合实现相同功能：本质操作包含两个 v-bind 和v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!-- 将message绑定到DOM message中及时响应 监听用户输入-->
			<input type="text" :value = "message" v-on:input="valueChange"  />
			<h2>{{message}}</h2>
		</div>
		
		<script src ="../../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world'
				},
				methods:{
					// 一旦产生事假后,浏览器产生一个event对象
					valueChange(event){
						this.message = event.target.value;
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

v-mode 和 radio 绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!-- v-model radio 结合 name 保证唯一性-->
			<label for = "male">
				<input type = "radio" id = 'male' name = 'sex' value = '男' v-model = 'sex'/> 男
			</label>
			<!-- v-model 绑定同一个变量，保持互斥 -->
			<!-- v-model 默认选中男 -->
			<label for = "female">
				<input type = "radio" id = 'female' name = "sex" value = '女' v-model = 'sex'/> 女
			</label>
			<h2>您选择性别: {{sex}}</h2>
		</div>
		
		<script src ="../../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					sex: '男'
				},
				methods:{
				
				}
			})
		</script>
	</body>
</html>

v-model 与checkbox 联合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<label for="">
				<!-- 单选或者复选 label 点击文字可以选中 -->
				<input type="checkbox" id="license" v-model="isAgree" /> 同意协议
			</label>
			<br />
			<button :disabled="!isAgree">下一步</button>
			<br>
			<label for="">
				<!-- 单选或者复选 label 点击文字可以选中 -->
				<input type="checkbox" id="license" value="足球" v-model="hobbies" /> 足球
			</label>
			<br />
			<label for="">
				<!-- 单选或者复选 label 点击文字可以选中 -->
				<input type="checkbox" id="license" value="篮球" v-model="hobbies" /> 篮球
			</label>
			<br />
			<label for="">
				<!-- 单选或者复选 label 点击文字可以选中 -->
				<input type="checkbox" id="license" value="排球" v-model="hobbies" /> 排球
			</label>
			<br />
			<h2>选择:{{hobbies}}</h2>
		</div>

		<script src="../../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					isAgree: false,
					hobbies: []
				},
				methods: {

				}
			})
		</script>
	</body>
</html>

v-model 与select结合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<select name ="abc"  v-model = "fruit">
				<option value = "苹果" >苹果</option>
				<option value = "梨子">梨子</option>
				<option value = "桃子">桃子</option>
			</select>
			<h2> 多选</h2>
			<br>
			<select name ="abc"  v-model = "fruits" multiple >
				<option value = "苹果" >苹果</option>
				<option value = "梨子">梨子</option>
				<option value = "桃子">桃子</option>
			</select>
			<h2>多选结果:{{fruits}}</h2>
		</div>
		
		<script src ="../../js/vue.js"></script>
		<script>
			// let/const 在ES6 中 
			const app = new Vue({
				el: "#app", // 用于挂载需要管理元素
				data: {
					message: 'hello world',
					fruit: '苹果',
					fruits: []
				}
			
			})
		</script>
	</body>
</html>
上后左爱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础知识大全+小案例
weixin_45158297的博客
02-13 2396
vue基础 第一个vue程序 导入开发版本的vue.js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 创建vue实例对象，设置el属性和data属性 使用简洁的模板语法把数据渲染到页面上 el挂载点 vue的作用范围是什么？vue会管理el选项命中元素及其内部的后代元素 是否可...
vue基础知识大全
qq_41893334的博客
08-16 825
知识清单初识vue 初识vue 1.什么是Vue? Vue.js 是一套构建用户界面的框架，它不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、…)。 2.框架和库的区别? 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。 例如: 从jQuery 切换到 Zepto, 无缝切换 从IScroll切换到ScrollMagic, 只需要将用
vue基础知识汇总
yuandawang的博客
01-06 5846
vue基础知识汇总
Vue 之 Vue 的基础知识汇总 —— 总结一
ZhuangWei的博客
06-25 375
什么是 Vue 以及 Vue 的基础知识 —— 总结一一、插入内容{{Mustache}} 、 v-cloakv-textv-htmlv-prev-once二、条件判断v-ifv-else 、 v-else-ifv-show三、遍历循环v-for四、动态绑定属性v-bind五、事件绑定v-on六、v-modelv-model的初体验v-model 在复选框中的使用v-model 在单选框中的使用v-model 在单选下拉选框中的使用v-model 在多选下拉选框中的使用v-model 的修饰符 一、插入内容
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 5474
Vue的基础知识，持续整理中。。。
vue知识点汇集 总结 回顾
10-27
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其易用性、灵活性和强大的功能而广受欢迎。Vue的核心理念是通过声明式渲染来简化DOM操作，使得开发者能够更专注于业务逻辑，而不是底层实现细节。下面将...
vue-review-code:vue基础知识回顾源代码
03-23
审阅代码 vue知识点回顾 声明式渲染 模板语法 文字 v-html 一次 绑定 条件渲染 如果 v-else v-else-if 表演秀 v-if vs v-show v为 上电 事件处理 模型 组件基础 综合实例
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
08-22
内容概要: - 涵盖了Vue的基础知识点,如指令、方法、计算属性等 - 列出了常用的指令语法,如v-...这是一份针对Vue基础知识点的速查手册,可以帮助初学者快速回顾和掌握Vue的基础语法,也可供开发者面试前进行知识点整理。
Vue基础day3学习资料.zip
03-31
Markdown格式使得笔记易于阅读和编辑，对于回顾和复习Vue基础知识非常有帮助。 "2-代码"目录下的文件很可能是配套的实战练习代码，涵盖各种Vue语法的应用场景。通过实际编写和运行代码，学习者可以加深对Vue工作...
Vue购物车案例---对前面所学的知识点进行回顾与总结
04-15
在本Vue购物车案例中，我们将深入探讨和回顾前端开发中的关键知识点，特别是与Vue.js相关的技术。Vue.js是一款轻量级的JavaScript框架，它以其简单易用、灵活性高和性能出色而广受开发者喜爱。在这个案例中，我们将...
Vue 知识大全（一）
暖夏的博客
04-17 873
Vue ，React ，Angular 三大主流框架，最后我选择学习 Vue ，接触过 React ，自己感觉学习曲线有些陡峭，进而我选择了学习 Vue ，他的学习曲线平稳很多；不管选择什么框架，除了对基础的知识有一定的了解掌握，还应该对 ES6 有一定的了解； 这就是我脑海中的 Vue 知识体系； 一句话概况了 Vue通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件; V...
Vue知识点系列一基础知识总结
拎着蜗牛跑的壳儿
11-24 1293
一 .Vue基础知识点 1.1 - 历史介绍 angular 09年，年份较早，一开始大家是拒绝 react 2013年, 用户体验好，直接拉到一堆粉丝 vue 2014年, 用户体验好 在为AngularJS工作之后，Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。[8]Vue最早发布于2014年2月。作...
Vue高级
烟渺睿晨的博客
08-18 707
Vue的组件详解、组件的生命周期、父子相互传递参数、兄弟相互传递参数等等
vue高级知识点集合
gongliming_qd的博客
02-08 604
1 . Class绑定在不同环境下的用法 class绑定分为两种， 一种是对象, 一种是数组。 如下情况： // Object :class="{ active: isActive, 'text-danger': hasError }" data: { isActive: true, hasError: false } // Array :class="[activeClass, errorClass]" data: { activeClass: 'active', errorClas
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
今天，学会这几个Vue高级实战技巧就够了!
主要领域：前端开发
07-14 2020
前言 今天，我们来分享几个不可不知的vue高级实战技巧。 技巧 自动注册组件 我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。 <template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './com
Vue详解知识概括
begefefsef的博客
07-31 699
我们在html文件上输入【!】叹号(在英文状态下)，然后按键盘的【Tab】键，只有在这种情况下按住Tab键可以快速创建一个html模板。代码缩进时只缩进两个空格。开发快捷键①Ctrl+p查找文件全局搜索字符串③Ctrl+j切换终端④Ctrl+b显示/隐藏左侧目录栏显示所有命令⑥拆分当前编辑窗口Ctrl+，Ctrl+1234等在编辑窗口间切换⑦选中方法名->Shift+F12，选中方法名->鼠标右键插件src目录分析②。...
最全Vue知识点总结，助你快速上手
weixin_51812604的博客
04-23 4417
最全Vue知识点总结
关于Vue.js重要知识点(一)
wsssqe的博客
03-06 3712
1为什么要写这样的文章呢？很多框架的语法大同小异，没有必要将时间浪费在那些共同点上，我觉得只要将某个框架中特殊之处掌握，然后马上通过项目实践即可，再从项目中去学习那些常用的语法。以下是我觉得重要的知识点。2.概述知识点（1）.v-show与v-if的区别:v-show的隐藏是将css样式中display设置为none;而v-if的隐藏是将DOM元素删除;如果在需要频繁切换显示那么最好使用v-sho...
Spring Boot 和 Vue 前后端分离教程(附源码).docx
最新发布
11-28
4. Vue.js基础知识：先简要回顾HTML、CSS和JS的基本概念，然后详细介绍Vue.js，包括它是如何实现MVVM模式（Model-View-ViewModel）的，学习成本低且文档易于理解。此外，还介绍了Vue CLI（命令行界面）的使用，用于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值