当前位置：首页 > news >正文

Vue简介及简单应用

news 来源：原创 2024/6/30 21:37:09

一、Vue简介

1、Vue介绍

官方说法：Vue是一个构建用户界面（UI）的渐进式JavaScript框架。并且颠覆了传统的MVC模式（js）使用了MVVM模型开发，它实现了前后端分离。

2、库和框架的区别

3、MVVM模型的介绍

二、Vue入门

1、首先我们需要在项目中导入Vue的依赖

2、定义边界、创建Vue实例、挂载边界

3、利用MVVM实现双向数据绑定

4、Vue事件(点击事件)：当点击获取输入框中的内容时，将会将输入框的内容提示出一个提示框，而提示框中的内容也会随着文本框中的内容改变而改变！（数据双向绑定）

三、Vue生命周期

今天来与大家分享一个热门的前端框架Vue

一、Vue简介

1、Vue介绍

官方说法：Vue是一个构建用户界面（UI）的渐进式JavaScript框架。并且颠覆了传统的MVC模式（js）使用了MVVM模型开发，它实现了前后端分离。

官方网址：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡

个人认为Vue是一个前端库，Vue包含了大量的特定函数，同时因为ElEmentUI是在Vue的基础上结合Html5所开发的一个前端框架，等于再一次封装了Vue。与基于JQuery开发的easyUI相似，JQuery作为库，easyUI作为前端框架。

2、库和框架的区别

2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

3、MVVM模型的介绍

MVVM一套更好UI的解决方案，MVVM通过数据双向绑定让数据自动地双向同步

M:Model模型 V:View视图 VM：视图模型虚拟Dom

不再需要程序员手动编写DOM节点（比如<input><table>）

二、Vue入门

我将通过案例来向大家讲解Vue入门

1、首先我们需要在项目中导入Vue的依赖

可以在官方中查找自己需要的版本并下载引入，也可以在CDN中查找（需要联网）

比如说在CDN，直接输入搜索需要的vue版本即可

<script                         src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

2、定义边界、创建Vue实例、挂载边界

定义边界即在Html中定义一个Vue所管理的区域，必须是根节点

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

同时 data中返回数据有三种方式

2.1、直接返回数据

data(){
					return{msg:'vue初步使用'}
				}

2.2、data返回json格式

data(){
					return{msg:json对象}
				}

2.3、通过方法返回数据

3、利用MVVM实现双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>

		</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el:'#app',
				data(){
					return{msg:'vue初步使用'}
				}
			})
		</script>
	</body>
</html>

4、Vue事件(点击事件)：当点击获取输入框中的内容时，将会将输入框的内容提示出一个提示框，而提示框中的内容也会随着文本框中的内容改变而改变！（数据双向绑定）

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