Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
在开始学习Vue时，我们必须了解MVC与MVVM模式。
MVC模式. - 其实就是把代码进行了一次分类,按照功能职责分为:
M:model,模型, 指的是一段代码,这段代码负责读取数据库,返回数据
V:view , 视图 ,指的也是一段代码,一般指html+css+js 负责页面前端显示效果的
C:controller , 控制器 , 一段控制读取模型控制视图的代码 , 一般指负责业务逻辑流程代码
MVVM模式:核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定
M:model,模型,
V:view , 视图
MV:结合了M和V
Vue.js就是MVVM模式
数据双向绑定实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
</head>
<body>
<div id="app">
<input type="text" v-model="txt" />
<!--
4: input的 v-model 可以实现: 默认读取data里面的txt数据,
然后input的值发生改变时, 会同步更改 data里面的txt
称之为数据的双向绑定
-->
{{txt}} <!-- 2:在页面中某个地方读取data里面的txt -->
<button id="btn">点击我改变data里面的txt</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
var v = new Vue({//先声明一个实例
el: '#app',
data: {
txt: '我是实例v里面自带的数据' //1:实例v自带有数据txt
}
})
//概念:数据双向绑定:
// 3: 当 data里面的txt发生改变,那么之前所有读取这个txt的地方,都会同步改变
// 到了第3,这种现象称之为数据单向绑定
document.getElementById('btn').onclick = function() {
v.txt = '我是点击更新的数据'
}
var num = 0;
setInterval(function() {
num++;
v.txt = num; //可以看出,虽然改变的是v.txt, 上面所有引用都会同步改变
},3000)
</script>
</html>