Vue-入门(一)
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>