VUE进阶

最新推荐文章于 2023-06-07 14:59:24 发布
最新推荐文章于 2023-06-07 14:59:24 发布
阅读量194 收藏
点赞数 2
分类专栏： vue 前端 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45377275/article/details/119939378
版权

1 VUE入门案例

1.1 Vue基本用法:

<!-- 基本语法 
			1.导入JS类库.
			2.指定VUE渲染区域 标签体
			3.实例化VUE对象
			4.数据取值
		-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 基本语法 
			1.导入JS类库.
			2.指定VUE渲染区域 标签体
			3.实例化VUE对象
			4.数据取值
		-->
		<div id="app">
			<!-- 插值表达式取值 -->
			<h1>{{msg}}</h1>
		</div>
		
		<!-- 1.导入JS类库 -->
		<script src="../js/vue.js"></script>
		<!-- 2.创建VUE对象 -->
		<script>
			/* 关于JS中变量定义说明:
				1.var 没有作用域的概念 容易出现安全性问题. 成员变量
				2.let 作用于var类似, 有作用域的概念  局部变量
				3.const 定义常量
			 */
			const app = new Vue({
				el: "#app",
				data: {
					msg: "vue入门案例 哈哈哈哈"
				}
			})
		</script>
	</body>
</html>

1.2 var/let/const说明

1 var 没有作用域的概念,容易出现安全问题,相当于java中的成员变量

2 let 作用与var类似,有作用域的概念,相当于java中局部类型

3 const 定义变量

1.3 v-text/v-html说明

1 {{msg}} 插值表达式 初加载或者刷新时可能会出现闪现问题:闪现:出现一瞬间的{{msg}}而不是赋的值

2 v-text:当页面没有渲染完成时,不予在页面中展示

3 v-html 将html代码片段 渲染展现

	<div id="app">
			
			<h1>{{msg}}</h1>
			<!-- 1.v-text  -->
			<h1 v-text="msg"></h1>
			<!-- 2.v-html -->
			<div v-html="div"></div>
		</div>
<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: "vue入门案例 哈哈哈哈",
					div: "<h3>我是一个标题标签</h3>"
				}
			})
		</script>

1.4 双向数据绑定

遇到文本框 双向数据绑定.

1.用户的输入变化 则data数据变化.

2.data数据变化, 则文本框的展现变化.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<div id="app">
			用户名: <input type="text" v-model="username"/>
			密码: <input type="text" v-model="password"/>
			<br>
			{{username}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					password: ''
				}
			})
		</script>
	</body>
</html>

1.5 MVVM思想:

M: model 数据层

V : 视图层

VM : 视图数据的控制层

DOM:前的整个页面的展现就是一个DOM

虚拟DOM : VUE内部为了提高相应速度,依赖的重要组成组件(操作内存数据,内存数据一旦改变,相对应的页面立即变化)

流程:
1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化.
2. View变化, 虚拟DOM操作内存数据变化, 数据变化

在这里插入图片描述

 1.6 事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件绑定的语法:
				v-on:click="简单的计算"
				v-on:click="点击事件"
			 -->
			
			展现数据: {{num}}
			<button v-on:click="num++">自增</button>
			<!-- <button v-on:click="addNum">自增函数</button> -->
			<button @click="addNum">自增函数</button>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 100
				},
				methods: {
					addNum(){
						this.num ++
					}
					/* addNum: function(){
						this.num ++
					} */
				}
			})
		</script>
	</body>
</html>

1.7 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令学习</title>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<button v-on:click="msg++">加一</button>
			<button @click="add">减一</button>
			<!-- <input type="text" v-model="score" /> -->
			等级：
			<h3 v-if="msg >= 90">优秀</h3>
			<h3 v-else-if="msg >= 80">良好</h3>
			<h3 v-else-if="msg >= 70">普通</h3>
			<h3 v-else>继续努力</h3>
			<!-- 命令 
			1 v-if 如果判断为true 则展现元素
			2 v-else-if  如果不满足v-if 检查是否满足v-else-if
			3 v-else 上述都不满足才展现
			-->
			
		</div>
		
		<!-- 内存变化，view就变化 -->
		<!-- 基本语法
		 1 导入JS类库
		 2 指定VUE渲染区域
		 3 实例化VUE对象
		 4 数据取值
		 -->
		 <!-- 1 导入JS类库-->
		 <script src="../js/vue.js"></script>
		 <!-- 2 创建VUE对象-->
		 <script>
			 /* 1 var 没有作用域的概念，容易出现安全性问题 成员变量
				2 let 作用与var类似，有作用域的概念 局部变量
				3 const 定义常量
			 */
			const app = new Vue({
				 el:"#app",
				 data:{
					msg:"80",
				 },
				methods:{
					 add:function(){
						 this.msg --
					 }
				 }
				 
			 }
			 )
		 </script>
	</body>
