【Java系列笔记016】Vue框架简单入门（完结）

看不到我ε≡٩(๑>₃<)۶

已于 2024-03-11 09:33:39 修改

阅读量924

点赞数 11

分类专栏：个人笔记 Java系列文章标签： java 笔记开发语言 vue.js vue

于 2024-03-11 09:32:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_19627109/article/details/136614602

版权

个人笔记同时被 2 个专栏收录

50 篇文章

订阅专栏

Java系列

21 篇文章

订阅专栏

第一节：vuejs概述与快速入门

1.1 vuejs概述

vue.js是一个构建数据驱动的web界面的渐进式框架。vue.js的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图组件。它不仅容易上手，还便于与第三方库或既有项目整合

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

Vue.js是一个提供了MVVM风格的双向数据绑定的Javascript库，专注于View层。它的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

在这里插入图片描述

1.3 Vue的插值表达式

数据绑定最常见的就是使用“Mustache”语法（双大括号）的文本插值，Mustache标签将会被替代为对应数据对象上属性的值。无论如何，绑定的数据对象上属性发生了改变，插值处的内容都会更新

vue.js都提供了完全的JavaScript表达式支持

{{number+1}}
{{ok?'yes':'no'}}

这些表达式会在所属的Vue实例的数据作用域下作为javaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效

<!--这是语句，不是表达式-->
{{var a=1}}
<!---流控制也不会生效，请使用三元表达式-->
{{if (ok) {return message}}}

第二节：VueJs常用系统指令

2.1 v-on

作用

可以用v-on指令监听DOM事件，并在触发时运行一些javaScript代码

简写

@事件名称就是 v-on:事件名称的简写

@click就等同于v-on:click

v-on:click

<body>
	<div id="app">
		{{message}}  
		<button v-on:click="fun1('Vue v-on')">vue的onclick</button
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",//表示当前vue对象接管了div区域
		data:{
			message:"Hello Vue!"//注意不要以分号结尾
		},
		methods:{
			fun1:function (msg){
				alert("Hello");
				this.message=msg;
			}
		}
	});
</script>

v-on:keydown

<body>
	<div id="app">
		<input type="text" v-on:keydown="fun($event)" placeholder="vue方式" id="app1">
		<hr>
		<input type="text" οnkeydοwn="showKeyCode()" placeholder="传统js">
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app1",
		methods:{
			//$event是vue中的事件对象，和我们传统js的event对象是一样的
			fun:function (event){
				var keyCode=event.keyCode;
				if (keyCode<48||keyCode>57){
					//不让键盘的按键起作用
					event.preventDefault();
				}
			}
		}
	});
	//传统js的键盘按下事件
	function showKeyCode(){
		//event对象和我们的document对象以及window对象是一样的，可以不用定义，直接使用
		var keyCode=event.keyCode;
		if (keyCode<48||keyCode>57){
			//不让键盘的按键起作用
			event.preventDefault();
		}
	}
</script>

v-on:mouseover

<body>
	<div id="app">
		<div v-on:mouseover="fun1" id="div">
			<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
		</div>
		<hr>
		<div οnmοuseοver="divmouseover()" id="div2">
			<textarea οnmοuseοver="textareamouseover()">这是一个文件域</textarea>
		</div>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#div",
		methods:{
			fun1:function (){
				alert("鼠标悬停在div上");
			},
			fun2:function (event){
				alert("鼠标悬停在textarea上");
				event.stopPropagation();
			}
		}
	});
	//传统的js方式
	function divmouseover(){
		alert("鼠标移动到div上了")
	}
	function textareamouseover(){
		alert("鼠标移动到了textarea上");
		event.stopPropagation();
	}
</script>

2.2 vue中的事件修饰符

Vue.js为v-on提供了事件修饰符来处理DOM事件细节，如：event.preventDefault()或event.stopPropagation()

Vue.js通过由点(.)表示的指令后缀来调用修饰符

.stop：停止事件的传播，相当于.stopPropagation()
.prevent：阻止默认事件起作用，相当于.preventDefault()
capture
.self
once

<body>
	<div id="app">
		<form action="http://www.baidu.com" method="post" οnsubmit="return checkForm()">
			<input type="submit" value="提交">
		</form>
	</div>
	<div id="vue">
		<form v-on:submit.prevent action="http://www.baidu.com" method="post" οnsubmit="return checkForm()">
			<input type="submit" value="提交">
		</form>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#vue"
	});
	//传统js方式
	function checkForm(){
		//表单验证必须有一个明确的boolean类型返回值
		//在引用验证方法时，必须加上return方法名
		return false;
	}
	
</script>

2.3 vue中的按键修饰符

vue允许为v-on在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter
.tab
delete：捕获（“删除”和“退格”键）
.esc
.space
up
.down
.left
.right
ctrl
alt
.shift
.meta

<body>
<div id="app">
	<input type="text" v-on:keydown.enter="fun1" placeholder="
</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",
		methods:{
			fun1:function (){
				alert("按下的是回车");
			}
		}
	});
</script>

2.4 v-text和v-html

<body>
	<div id="app">
		<div id="div1"></div>
		<div id="div2"></div>
	</div>
	<div id="app2">
		<div v-html="message"></div>
		<div v-text="message"></div>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app2",
		data:{
			message:"<h1>Hello Vue</h1>"
		}
	});
	//传统js的innerText和innerHTML
	window.οnlοad=function (){
		document.getElementById("div1").innerHTML="<h1>Hello</h1>";
		document.getElementById("div2").innerText="<h1>Hello</h1>";
	}
