欢迎访问笔者个人技术博客： http://rukihuang.xyz/

一、Vue概述

1.1 介绍

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的快速入门

在script脚本区域，创建vue对象
声明el: "#[区域id]"，表示这块区域由vue接管。
声明data: {}，数据域
在body块，使用插值表达式，将data域中声明的变量插到{{变量名}}中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
        <!--引入vue.js-->
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}} <!-- //vue的插值表达式，把data中定义的数据显示到此处 -->
		</div>
	</body>
	<script>
	//view model
		//创建Vue对象
		new Vue({
			el: "#app",//由vue接管id为app区域
			data: {
				message: "hello, vue", //注意：此处不要加分号
			}
		});
		
	</script>
</html>

1.3.1 插值表达式

数据绑定的最常见形式用双大括号语法的文本插值，无论何时，vue对象中data数据发生改变，插值出的内容都会更新。
支持的表达式，如下：

<!-- 支持 三目运算符, 但不支持赋值语句-->
{{ok? "A":"B"}}

<!--数学运算-->
{{number + 1}}

赋值语句与流程控制语句都不会生效！

<!-- 插值表达式不支持变量的声明 -->
{{var a = 1 }}
<!-- 插值表达式不支持条件判断流程控制 -->
{{ if(ok) return message}}

二、Vue常用指令

2.1 v-on

用v-on指令鉴定DOM事件，并会触发javascript代码

2.1.1 v-on:click

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<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",
			data: {
				message: "hello vue"
			},
			methods: {
                fun1: function(message) {//fun1为button中的方法名，message为传的参
                    this.message = message;
                    //点击button后会触发方法，将data中的message改为传入的参数
                }
            }
		});
	</script>
</html>

2.1.2 v-on:keydown

我对event对象的理解：键盘按下，鼠标按下等，都称为一个“事件”，只有事件发生了，才会触发功能函数。
event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
注意点：
- 使用不带圆括号的形式，event 对象将被自动当做实参传入
- 使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象，如果不传入可能最终找到的是全局的window .event

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
            <!--键盘按下事件-->
            <!--使用不带圆括号的形式，event 对象将被自动当做实参传入；-->
            <!--使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。-->
			vue: <input type="text" v-on:keydown="fun($event)">
            <!--<input type="text" v-on:keydown="fun">-->
			<hr>
			传统Js: <input type="text" onkeydown="showKeyCode()">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			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对象 是一样的， 可以不定义直接使用
			//alert("success");

			var keyCode = event.keyCode;
			if(keyCode < 48 || keyCode > 57) {
				event.preventDefault();
			}
			// alert(keyCode);

		}
	</script>
</html>

2.1.3 v-on:mouseover

event.stopPropagation()阻止冒泡。

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div, #div2 {
				background-color: red;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<!--@mouseover等价于 v-on:mouseover
				@事件名称 就是 v-on:事件名称 的简写方式
			-->
			<div v-on:mouseover="fun1" id="div">
				<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
			</div>

			<div onmouseover="fun3" id="div2">
				<textarea onmouseover="fun4()">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			methods: {
				fun1: function () {
					alert("鼠标悬停在div上");
				},
				fun2: function (event) {
					alert("鼠标悬停在文件域上");
                    event.stopPropagation();//阻止冒泡
				}
			}
		});
		
        //传统js
		function fun3() {
			alert("鼠标移动到了传统div2上了");
		}

		function fun4() {
			alert("鼠标移动到了传统文件域上了");
			event.stopPropagation();
		}
	</script>

</html>

2.1.4 事件修饰符

vue为v-on提供了事件修饰符来处理DOM事件细节，如event.preventDefault()（通知浏览器不要执行与事件关联的默认动作）、event.stopPropagation()（不再派发事件）。
- .stop
- .prevent
- .capture
- .self
- .once

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<!--阻止事件执行行为 -->
			<form action="https://www.baidu.com/" method="post" v-on:submit.prevent>
				<input type="submit" value="提交">
			</form>

			<form action="https://www.baidu.com/" method="post" onsubmit="return checkForm()">
				<input type="submit" value="提交">
			</form>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app"
		});
		
		//传统Js方式
		function checkForm() {
			alert(1);
			//表单验证必须有一个明确的boolean类型返回值
			//在应用验证方法时必须加上 return 方法名称
            //return false表示表单验证不通过，action的url不会访问
			return false;
		}
		
	</script>