</html>

1.8 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 指令: v-for 展现的标签 -->
			<!-- 案例1: 以循环方式输出爱好 -->
			<div id="demo1">
				<!-- 如果只有一个参数,则value表示数据 -->
				<p v-for="value in hobby" v-text="value"></p>
			</div>
			<hr />
			
			<!-- 案例2: 以循环方式输出爱好 展现下标
				 arg1: value的值的数据
				 arg2: 下标的数据.
			 -->
			<div id="demo2">
				<p v-for="arg1,arg2 in hobby">
					<span v-text="arg2+1"></span>
					----
					<span v-text="arg1"></span>
				</p>
			</div>
			<hr />
			
			<div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
						<td>编号</td>
						<td>名称</td>
						<td>年龄</td>
					</tr>
					<!-- 遍历数据获取对象,之后从对象中获取属性 -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
			<hr />
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hobby: ["敲代码","改BUG","钻研技术"],
					userList: [{id:100,name:"泰森",age:60},
							   {id:101,name:"嘴炮",age:40},
							   {id:102,name:"泰坦巨猿",age:300000},
							  ]
				},
				methods: {
				}
			})
		</script>
	</body>
</html>

1.9 MVC 设计思想

在这里插入图片描述

前端:视图:用户看到的页面(html)

后端:SpringBoot,Spring,Mybatis 等

M : 为持久层与数据库

V : 前端视图:用户看到的数据

C : 控制程序的流转 Contruller层 与Service层

1.10 表单的双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
		<!-- 表单中的那些标签可以使用双向数据绑定
			 双向数据绑定：用户可以录入的标签
			 1 input：单选，双选，下拉，文本域等等
			 
		 -->
		 
		 <form action="http//baidu.com">
			 <div >
				 <!-- 懒加载 输入后 离焦在进行数据的双向绑定-->
				 用户名：<input type="text" v-model.lazy="username"  />
				 {{username}}
			 </div>
			 <div>
			 	性别：<input type="radio" value="男" name="aa" v-model="age" />男
					 <input type="radio" value="女" name="aa" v-model="age"/>女
			 </div>
			 
			 <div >
				 <!-- 多个用数组接取-->
				 <input type="checkbox" name = "bb" value="敲代码" v-model="hobby"/>敲代码
				  <input type="checkbox" name = "bb" value="打游戏" v-model="hobby"/>打游戏
				 <input type="checkbox" name = "bb" value="叽叽叽" v-model="hobby"/>叽叽叽
			 </div>
			 <!-- Vue 的点击事件中有一个方法，可以取消标签的默认行为
				   @click.prevent
				   常用场景：
				   1 form标签  阻止action 跳转
				   2 a标签     阻止herf跳转
			 -->
			 <input type="submit" value="提交" @click.prevent="formBtn" />
		 </form>
		 <a href="www.hao123" @click.prevent>点击</a>//可以拦截
		 
		 
		 
		 
		 
		 
		 
		</div>
		 <a href="www.hao123" @click.prevent>点击</a>//不可以拦截

		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username:"",
					age:"男",
					hobby:["叽叽叽"],
					
					
					
				},
				methods: {
					formBtn(){
						alert("ajks");
					}
				}
			})
		</script>
	</body>
</html>

懒加载 :  v-model.lazy 当离焦后(输入完成,回车) 才开始数据绑定

转化类型 :v-model.number   将input输入的为字符串转化为数字

去除前后多余的空格(中间的不行) : v-model.trim

拦截form,a标签跳转: @click.prevent

<input type="submit" value="提交" @click.prevent="formBtn" />

 <a href="www.hao123" @click.prevent>点击</a>//可以拦截

注意:所有标签都需要写道挂载点内,否则所有标签不生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
		
		 <a href="www.hao123" @click.prevent>点击</a>//可以拦截
		 
		</div>
		 <a href="www.hao123" @click.prevent>点击</a>//不可以拦截

		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
			})
		</script>
	</body>
