震惊，Vue入门只需三分钟！

原创已于 2023-07-17 23:33:41 修改 · 218 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-07-17 23:19:05 首次发布

Vue是一个由尤雨溪创建的JavaScript框架，用于构建可扩展的Web应用。它采用响应式编程，支持MVVM模式的双向数据绑定。Vue可以与现代工具链集成，并有Vue2和Vue3两个主要版本。文章介绍了如何通过CDN引入Vue，创建根实例，以及MVVM的数据绑定、点击事件处理和Vue的生命周期及其钩子函数。

前言

1.概述：

Vue 是一个 JavaScript 框架，旨在帮助开发人员构建可扩展的 Web 应用程序。Vue 由尤雨溪（Evan You）开发，首次发布于2014年。它采用了一种类似于响应式编程的方法，允许我们通过声明式渲染数据来构建用户界面。

Vue 可以与其他库或框架结合使用，例如 React 或 AngularJS。它还可以与现代工具链和构建工具进行集成，例如 Webpack 或 Gulp，使其更加灵活和可扩展。

2.特点：

Vue通过MVVM模式,能够实现视图与模型的双向绑定。

简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

3.版本：

Vue2于2023年12月30号停止维护，Vue3将会成为主流。

4.入门：

使用CDN方法:

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ，（国内不稳定）
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
引入vue.js
创建一个vue根实例 new Vue({选项})

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js -->
	</head>
	<body>
	<!-- 定义边界 -->
		<div id="app">
			<h3>{{msg}}</h3>
			{{msg}}
		</div>
		{{msg}}
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'vue'};
			}
		})
	</script>
</html>

那么恭喜你，你已经了解什么是Vue并且知道怎么使用它了。

5：MVVM数据绑定

1.定义边界

2.创建vue实例

3.挂载边界，定义变量

4.使用指令v-model，v-bind(或者为“:”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
            <input type="text" :value="msg" />
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'hello vue'};
			}
		})
	</script>
</html>

v-model是双向绑定，input内value的值与数据data内msg变量的值保持一致，v-bind是单向绑定，改变input内value的值，不会改变数据data内msg变量的值。
6：使用vue做一个点击事件demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
			<button v-on:click="getMsg">获取输入框内容</button>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'hello vue',n:1};
			},
			methods:{
				getMsg(){
					alert(this.msg);
				}
			}
			
		})
	</script>
</html>

以上代码，能实现点击弹窗事件，弹窗内容与输入框内容一致，是不是很简单？

7：vue的生命周期

请看图：

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

8：钩子函数时间触发

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

入门Vue是不是很简单？

标签

#vue.js #javascript #typescript