入职java开发第一天，不会VUE竟然被.........

英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/动态构建用户界面的渐进式JavaScript 框架作者: 尤雨溪。

m0_添砖java

7193人浏览 · 2024-05-16 09:09:10

m0_添砖java · 2024-05-16 09:09:10 发布

在一个繁华的都市中，张明怀揣着对后端开发的热爱和憧憬，成功应聘了一家知名的科技公司。他对于即将到来的职场生活充满了期待，希望能够在那里施展自己的才华，实现自己的职业梦想。
然而，就在他入职的第一天，公司为了让他更快地融入团队，安排了一场技术分享会，要求他和其他新入职的同事一起参与。在分享会上，团队领导提到了Vue.js这个重要的前端框架，并询问大家是否熟悉其操作。
张明顿时感到一阵紧张，因为他之前并没有接触过Vue.js。虽然他在HTML、CSS和JavaScript方面有着扎实的基础，但对于Vue.js这个领域却是一片空白。他试图掩饰自己的不安，但内心却充满了忐忑。
分享会结束后，团队领导私下里找到张明，希望他能够在短时间内掌握Vue.js的基本操作，因为公司非常注重前端开发和技术创新。张明虽然答应了，但内心却感到无比的压力。
在接下来的几天里，张明拼命地学习Vue.js的相关知识，但由于缺乏实践经验，他始终无法熟练掌握。每当他试图编写Vue组件或者理解Vue的响应式原理时，总会遇到各种各样的困难。这让他感到非常沮丧和焦虑。
有一天，团队领导突然宣布要进行一次项目评审，并要求每个人都展示他们使用Vue.js开发的部分。张明感到自己的末日就要来临了，因为他知道自己根本无法在规定的时间内完成这个任务。
果然，在项目评审的过程中，张明遇到了一个严重的问题，他的Vue组件无法正常工作。他尝试了各种方法，但都没有成功。这时，团队领导走了过来，询问他的进展情况。
张明无奈地坦白了自己的困境，并表达了自己的愧疚和不安。他本以为会遭到严厉的批评或指责，但出乎意料的是，团队领导并没有责怪他，而是耐心地为他讲解了Vue.js的基本操作和注意事项。
在团队领导的帮助下，张明终于成功地解决了Vue组件的问题。虽然这次经历让他感到非常尴尬和羞愧，但他也深刻地认识到了自己的不足和需要改进的地方。
然而，不幸的是，由于张明在Vue.js方面的技能不足已经严重影响到了团队的项目进度和开发效率。在经过一段时间的观察和评估后，公司最终做出了一个艰难的决定：将张明解雇。
虽然这个结果让张明感到非常失落和沮丧，但他也意识到这是一个重要的教训。他明白了在职场中不仅要掌握专业技能，还要具备快速学习和适应新环境的能力。他决定在离开这家公司之前，认真反思自己的不足并努力学习Vue.js和其他相关技术知识，为将来的职场生涯打下坚实的基础。

所以VUE是什么东西呢？我们接着往下看…

第 1 章：Vue 核心

1.1. Vue 简介

1.1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

1. 动态构建用户界面的渐进式 JavaScript 框架
1. 作者: 尤雨溪

1.1.3. Vue 的特点

1. 遵循 MVVM 模式
1. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
1. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

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

1.1.5. Vue 周边库

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

1.2. 初识 Vue

		<div id="root">
			<h1>hello world</h1>
		</div>

1.3. 模板语法

1.3.1. 效果

	<div id="root">
			<!-- VUE模板和vue实例一对一绑定-->
			<h1>hello {{name}}</h1>
			<hr />
			<a v-bind:href="url">baidu</a><br />
			<!-- v-bind是单向数据绑定，v-model（只能用在表单类元素上，比如h元素就不行）是双向数据绑定 -->
			数据绑定<input  type="text" v-model="age"/>
		</div>
<script type="text/javascript">
     new Vue(
	{
		el:'#root',
		data:{
			name:'abc',
			url: 'http://www.baidu.com',
			age:20
		},
	});
	// min版的vue需要手动开启
	// Vue.config.devtools = true;
</script>

1.3.2. 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）
1. 指令（以 v-开头）

1.3.3. 插值语法

1. 功能: 用于解析标签体内容
1. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

1.3.4. 指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件
1. 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析
1. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

1.4. 数据绑定

1.4.1. 效果

在这里插入图片描述

	<body>
		<div id="root">
			<!-- VUE模板和vue实例一对一绑定-->
			<h1>hello {{name}}</h1>
			<hr />
			<a v-bind:href="url">baidu</a><br />
			<!-- v-bind是单向数据绑定，v-model（只能用在表单类元素上，比如h元素就不行）是双向数据绑定 -->
			单向数据绑定<input type="text" :value="age1"/>
			双向数据绑定<input  type="text" v-model="age"/>
		</div>
<script type="text/javascript">
     new Vue(
	{
		el:'#root',
		data:{
			name:'abc',
			url: 'http://www.baidu.com',
			age:20,
			age1:10
		},
	});
	// min版的vue需要手动开启
	// Vue.config.devtools = true;
</script>

1.4.2. 单向数据绑定