</html>
爱~消逝
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue学习-进阶
liushangzaibeijing的博客
09-13 5万+
在之前的文章中我们讲解了vue环境搭建，项目创建demo来了解vue基础，最终我们需要关注数据，所以该片博文主要针对vue的指令、路由、vue组件、vue父子组件通信，axios、vuex和vue生命周期函数 来给大家扩充vue的进阶知识点，希望这篇博文能让读者有所收获。
vue进阶篇.pdf
05-09
vue基础知识，文章内部存在案例、分析以及js底层原理。深入解剖前端模块之间的原理，是读者更容易上手和编写，为后续自我提升帮助很大。让读者在轻松阅读中得到良好的提升
Vue.js进阶技巧实战开发
07-21
课程概述市面上大多数关于 Vue.js 教程都在讲基础语法，很少讲实际的应用场景和用例，导致很多同学即便知道怎么写，也不知道怎么用。本套课程会重点教大家一些进阶的 Vue.js 的实战技巧，采用 基础讲解 + 实战开发 的形式授课，帮助你快速掌握其技巧和应用场景。
Vue基础（进阶篇）
qq_45796592的博客
02-14 1417
Vue开发涉及的知识点
Vue进阶讲解
m0_59867106的博客
06-08 335
（1） 什么是本质上描述的是一种视图和逻辑之间的数据双向关联关系，专业术语中称为数据双向绑定模式 （2） 和 是一种数据双向绑定模式，核心解决了数据和结构分离、数据双向同步的问题是一种编程模式，核心解决了根据用户请求处理不同业务的逻辑问题，主要描述了请求分发面试题解析：请简单描述一下和你是怎么理解的？组件的生命周期，主要区分四个阶段：创建、加载、运行、销毁 一、数据劫持 中的一个重要特性就是数据的双向绑定，底层主要是通过数据劫持的方式实现的！ 什么是组件组件，英文单词描述了一个包含页面结构、
Vue 进阶实战培训.pdf版
06-06
Vue 进阶实战培训
day01-VUE进阶
最新发布
10-29
day01-VUE进阶
Vue进阶笔记讲义.docx
08-13
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链...
vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar
07-30
包含vue基础篇、vue进阶篇、Vue模块篇三部分
vue从基础到精通进阶之路总结
03-14
总结了组件。自定义组件，混入，修饰符，自定义指令，各种插槽，vue的生命周期，以及本人ZaIrevue工作中遇到的一些问题总结出来
vue从入门到懵逼
08-29
主要介绍vue.js起源，特点，和其他前端框架的对比，以及如何与真实项目集成
vue前端进阶（学完这篇直接整vue-element-admin）
weixin_47615289的博客
08-14 1059
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，==早期网站主要内容都是静态，以图片和文字为主==，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。[2]...
Vue从入门到精通
qq_46555046的博客
06-07 1205
Vue学习入门
VUE 进阶实践
qq_55624813的博客
11-04 1478
构建Vue项目 lifecycle+npm+webpack Vue的生命周期 lifecycle 使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。 如页面创建时，页面加载时，页面更新时，页面销毁时？ 在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。 生命周期函数： vue实例在某一个时间点会自动执行这些函数； 生命周期钩子函数不
Vue-组件-组件注册
u011360133的专栏
05-30 1850
看Vue文档整理笔记，便于自己学习 组件注册 组件名：字母全小写且必须包含一个连字符 Vue.component('my-component-name', { /* ... */ }) 定义组件名的方式有两种：kebab-case短横线命名法(短横线分隔命名)、PascalCase帕斯卡命名法 (首字母大写命名) 注意：当使用PascalCase(首字母大写命名)定义组件时，你...
vue.js渐进式教程(进阶篇)
qq_43237014的博客
03-24 417
由于公司最近进化持续开展学习会，让开发人员能够学到更多的知识和技能，所以本人写了一篇关于vue.js的教程，虽然网上的教程很多，但本篇教程是本人的个人学习和经验总结，只针对于正在学习中的小伙伴们，主要是面试经常会被问到，以及开发中常用知识点和技能的一些整理，希望正在学习阶段的小伙伴能够少走弯路，能够更明确的学到有用的知识和技能： 此教程主要分为三个阶段入门篇，进阶篇和高级篇，将会不定期发布每一篇内容，当然，后期也会持续更新一些其它方面的学习知识，有问题和需要扩充的地方欢迎大家提出。 一、vue.js入门篇
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
05-10
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与各种插件的配合使用、Vue cli脚手架的搭建、Element UI的应用、Vuex的应用、Mock和Easymock的应用.
根据vue进阶出一个目录
02-27
以下是一个基于 Vue 进阶的目录结构示例： ``` src/ ├── assets/ # 资源文件目录，如图片、字体等 ├── components/ # 公共组件目录，可供多个页面复用 ├── mixins/ # 全局 mixin 目录 ├── plugins/ # ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值