本文共 6322 字，大约阅读时间需要 21 分钟。

1.vue简介

目的:快速开发,简单

官网地址:https://cn.vuejs.org/

1-1.vue介绍

作者:尤雨溪

优点

• 易用

  • 只要会HTML.css.JavaScript就可以直接使用

• 灵活

  • 不断繁荣的生态系统(vue Router,vuex,服务端渲染)
  • 通过script连接一个vue.js库直接开发即可
  • 通过安装vue框架实现快速项目开发

• 高效

  • 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.首屏加载速度慢.```

缺点

• 不利于SEO优化
• 首屏加载速度慢,
• 不支持IE678

核心

• 数据驱动
• 组件化应用

案例

    
       
       
           
           
   
        
    
                 价格:
             
    
        
    
                 数量:
             
    
        
    
                 总和:{  {price*num}}        
    
    
   
    

1-2 引用方式

三种引用方式:1.2.直接下载vue.js3.npm i vue --save 或者 npm i vue -S(保存) 如果上面指令没有出现依赖包,需要初始化操作:npm init,其目的:产生package.json文件

• 使用vue方式

  • 1.引入vue.js2.产生作用域3.实例化vue

• 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的一些简单运算.        */

vue案例:

    
       
       
           
           
       
   
        
    
{  {name}}
        
    
{  {price}}万
        
    
{  {isShow}}
        
            
    
     {  {fruit}}
    
        
    
     {  {company.name}}
    
        
    
     {  {'品牌名称'+name}}
    
        
    
     {  {price.toFixed(2)}}
    
        
    
     {  {price > 100 ? 100 : price}}
    
        
    
     {  {fn()}}
    
        
    
     {  {fn1()}}
    
    
   
    
   
    
       

2.基本指令

2-1.非表单元素(div span p)

	优点	缺点	作用
{ {}}	方便书写	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

• {
  {}}

    
       
       
           
       
           
       
   
        
            
    
     {  {name}}
    
        
    {  {price}}        
    
{  {color}}
        
    
     {  {str}}
    
    
   
    

• v-html

• v-text

2-2.表单元素(input textarea)

• v-model双向数据绑定指令

• 设计模式

  • 设计模式:MVC,M(model)模型   V(view)视图 C(controller)控制器            vue采用的是:MVVM  M(model)模型  V(view)视图 VM(ViewModel)视图模型            模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.

    
       
       
           
           
       
   
        
            
            
            
            
    
     {  {name}}
    
    
   
    

2-3.媒体元素(img)

• v-bind

  • 1.v-bind指令:一般绑定的是属性2.书写形式: v-bind:属性名="data中的属性名"3. v-bind:简写形式:   :属性名="data中的属性名"

2-4. 条件判断

• v-if指令控制的是元素的显示和隐藏

    
       
       
           
               
       
   
        
           
    
     春花秋月何时了
    
       
    
     往事知多少
    
       
    
     小楼昨夜又东风
    
       
    
     2021牛转乾坤
    
       
    
     2021牛气冲天
    
       
    
       
    显示       
    隐藏       
    
    
   
    

• v-show控制着元素的显示和隐藏

    
       
       
           
               
       
   
        
          
    
     没有理所当然的成功,也没有毫无理由的平庸,2021我们的爆发时代
    
        
    
     南来北往
    
        
    
        
    显示       
    隐藏       
    
    
   
    

• v-if和v-show的区别

相同点:都是控制着元素的显示和隐藏不同点:当表达式的值为false,v-if采用的惰性模式,v-show通过样式中的属性display:none来控制在实际应用中:1.v-if:一般使用在页面一旦加载完成,几乎不再修改,可以使用2.v-show:使用在元素切换频率比较高的情况下(eg:选项卡切换)

2-5. v-for指令

• 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:对象的下标

    
       
       
           
               
       
   
        
            
    
            
     
{  {index}}==={  {item}}
        
    
        
    
        
            
    
            
     
{  {index}}==={  {item}}
        
    
        
            
    
        
    
            
     
{  {index}}==={  {item}}
        
    
    
   
    

2-6.v-once

• v-once

v-once:指当前元素和它的所有子集首次在页面显示完成之后,不会再进行修改

    
       
       
           
               
       
   
        
          
    
        
     
{  {num}}
      
    
      
    ++    
   
    

面试题

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/