Vue 简介

发布于:2022-12-05 ⋅ 阅读:(1219) ⋅ 点赞:(0)

 GitHub账号 :http://github.com/yyx990803

 官方入门 :https://cn.vuejs.org/

vue 2.0API 文档 https://cn.vuejs.org/v2/guide/

vue 3.0APl 文档 :https://www.vue3js.cn/docs/zh/

GitHub 库 :https://github.com/vuejs/vue

2.1 什么是Vue(官方给出的概念:Vue是一套用于构建用户界面的前端框架)

1.构建用户界面

(1)用vue往页面中填充数据 非常的方便

2.框架

(1)框架是一套现成的解决方案 程序员只能遵守框架的规范 去编写自己的业务功能!

(2)要学习Vue 就是在学vue 框架中规定的用法

(3)vue的指令 组件 (是对UI结构的复用) 路由 Vuex vue组件库

只有把上面罗列的内容掌握以后 才有开发Vue 项目的的能力 !

2.2 vue框架的特性 主要体现如下两方面:

(1)数据驱动视图(数据的变化会驱动视图的更新)

①在使用了Vue的页面中 vue会监听数据的变化 从而自动重新渲染页面的结构 示意图如下:

好处:当页面数据发生变化时 页面会自动重新渲染(自动更新)

程序员只管把数据维护好 那么页面结构会被vue自动渲染出来

注意:数据驱动视图是单项数据绑定

(2)双向数据绑定

**在网页中,form表单 负责采集数据 ,Ajax负责提交数据**

   页面上表单采集发数据发生变化是 会被vue自动获取到 并更新到js数据中

①在填写表单时 双向数据绑定可以赋值开发者在不操作 DOM的前提下 自动把用户填写内容同步到数据源中 示意图如下:

好处:开发者不再需要动手操作DOM元素 来获取表单元素的最新的值

2.3 MVVM

1.MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model View 和

   ViewModel 它把每个 HTML 页面拆分成了这三个部分,如图所示:

2.4 MVVM 的工作原理:

注意:数据驱动视图和双向数据绑定的底层原理 MVVM (Mode 数据源,View 视图,ViewModel就是vue的实例

工作原理如图:

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到