Date-06-vue起步
1.Vue.js是什么
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js入门教程
前端三大马车: 1.Vue 2. Angular 3. React
2.MVX框架模式
MVX框架模式:MVC+MVP+MVVM
1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。
View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。
用户User通过控制器Controller来操作模板Model从而达到视图View的变化。
2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。
在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。
并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。
MVP模式的框架:Riot,js。
3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。
MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。
3.Vue.js起步练习
- 通过引入CDN后直接使用或者下载后使用(较为简单)
- 使用命令行工具CLI搭建脚手架去编写对应的内容
页面起步步骤:
1.引入图中的script代码,将Vue.js引入到我们的项目中并可以使用
4、通过以下代码体验Vue.js最核心的功能-数据的双向绑定 Vue的核心特性之一是双向的数据绑定,关于如何进行数据的绑定下面来介绍一下
文章图片
image 5、使用v-bind绑定data中的属性
文章图片
image 6.使用Vue.js的两种方式:
- 通过引入CDN后直接使用或者下载后使用(较为简单)
- 使用命令行工具CLI搭建脚手架去编写对应的内容
页面起步步骤:
1.引入图中的script代码,将Vue.js引入到我们的项目中并可以使用
文章图片
image 2.起步页面:
文章图片
image 注意点:
- data用于数据的存储,可以设置对应的数据,data的值也是一个对象,类型可以是字符串、number、对象、数组。
- 【Date-06-vue起步】el代表element,指需要获取的元素,一定是html中的根容器元素
推荐阅读
- 读书笔记|读书笔记 "起步时最重要的是什么"
- 在一家创业刚起步的公司实习的感受
- 读《读哲学起步》
- 0|0 -> 1 的起步
- 三读《稻盛和夫自传》《对立与决断》起步遇贵人相助
- 学习书法,一定要从楷书起步吗()
- 深度剖析(新店新品零起步到日销百单,你需要了解什么)
- flutter起步时遇到的坑
- 曝iPhone|曝iPhone 12内存升级到128GB起步!4880元能买到
- Vue起步