vue入门

最新推荐文章于 2023-05-28 18:29:45 发布

be honoured.IT

最新推荐文章于 2023-05-28 18:29:45 发布

阅读量438

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53601862/article/details/121047987

版权

一.vue简介

1、什么是vue？

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

2、vue是一种库还是框架？

vue其实是一种库，在之前我们用的是库是jquery，而之前的框架用的都是easyui，而现在都是用的是vue作为库，框架用的是elementui，模式从之前的MVC模式变成了MVVM模式。

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

MVVM，也就是model（模型层）、view（视图层)、以及Vue自带的ViewModel(视图模型层)。model为数据层，view为显示层，这点和原先的MVP的MV相同，区别是MVVM模式只需要把编码重点放在model层和view层，比原先的MVP模式至少省下30%编码量，甚至能省下70%DOM操作，因为用MVP模式的话主要是在进行DOM操作。

4、关于库和框架：

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

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

二.vue入门

1.vue入门

运行vue的第一步，首先需要导入vue的依赖（https://www.bootcdn.cn/https://www.bootcdn.cn/）

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

案例：

在html中我们首先要定义一个边界，将msg装载在其中，然后绑定边界。

<!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>
		</div>
	</body>
	<

最低0.47元/天解锁文章

be honoured.IT

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue入门

一.vue简介 1、什么是vue？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架， 2、vue是一种库还是框架？ vue其实是一种库，在之前我们用的是库是jquery，而之前的框架用的都是easyui，而现在都是用的是vue作为库，框架用的是elementui，模式从之前的MVC模式变成了MVVM模式。 3、MVVM模式：一种更好的UI模式解决方案，M...
复制链接

扫一扫