Vue入门

最新推荐文章于 2023-06-09 14:30:02 发布

白未

最新推荐文章于 2023-06-09 14:30:02 发布

阅读量76

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yzq102873/article/details/126645569

版权

一、Vue简介

1. Vue.js是什么？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

官网：https://cn.vuejs.org/

Vue作者：尤雨溪/中国无锡

前后端分离 React

2. 库和框架的区别

2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

代表：jQuery

jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

代表：vue

框架规定了自己的编程方式，是一套完整的解决方案

使用框架的时候，由框架控制一切，我们只需要按照规则写代码

框架的侵入性很高(从头到尾)

3. MVVM的介绍

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

相比较于mvc更加便捷；

MVVM ===> M / V / VM

M：model数据模型

V：view视图

VM：ViewModel 视图模型虚拟dom

V（修改数据） -> M

M（修改数据） -> V

数据是核心

easyui=jquery+html4

treenodes=

{

id:1

text:后勤管理

children：【

】

}

解析成json对象

将json对象进行遍历

for node in treenodes.children

渲染菜单的功能是操作左侧页面的dom节点

注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型

注2：学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

二、Vue入门

1、导入js依赖

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

2、定义vue所管理边界

<div id="app">
	<!-- 定义边界 -->
</div>

3、创建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">
			<!-- 定义边界 -->
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				//设置vue所管理的边界可以使用的变量
				return{
					msg:'666'
				};
			}
		})
	</script>
</html>

4、测试

5、数据双休绑定

<!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">
			<!-- 数据双向绑定 -->
			<input v-model="msg" />
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				//设置vue所管理的边界可以使用的变量
				return{
					msg:'666'
				};
			}
		})
	</script>
</html>

注：在定义边界外面不受影响

三、vue事件

1、第一种

<!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">
			<!-- 弹出输入框的值 -->
			<input v-model="msg" />
			<button v-on:click="send()">打印</button>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				//设置vue所管理的边界可以使用的变量
				return{
					msg:'666'
				};
			},
			methods:{
				send(){
					alert(this.msg);
				}
			}
		})
	</script>
</html>

2、第二种

<!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">
			<!-- 弹出输入框的值 -->
			<input v-model="msg" />
			<button @click="send()">打印</button>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				//设置vue所管理的边界可以使用的变量
				return{
					msg:'666'
				};
			},
			methods:{
				send(){
					alert(this.msg);
				}
			}
		})
	</script>
</html>

四、vue的生命周期

1、所有的钩子函数有哪些

beforeCreate

created

beforeMount

beforeUpdate

Updated

beforeDestory