</script>

2.5 v-bind

简化

直接使用:（冒号）

<body>
	<div id="app">
		<font size="5" v-bind:color="ys1">传智播客</font>
		<font size="5" v-bind:color="ys2">黑马程序员</font>
	</div>
</body>
<script>
	//view model
	//插值表达式不能用于html标签的属性取值，要想给html标签的属性设置变量的值，需要使用v-bind
	//v-bind也可以简化写法：直接使用:（冒号）
	new Vue({
		el:"#app",
		data:{
			ys1:"red",
			ys2:"green"
		}
	});
</script>

2.6 v-model

取值，获取json（有点像对象的形式）的值

<body>
	<div id="app">
		<form action="" method="post">
			用户名：<input type="text" name="username" v-model="user.username"><br>
			密码：<input type="text" name="password" v-model="user.password"><br>
		</form>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",
		data:{
			user:{
				username:"test",
				password:"1234"
			}
		}
	})
</script>

2.7 v-for

遍历数组

<body>
	<div id="app">
		<ul>
			<li v-for="(item,index) in arr">{{item}}={{index}}</li>
		</ul>
		<ol>
			<li v-for="(key,value,index) in product">{{key}}={{value}}:{{index}}</li>
		</ol>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",
		data:{
			arr:[1,2,3,4,5],
			product:{
				id:1,name:"笔记本",price:5000
			}
		}
	})
</script>

遍历对象

<body>
	<div id="app">
		<table border="1">
			<tr>
				<td>序号</td>
				<td>编号</td>
				<td>名称</td>
				<td>价格</td>
			</tr>
			<tr v-for="(produce,index) in products">
				<td>{{index+1}}</td>
				<td>{{produce.id}}</td>
				<td>{{produce.name}}</td>
				<td>{{produce.price}}</td>
			</tr>
			
		</table>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",
		data:{
			products:[
				{id:1,name:"笔记本",price:5000},
				{id:2,name:"西奈",price: 6000},
				{id:3,name:"谢特",price: 7000}
			]
		}
	})
</script>

2.8 v-if与v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

<body>
	<div id="app">
		<span v-if="flag">传智播客</span>
		<span v-show="flag">itcast</span>
		<button v-on:click="toggle">切换</button>
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",
		data:{
			flag:false
		},
		methods:{
			toggle:function (){
				this.flag=!this.flag;
			}
		}
	})
	
</script>

第三节： vue.js的生命周期

8个生命周期的执行点，4个基本的，4个特殊的

vue在生命周期中有这些状态，beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue 在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

beforeCreate：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted：将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el)，生成页面上真正的DOM，上面我们就会发现DOM的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的DOM对象，并进行各种操作
当我们的data发生改变时，会调用beforeUpdate和updated方法
- beforeUpdate：数据更新到DOM前，我们可以看到$el对象已经修改，但是我们页面上DOM的数据还没有发生改变
- updated：DOM结构会通过虚拟DOM的原则，找到需要更新页面DOM结构的最小路径，将改变更新到DOM上面，完成更新
beforeDestroy，destroed：实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与viewde绑定，即数据驱动

在这里插入图片描述

<body>
	<div id="app">
		{{message}}
	</div>
</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			message: 'hello world'
		},
		beforeCreate: function() {
			console.log(this);
			showData('创建vue实例前', this);
		},
		created: function() {
			showData('创建vue实例后', this);
		},
		beforeMount: function() {
			showData('挂载到dom前', this);
		},
		mounted: function() {
			showData('挂载到dom后', this);
		},
		beforeUpdate: function() {
			showData('数据变化更新前', this);
		},
		updated: function() {
			showData('数据变化更新后', this);
		},
		beforeDestroy: function() {
			vm.test = "3333";
			showData('vue实例销毁前', this);
		},
		destroyed: function() {
			showData('vue实例销毁后', this);
		}
	});
	function realDom() {
		console.log('真实dom结构：' + document.getElementById('app').innerHTML);
	}
	function showData(process, obj) {
		console.log(process);
		console.log('data 数据：' + obj.message)
		console.log('挂载的对象：')
		console.log(obj.$el)
		realDom();
		console.log('------------------')
		console.log('------------------')
	}
	//vm.message = "good...";
	vm.$destroy(); 
</script>

第四节：VueJs ajax

4.1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSON进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐axios。

vue-resource的github：http://github.com/pagekit/vue-resource

4.2 Axios

Axios是一个基于promise的http库，可以用在浏览器和node.js中

Axios的github：http://github.com/axios/axios

4.3 引入Axios

首先就是引入axios,如果你使用es6，只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.4 get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
	.then(function(response){
		console.log(response);
	})
	.catch(function(err){
		console.log(err);
	});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
	params:{
		ID:12345
	}
})
.then(function(response){
	console.log(response);
})
.catch(function(err){
	console.log(err);
});

4.5 post请求

axios.post('/user',{
	firstName:'Fred',
	lastName:'Flintstone'
})
.then(function(res){
	console.log(res);
})
.catch(function(err){
	console.log(err);
});

为方便起见，为所有支持的请求方法提供了别名：

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])