1. 语法：v-bind:href =“xxx” 或简写为 :href；
1. 特点：数据只能从 data 流向页面（在页面修改值，data不变）；

1.4.3. 双向数据绑定

1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx” ；
1. 特点：数据不仅能从 data 流向页面，还能从页面流向 data（在页面修改值，data会改变）；

1.5. MVVM 模型

1. M：模型(Model) ：对应 data 中的数据
1. V：视图(View) ：模板
1. VM：视图模型(ViewModel) ： Vue 实例对象

vue的数据代理

Vue实例中的_data==data
在这里插入图片描述

<body>
		<!-- 
				1.Vue中的数据代理：
							通过vm对象来代理data对象中属性的操作（读/写）
				2.Vue中数据代理的好处：
							更加方便的操作data中的数据
				3.基本原理：
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性，都指定一个getter/setter。
							在getter/setter内部去操作（读/写）data中对应的属性。
		 -->
		<!-- 准备好一个容器-->
		<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>

1.6. 事件处理

1.6.1. 效果

在这里插入图片描述

1.6.2. 绑定监听

1. v-on:xxx=“fun”
1. @xxx=“fun” （简写）
1. @xxx=“fun(参数)”
1. 默认事件形参: event
1. 隐含属性对象: $event

1.6.3. 事件修饰符

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

	<body>
		<!-- 
		Vue中的事件修饰符：
			1.prevent：阻止默认事件（常用）；
			2.stop：阻止事件冒泡（常用）；
			3.once：事件只触发一次（常用）；
			4.capture：使用事件的捕获模式；
			5.self：只有event.target是当前操作的元素时才触发事件；
			6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
				-->
		<div id="root">
		<h1>欢迎来到{{name}}学习</h1>
		<a href="http://www.baidu.com" @click.prevent='showinfo'>点我</a>
		<button v-on:click.once='showinfo'>点击提示</button>
		<button @click='showinfo2(666)'>点击提示</button>
		
		<div @click='showinfo' class='demo'>
			<button @click.stop='showinfo'>点击</button>
		</div>	
		</div>
	</body>

1.6.4. 按键修饰符

1. keycode : 操作的是某个 keycode 值的键
1. .keyName : 操作的某个按键名的键(少部分)

<body>
		<!-- 
				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.自定义键名 = 键码，可以去定制按键别名
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>
	</body>

1.7. 计算属性与监视

1.7.1. 效果

在这里插入图片描述

<body>
<!-- 
			计算属性：
		1.定义：要用的属性不存在，要通过已有属性计算得来。
		2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
		3.get函数什么时候执行？
					(1).初次读取时会执行一次。
					(2).当依赖的数据发生改变时会被再次调用。
		4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
	    5.备注：
			1.计算属性最终会出现在vm上，直接读取使用即可。
			2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
		 -->
		<div id="root">
		姓:<input type="text" v-model="fristName"/><br />
		名:<input type="text" v-model="lastName"/><br />
		<span>{{addname()}}</span><br />
		姓2:<input type="text" v-model="fristName2"/><br/>
		名2:<input type="text" v-model="lastName2"/><br />
		<span>{{addname2}}</span>
		</div>
	</body>
	<script type="text/javascript">
	
		Vue.config.productionTip=false
	    const vm= new Vue(
		{
			el:'#root',
			data:{
				name:'优讯',
				fristName:'zhang',
				lastName:'san',
				fristName2:'zhang2',
				lastName2:'san2'
				
			},
			methods: {
				addname(){
					return this.fristName+this.lastName;
				}
			},
			computed: {
				addname2: {
	//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
	//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
					return this.fristName2+this.lastName2
					},
	//set什么时候调用? 当fullName被修改时。				
					Set(value){
					const x=value.split('-');
					this.fristName2=x[0];
					this.lastName2=x[1];					
					
					}

				}
			},
			
		});
		// min版的vue需要手动开启
		// Vue.config.devtools = true;
	</script>

1.7.2. 计算属性-computed

1. 要显示的数据不存在，要通过计算得来。
1. 在 computed 对象中定义计算属性。
1. 在页面中使用{{方法名}}来显示计算的结果。

1.7.3. 监视属性-watch

<body>
		<!-- 
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>

1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性；
1. 当属性变化时, 回调函数自动调用, 在函数内部进行计算；

1.8. class 与 style 绑定

1.8.1. 理解

1. 在应用界面中, 某个(些)元素的样式是变化的
1. class/style 绑定就是专门用来实现动态样式效果的技术

1.8.2. class 绑定

<body>
		<!-- 
			绑定样式：
					1. class样式
	写法:class="xxx" xxx可以是字符串、对象、数组。
	字符串写法适用于：类名不确定，要动态获取。
	对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
	数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
		2. style样式
		:style="{fontSize: xxx}"其中xxx是动态值。
	 	:style="[a,b]"其中a、b是样式对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'程序员学习',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>

1. :class=‘xxx’
1. 表达式是字符串: ‘classA’
1. 表达式是对象: {classA:isA, classB: isB}
1. 表达式是数组: [‘classA’, ‘classB’]

1.8.3. style 绑定

1. :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
1. 其中 activeColor/fontSize 是 data 属性

后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^