本文共 15826 字，大约阅读时间需要 52 分钟。
目的:快速开发,简单
官网地址:https://cn.vuejs.org/
作者:尤雨溪
易用
灵活
高效
20kB min+gzip 运行大小
超快虚拟 DOM
浏览器解析一个网页的步骤:1.解析HTML,生成HTML树,2.解析 css,生成css树,3.HTML和css结合,4.形成坐标点5.渲染页面一旦要修改元素,需要执行以上5个步骤,如果需要修改10个元素,那么需要执行以上10次5个步骤.结果:浏览器的性能降低虚拟dom(virtual dom)虚拟dom其实就是一个js对象(Object)如果有元素需要修改,通过虚拟DOM进行修改,将虚拟dom和真实dom进行对比,将产生差异的部分,进行统一修改即可.例如:如果需要修改10个元素,通过虚拟DOM进行修改,将虚拟dom和真实dom进行对比,将产生差异的部分,进行统一修改(只主要执行一次以上5个步骤)差异:js解析js要比浏览器解析js快的多,最省心的优化
css的属性tranform(对元素进行2D或者3D的转换),在使用时针对不同的;浏览器需要加前缀:-webkit -moz -o -ms如果使用了vue之后,以上前缀统一没有了.渐进式JavaScript框架
渐进式JavaScript框架(主张少)
自底向上逐层应用
装修新房 按照自己的设计风格装修即可(主张少)
二手房 装修好了,直接入住,但是如果你想安装自己的设计风格装修,需要先拆在重新装修.(强主张)
单页面应用(SPA)
SPA(single page application)原生页面:http://www.ujiuye.com/index.html
单页面:https://es6.ruanyifeng.com/#docs/set-map
原生页面:实现页面之间跳转,就是真实的页面跳转(N个.html)单页面:实现页面跳转,通过路由实现.优点: 1.用于体验更优,用户跳转页面时,基本通过ajax请求数据 2.做前后端分离.后端提供http协议接口,前端通过ajax请求数据. 缺点: 1.不利于SEO优化.因为使用单页面应用之后,所有的资源文件(eg:css,js,img)统一放在一个文件中,一旦文件非常大时,页面加载速度会变得非常慢. 2.首屏加载速度慢.```案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app"> <div> 价格:<input v-model="price"> </div> <div> 数量:<input v-model="num"> </div> <div> 总和:{ {price*num}} </div> </div> <script> new Vue({ el:'#app', data:{ price:100, num:1 } }) </script></body></html>三种引用方式:1.<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.直接下载vue.js3.npm i vue --save 或者 npm i vue -S(保存) 如果上面指令没有出现依赖包,需要初始化操作:npm init,其目的:产生package.json文件使用vue方式
1.引入vue.js2.产生作用域3.实例化vuevue实例中的相关注意事项
/** * 1.实例化vue时,需要传递一个参数:json * 2.参数json中的选项时固定:el,data,methods, * 3.data中的数据显示在页面中,一般通过{ {data属性名}}显示 * 4.一个vue实例只能作用在一个根元素节点上. * 5.所有的css样式选择器都可以作用在vue实例上,但是通常使用id选择器. * 6.不能将vue挂载(mount)到html或者body, * 7.双大括号{ {}}中可以操作js的一些简单运算. */vue案例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入vue.js --> <script src="./vue.js"></script></head><body> <!-- 2.作用域 --> <div id="app"> <h2>{ {name}}</h2> <p>{ {price}}万</p> <p>{ {isShow}}</p> <!-- <p>undefined:{ {str}}</p> <p>null:{ {str1}}</p> --> <div>{ {fruit}}</div> <div>{ {company.name}}</div> <div>{ {'品牌名称'+name}}</div> <div>{ {price.toFixed(2)}}</div> <div>{ {price > 100 ? 100 : price}}</div> <div>{ {fn()}}</div> <div>{ {fn1()}}</div> </div> <hr> <!-- <div class="app"> <h2>{ {name}}</h2> </div> --> <script> // 3.实例化vue /** * 1.实例化vue时,需要传递一个参数:json * 2.参数json中的选项时固定:el,data,methods, * 3.data中的数据显示在页面中,一般通过{ {data属性名}}显示 * 4.一个vue实例只能作用在一个根元素节点上. * 5.所有的css样式选择器都可以作用在vue实例上,但是通常使用id选择器. * 6.不能将vue挂载(mount)到html或者body, * 7.双大括号{ {}}中可以操作js的一些简单运算. */ new Vue({ el:'#app',//element(元素),当前vue实例作用在某个元素上 data:{ //属性(变量) name:'宝马X6', price:60.00, isShow:true, // str:undefined, // str1:null, fruit:['草莓','西瓜','菠萝'], company:{ name:'优就业', url:'http://www.ujiuye.com', people:40000 } }, methods:{ // 方法 // 第一种定义 fn:function(){ alert('弹出来') }, // 第二种定义 fn1(){ alert('弹回去') } } }) </script></body></html>| 优点 | 缺点 | 作用 | |
|---|---|---|---|
| { {}} | 方便书写 | 1.不能解析data中属性值中的标签2.出现闪屏问题 | 插值表达式 |
| v-html | 解析data属性值的标签 | 富文本 | |
| v-text | 不会出现闪屏问题 | 不能解析data中属性值中的标签 | 展示内容 |
解决闪屏问题:通过指令v-cloak实现:v-cloak绑定在作用于vue实例的标签上,当vue.js没有加载完成时,设置[v-cloak]的样式为:diplay:none,当vue.js加载完成后,将[v-cloak]作用的元素样式改为:display:block{ {}}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入 --> <!-- <script src="./vue.js"></script> --> <style> [v-cloak]{ display: none; } </style></head><body> <!-- 2.作用域 --> <div id="app" v-cloak> <!-- 1.{ {}}不能解析data中属性值中的标签 2.当vue.js没有加载出来时,页面中显示{ {}}一类的数据,不利于用户体验 3.解决闪屏问题: --> <div>{ {name}}</div> <span>{ {price}}</span> <p>{ {color}}</p> <div>{ {str}}</div> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ //属性 name:'凯迪拉克', price:30.00, color:'pink', str:'<mark>坐在凯迪拉克里烫火锅</mark>' } }) </script></body></html>v-html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入 --> <!-- <script src="./vue.js"></script> --></head><body> <!-- 2.作用域 --> <div id="app"> <!-- 1.v-html写在标签中,当做属性展示 2.v-html的值是data的属性名 3.标签中的内容不再浏览器体现. 4.v-html可以解析data中属性值中的标签 5.当vue.js没有加载出来时,页面中不展示任何数据 --> <div v-html="name"></div> <span v-html="price"></span> <p v-html="color"></p> <div v-html="str"></div> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ //属性 name:'凯迪拉克', price:30.00, color:'pink', str:'<mark>坐在凯迪拉克里烫火锅</mark>' } }) </script></body></html>v-text<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入 --> <!-- <script src="./vue.js"></script> --></head><body> <!-- 2.作用域 --> <div id="app"> <!-- 1.v-text写在标签中,当做属性展示 2.v-text的值是data的属性名 3.标签中的内容不再浏览器体现. 4.v-text不能解析data中属性值中的标签 5.当vue.js没有加载出来时,页面中不展示任何数据 --> <div v-text="name"></div> <span v-text="price"></span> <p v-text="color"></p> <div v-text="str"></div> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ //属性 name:'凯迪拉克', price:30.00, color:'pink', str:'<mark>坐在凯迪拉克里烫火锅</mark>' } }) </script></body></html>v-model双向数据绑定指令
设计模式
设计模式:MVC,M(model)模型 V(view)视图 C(controller)控制器 vue采用的是:MVVM M(model)模型 V(view)视图 VM(ViewModel)视图模型 模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入--> <script src="./vue.js"></script></head><body> <!-- 2.作用域 --> <div id="app"> <!-- 1.v-model的值是data的属性名 2.input框的值是data的属性名对应的值,value属性在这里不起任何作用 --> <!-- 双向数据绑定 --> <!-- 设计模式:MVC,M(model)模型 V(view)视图 C(controller)控制器 vue采用的是:MVVM M(model)模型 V(view)视图 VM(ViewModel)视图模型 模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用. --> <input type="text" v-model="name" value="haha"> <div>{ {name}}</div> </div> <script> // 实例化vue new Vue({ el:'#app', data:{ name:'Vue' } }) </script></body></html>v-bind
1.v-bind指令:一般绑定的是属性2.书写形式: v-bind:属性名="data中的属性名"3. v-bind:简写形式: :属性名="data中的属性名"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入--> <script src="./vue.js"></script></head><body> <!-- 2.作用域 --> <div id="app"> <!-- 静态数据展示 --> <img src="http://www.ujiuye.com/statics/images/newzhu_images/logo.png" alt=""> <hr> <!-- 动态数据展示 --> <!-- 1.v-bind指令:一般绑定的是属性 2.书写形式: v-bind:属性名="data中的属性名" --> <img v-bind:src="url" alt=""> <hr> <a v-bind:href="company.url"> <img v-bind:src="company.logo" alt="" v-bind:title="company.name"> </a> <hr> <!-- v-bind:简写形式: :属性名="data中的属性名" --> <a :href="company.url"> <img :src="company.logo" alt="" :title="company.name"> </a> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ url:'http://www.ujiuye.com/statics/images/newzhu_images/logo.png', company:{ name:'优就业', logo:'http://www.ujiuye.com/statics/images/newzhu_images/logo.png', url:'http://www.ujiuye.com' } } }) </script></body></html>v-if指令控制的是元素的显示和隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入--> <script src="./vue.js"></script> <style> .box{ width: 100px; height: 100px; background: pink; } </style></head><body> <!-- 2.作用域 --> <div id="app"> <!-- 1.v-if:如果表达式为真,即显示元素.如果表达式为假,即元素消失 2.v-if指令控制的是元素的显示和隐藏 --> <div v-if="true">春花秋月何时了</div> <div v-if="false">往事知多少</div> <div v-if="1">小楼昨夜又东风</div> <div v-if="0">2021牛转乾坤</div> <div v-if="1!==1">2021牛气冲天</div> <hr> <button @click="show()">显示</button> <button @click="hide()">隐藏</button> <div class="box" v-if="isShow"></div> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ isShow:true, }, methods:{ show(){ this.isShow = true; }, hide(){ this.isShow = false; } } }) </script></body></html>v-show控制着元素的显示和隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入--> <script src="./vue.js"></script> <style> .box{ width: 100px; height: 100px; background: pink; } </style></head><body> <!-- 2.作用域 --> <div id="app"> <!-- 1.v-show控制着元素的显示和隐藏 --> <div v-show="true">没有理所当然的成功,也没有毫无理由的平庸,2021我们的爆发时代</div> <div v-show="false">南来北往</div> <hr> <button @click="show()">显示</button> <button @click="hide()">隐藏</button> <div class="box" v-show="isShow"></div> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ isShow:false }, methods:{ show(){ this.isShow = true; }, hide(){ this.isShow = false; } } }) </script></body></html>v-if和v-show的区别相同点:都是控制着元素的显示和隐藏不同点:当表达式的值为false,v-if采用的惰性模式,v-show通过样式中的属性display:none来控制在实际应用中:1.v-if:一般使用在页面一旦加载完成,几乎不再修改,可以使用2.v-show:使用在元素切换频率比较高的情况下(eg:选项卡切换)v-for做数组的遍历1.遍历数组2.遍历数值3.遍历字符串4.遍历对象用法
数组:v-for="(item,index) in 数组名称"v-for="(item,index) of 数组名称" item:指数组的每一项 index:指数组下标对象:v-for="(item,key,index) in 对象名称" item:指对象中的每一项值 key:对象的键 index:对象的下标 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入--> <script src="./vue.js"></script> </head><body> <!-- 2.作用域 --> <div id="app"> <!-- 遍历数组 --> <ul> <li v-for="(item,index) in arr">{ {index}}==={ {item}}</li> </ul> <hr> <!-- 遍历数值 --> <ul> <li v-for="(item,index) in 10">{ {index}}==={ {item}}</li> </ul> <!-- 遍历字符串 --> <hr> <ul> <li v-for="(item,index) of 'hello'">{ {index}}==={ {item}}</li> </ul> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ arr:['宝马','奥迪','奔驰','宾利'] }, }) </script></body></html>v-oncev-once:指当前元素和它的所有子集首次在页面显示完成之后,不会再进行修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.引入--> <script src="./vue.js"></script> </head><body> <!-- 2.作用域 --> <div id="app"> <!-- v-once:指当前元素和它的所有子级首次在页面显示完成之后,不会再进行修改, --> <div v-once> <p>{ {num}}</p> </div> <button @click="add()">++</button> </div> <script> // 3.实例化vue new Vue({ el:'#app', data:{ num:30 }, methods:{ add(){ this.num++; console.log(this.num); } } }) </script></body></html>1.为什么要选vue？与其它框架对比的优势和劣势？ vue: 优点 1.双向数据绑定 | 2.组件化开发 | 3.采用virtual DOM | 4.轻量高效 | 5.动画系统 Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。 缺点 1.不支持IE8及以下版本 | 2.生态不太成熟,例如编辑器中的语法提示不太完善 | 3.社区无法与angular和react相比 angular: 相同点: 1.都支持指令,内置指令和自定义指令 | 2.都支持过滤器,内置过滤器和自定义过滤器 | 3.都支持双向数据绑定, | 4.都不支持低端浏览器 不同点: 1.Angular的学习成本较高,二vue.js本提供的api就比较简单.直观. 2.从性能上来说: AngularJS依赖对数据做脏检查.Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。 react: 相同点: 1.react采用特殊的jsx语法,vue进行组件化编写,采用.vue特殊文件格式,两者都需用编译后使用. 2.中心思想相同:都是组件化开发,组件实例之间可进行嵌套 3.都提供了合理的钩子函数,可让开发者定制化的处理需求 4.都没有内置ajax,Route等核心包,而是以插件的方式加载. 不同点: 1.React采用的Virtual DOM会对渲染出来的结果做脏检查 2.Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。react没有2.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？ MVVM是Model-View-ViewModel的简写。 Model:模型 View:视图 ViewModel:视图模型,连接view和model的桥梁 MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。 转载地址：http://mtse.baihongyu.com/