初识Vue（一）Vue概述、Vue的实现原理、Vue的开发方式、MVVM的开发模式以及Vue的基础使用 |
您所在的位置：网站首页 › mvvm框架的工作原理 › 初识Vue（一）Vue概述、Vue的实现原理、Vue的开发方式、MVVM的开发模式以及Vue的基础使用 |
初识Vue（一）Vue概述、Vue的实现原理、Vue的开发方式、MVVM的开发模式以及Vue的基础使用
|
前言
前端技术的发展过程
最早期：原生 DOM 配合 JS 实现对网页的操作； 发展：利用函数封装的技巧，把原生 DOM 封装成jQuery框架； 由于目前市场份额 被Vue抢占，目前使用较少，大多是旧项目维护 现在： 从2009年，出现了第一款工程化框架——Angual（Google公司）； 从2013年，出现了第二款框架——React（Facebook公司）； 从2014年，出现了国产框架——Vue（开源） 目前在国内占据了 大份额市场，并且比较适合初学者学习和使用。 一、Vue与jQuery对比核心思想的对比 jQuery思想：“write less,do more” 写的，做的多 利用函数封装的技巧，简化DOM操作的代码 Vue思想：“不写DOM操作，一样操作DOM” 二、Vue的的实现原理2.1 Vue实现原理（重点） Vue的实现原理：监听对象中属性的变化，当属性发生修改时，同步更新此元素相关的DOM元素。（数据发生变化时，自动更新属性） 下面是Vue实现原理的简易代码： var data={ msg:null }, Object.defineProperty(data,'msg',{ set(value){ clonsole.log('元素属性被赋值为：',value) //更新到 id=box 的元素里 box.innerHTML=value } }) //书写此代码，就可以自动更新 id=box 的内容 data.msg='Hello World!'简单来说：Vue的实现原理就是通过对象的 defineProperty 方法，监听这个对象中属性值的变化，当元素的属性发生变化时，在通过元素的 innerHTML 属性，将变化的值更新到元素中。 2.2 Vue的构造过程（了解） // 大概说明下: new Vue() 做了什么 function Vue(options) { // 源代码中: 固定读取 options.el this.$el = document.querySelector(options.el) // 源代码中固定读取: data属性名 for (let key in options.data) { // 遍历 data 对象的属性, 挨个保存到当前 vue对象里 this[key] = options.data[key] } for (let key in options.methods) { this[key] = options.methods[key] } } var a = new Vue({ // 为什么说是固定属性: el el: '#app', // 固定的data属性: 因为源代码中读取的是data data: { num: 4, name: '亮亮' }, methods: { add1() {}, add2() {}, }, }) console.log(a) 三、如何学习Vue呢？官方文档：API — Vue.js 由于Vue是国产的开源框架，所以他的官方文档中提供了大量的说明，并且都有讲解视频，便于我们的学习和使用，所有，在使用时可以多去参考一下官方文档。 四、Vue的版本Vue发展到现在，分为3个版本： vue1：已经淘汰了； vue2：目前的主流，并且比较适合新手入门学习； vue3：未来的趋势，后续会更新（和Vue2的差异不大）。 五、Vue的开发方式Vue的开发方式有两种： ①脚本方式；类似于jQuery，通过引入脚本 ——适合新手入门 脚本地址：安装 — Vue.js vue版本分为开发版和生产版，开发版(未压缩版)有完备的注释、代码格式，以及见名知意的变量名和极其友好的错误提示，可读性好，适合学习和开发之用，但是体积大，不适合生产环境快速下载运行。 生产版(压缩版)去掉了所有数值和代码格式，极简化了变量名，去掉了友好的错误提示，体积小，适合生产环境快速下载运行，但是可读性差，不适合学习和开发之用。 ②脚手架方式：高度自动化/高度工程化的方式 ——是实际开发中使用的 通过脚手架软件，去生成标准化的项目包 拥有固定的文件夹来存放不同功能的文件 拥有自己的服务器，有热更新功能 带有.vue文，对 vue 代码有更多支持 ——代码提示 六、MVVM的开发模式以往的前端代码分为三个部分：HTML(专门定义网页的内容和结构)、CSS(专门为网页添加样式)、js(专门操作网页中的内容，为页面添加交互行为)。 但是HTML和CSS功能太弱，即使很小的修改，都要通过JS来操作，导致js中存在大量重复和冗余的工作。所以为了解决此问题，就需要用到MVVM设计模式。 1.MVVM设计模式 MVVM设计模式是对前端三大代码的重新划分，包括三部分； （1）界面(View)：包含以前的HTML+CSS，让HTML也支持变量、判断、循环； （2）模型对象(Model)：专门保存页面中所需的变量和函数的特殊对象； data:{ } 专门保存界面中所需的所有变量 methods:{ } 专门保存界面中所需的所有函数 （3）视图模型(ViewModel)：专门负责将模型对象中的变量和函数，自动运送到界面中指定位置的特殊对象，自动将程序中的变量和函数运送到界面中所需的位置。并且还能自动保持界面显示与程序中的数据同步。 面试题：什么是MVVM！！！ 概念介绍 MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器） 1、 M：模型层，主要负责业务数据相关； 2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层； 3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；· 关系图
2.vue的绑定原理（vue框架如何实现MVVM设计模式） （1）访问器属性 a.new Vue()将data:{ }引入到new Vue()中时，先将data对象及其内部的内容全部隐藏； b.new Vue()自动为data中每个变量创建访问器属性，监视对每个变量的修改操作，访问器属性不再隶属于data对象，而是直接隶属于new Vue()； c.只要在程序中修改变量，都会自动调用访问器属性的set()函数； d.set()函数中提前安插了一个通知函数()，可通知外部哪个变量值发生了变化； e.methods中所有的函数，进入new Vue()后，methods对象就被打散，原methods中所有函数直接隶属于new Vue()对象； f.methods中的函数和data中的变量，最终会平级保存，都直接隶属于new Vue()，methods中的函数，想操作data中的变量，必须加this.。 （2）虚拟DOM树 是专门保存界面中所有可能发生变化的元素的简化版DOM树；在创建完data和methods之后，根据el属性值的选择器所指的元素，去扫描界面中指定区域的元素，一边扫描真实DOM树，一边创建虚拟DOM树，只保存可能发生变化的元素。 a.只要在程序中修改了变量值，就会自动触发访问器属性的set()，自动执行set()中的通知函数，通知函数()通知虚拟DOM树哪个变量发生了变化； b.虚拟DOM树扫描自己内部保存的所有可能发生变化的元素，只找出受本次变量修改影响的元素； c.可以用提前封装好的DOM操作，将变量的新值，自动修改回页面中显示。 小结（高频笔试面试）： vue绑定原理：访问器属性、虚拟DOM树； 虚拟DOM树四大优点： （1）内容少体积小：只保存可能变化的个别元素； （2）遍历查找快：保存的元素少，所以每次遍历查找受影响的元素时比遍历原始DOM树； （3）修改效率高：每次只修改受影响的个别元素，不受影响的元素是不改变； （4）避免重复编码：提前封装了DOM的增删改查+事件绑定操作。 七、Vue的使用1、Vue三步 （1）.做界面 1.1将界面中所有元素包裹在一个唯一的父元素下，通常用 id = app 的 div 的盒子作为父元素 1.2找到界面中将来可能随程序自动变化的位置，用{{ 变量名 }}来标记/占位； 1.3找到界面中将来可能触发事件的元素，用专门的语法：@事件名="事件处理函数名" 来标记。 （2）.创建一个new Vue()对象，用来监控div所包含的区域 var vm = new Vue({ //vue对象中，必须用el属性，指出new Vue()要监控的区域 el: "#app", })（3）.定义模型对象，来保存界面中所需的所有变量和事件处理函数 3.1创建一个data:{ }来保存界面中所需的所有变量和初始值； 3.2创建一个methods:{ }来保存界面中所需的所有事件处理函数； 注意： 模型对象就是专门替界面保存变量和事件处理函数的特殊的对象 methods中的事件处理函数中，如果要操作data中的变量，必须加this. 不用考虑如何从界面取值和如何将新值放回界面，只需考虑如何把data中的变量值修改正确。 2、插值语法 插值语法是 在界面中标记可能发生变化的元素内容的特殊语法，只要发现一个元素的内容可能随程序自动改变时，都要用插值语法来标记。 {{JS的代码范围}}{{ }}的原理和模板字符串中的${ }完全一样，可以放一切有返回值的合法的js变量或表达式如变量、三目、算术计算、访问数组元素、创建对象、调用函数；不能放分支、循环以及没有返回值的js表达式。 {}}---> 姓名：{{ename}} 年龄：{{age}} var a = new Vue({ el:'#app',//要管理的元素 //data：数据项（静态数据） data:{ ename:'喜羊羊', age:'12' }, //固定属性：methods 用于存放函数 methods:{}. //计算属性（使用的时候不能传值） computed:{} }) //通过打印输出可以看到：data中的数据项，会被自动添加 get/set 监听器，实现数据变化，更新DOM的效果 console.log(a)在数据渲染过程中，Vue会自动帮你为data中的属性做循环、遍历等操作，给每个元素添加赋值监听和赋值读取的操作。这样就能实现在数据变化时，{{}}中的值实时发生变化。 3、事件 3.1给他元素添加事件 在Vue2.0中，给元素添加事件使用的 @事件名='函数名' eg:@click='see'。 3.2 methods中，this的指向问题 一般来说：函数在执行，函数中的this指向是其执行时所在的对象， 但是在Vue中，函数中的this指向的是 new Vue() 得到的对象 Vue底层会把 methods 中的方法抽离出来，放在自身。 姓名：{{name}} 寻找this new Vue({ el: '#app', data: { name: '张三' }, methos: { // 语法糖 play() { alert('123') }, find() { console.log(this) //！！！ 切记： name虽然书写在data中，但是运行时是在Vue对象中 this.name='this指向了Vue' } } })3.3 综合案例——计算商品价格并且能够修改价格
|
【本文地址】
今日新闻 |
推荐新闻 |