</html>

2.1.5 按键修饰符

vue允许v-on在监听事件时添加按键修饰符
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

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

补充v-on的完整写法和简易写法

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

2.2 v-text / v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-html="message"></div>
			<div v-text="message"></div>

			<div id="div1"></div>
			<div id="div2"></div>
		</div>
	</body>
	<script>
		//view model
		//vue接管这块区域
		new Vue({
			el: "#app",
			data: {
				message: "<h1>hello</h1>"
			}
		});

		//传统js的 innerHTML(能解析标签) 和 innerText（纯文本，不能解析标签）
		window.onload = function () {
			document.getElementById("div1").innerHTML="<h1>hello</h1>";
			document.getElementById("div2").innerText="<h1>hello</h1>";
		}

	</script>
</html>

2.3 v-bind

插值语法不能使用在html标签属性上，应使用v-bind指令

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html在v-bind上的使用</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<font size="5" v-bind:color="ys1" >hello</font>
			<font size="5" :color="ys2" >hello</font>
		</div>
	</body>
	<script>
		//view model
		//插值表达式不能用于html标签的属性取值
		//若想给html标签的属性设置变量的值，需要使用v-bind
		//v-bind简化写法， 直接使用:
		new Vue({
			el: "#app",
			data: {
				ys1: "red",
				ys2: "green"
			}
		});
		
	</script>
</html>

补充v-bind的完整写法和简易写法

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

2.4 v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<form action="" method="post">
				用户名：<input type="text" name="username" v-model="user.username">
				密码：<input type="text" name="password" v-model="user.password">
			</form>
								
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			data: {
				user: {
					username: "test",
					password: "1234"
				}

			}
		});
	</script>
</html>

2.5 v-for

2.5.1 操作数组

<li v-for="item in arr">{{item}}</li>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历数组</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			data: {
				arr: [1,2,3,4,5]
			}
		});
		
	</script>
</html>

2.5.2 操作对象

<li v-for="(key, value) in product"> {{key}} === {{value}}</li>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(key, value) in product"> {{key}} === {{value}}</li>
			</ul>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				product: {
					id: "1",
					name: "电脑",
					price: 2000

				}
			}
		});
		
	</script>
</html>

2.5.3 操作对象数组

<tr v-for="(item, index) in products">

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(item, index) in products">
					<td>{{index}}</td>
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
				</tr>
				
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			data: {
				products: [
					{id: 1, name: "电脑", price: 5000},
					{id: 2, name: "手机", price: 3000},
					{id: 3, name: "电视", price: 4000},
				]
			}
		});
	</script>
</html>

2.6 v-if / v-show

v-if：根据表达式的值决定是否渲染元素（决定有还是没有）
v-show：根据表达式的值切换display属性（已有，决定show还是none）

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="flag">hello</span>
			<span v-show="flag">halo</span><br>
			<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>
</html>

三、Vue生命周期

每个Vue对象在被创建之前都要经过一系列的初始化过程。

在这里插入图片描述

具体生命状态

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<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>
</html>

四、Vue的ajax请求

4.1 axios

引入axios，可以通过script

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

4.1.1 get请求

const axios = require('axios');

// Make a request for a user with a given ID
// 通过给定的id来发送请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Optionally the request above could also be done as
// 也可以通过json格式 {params: {key: value}}
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

4.1.2 post请求

//以json格式传入参数
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

文泽路小男孩

发布了116 篇原创文章 · 获赞 105 · 访问量 7072

私信关注

前端框架 — Vue_01（概述、常用指令_v-on_v-text/v-html_v-bind_v-model_v-if/v-show、Vue的声明周期）

文章目录

一、Vue概述

1.1 介绍

1.2 MVVM模式

1.3 Vue的快速入门

1.3.1 插值表达式

二、Vue常用指令

2.1 v-on

2.1.1 v-on:click

2.1.2 v-on:keydown

2.1.3 v-on:mouseover

2.1.4 事件修饰符

2.1.5 按键修饰符

2.2 v-text / v-html

2.3 v-bind

2.4 v-model

2.5 v-for

2.5.1 操作数组

2.5.2 操作对象

2.5.3 操作对象数组

2.6 v-if / v-show

三、Vue生命周期

四、Vue的ajax请求

4.1 axios

4.1.1 get请求

4.1.2 post请求

猜你喜欢