目录
一.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&g