Vue.js复习

 一、vue.js的基本使用 

1.首先导入vue.js

在script中导入vue.js

2. 准备好界面

3.实例化一个vue，并且将这个界面交给vue管理。

el属性：找到某个盒子，并把他交给vue管理。

data属性：vue里放数据的地方。

二、插值语法

语法：{{ 表达式 }}

表达式：变量名或任意表达式；算数表达式，比较表达式，逻辑表达式，三元表达式...

作用：输出表达式的结果

注意：不能写语句（分支语句、循环语句）

补充：插值语法，也被叫做胡子语法 

三、Vue的生命周期

 1、什么是Vue的生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期

2、生命周期和生命周期钩子的关系

生命周期钩子 = 生命周期函数 = 生命周期事件

3、主要的生命周期函数分类：

  1.创建期间的生命周期函数：

    1.beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

    2.created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板

    3.beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中

    4.mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

  2.运行期间的生命周期函数：

    5.beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点

    6.updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

  3.销毁期间的生命周期函数：

  7.beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

  8.destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

实例：

打印结果如下：

 

四.Vue.js中的挂载

1.定义：虚拟DOM与真实DOM建立关系，让Vue实例控制页面中某个区域的过程，称之为挂载。

2.方式：通过“ el：‘css选择器’ ”语句进行配置。

3.过程： 虚拟DOM，即一堆对象存储了一堆数据，然后这些数据用JS的API，比如createElement，创造出DOM，这个过程是挂载前的动作。

创造出的DOM还没有被使用，仅仅在内存中，需要“挂载”。 当最外层有一个叫app的id的DOM，挂载就是document.querySelector(“app”).appendChild(dom)，即完成挂载。

【虚拟DOM】

1.虚拟DOM是为了解决浏览器性能问题而被设计出来的。

2.虚拟DOM，用普通JS对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。

五、条件渲染语句v-if和v-show

 1、v-if

1.在vue中，“v-if”用于根据表达式的真假来操作DOM元素，可以切换元素的显示和隐藏；表达式的值为true时，元素存在于dom树中，表达式为false时，元素从dom树中移除，语法为“v-if="表达式"”。

2.v-if的使用

2、v-show

1.w-show指令的作用是根据真假切换元素的显示状态，原理是修改元素的display实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为true元素显示,值为false元素隐，数据改变之后，对应元素的显示状态会同步更新

2.v-show的使用

点击切换状态 显示/隐藏

3、v-if和v-show的区别

【v-show】

    1.本质就是标签display设置为none,控制隐藏。只是基于css进行切换。

    2.v-show有更高的初始渲染消耗。

    3.v-show适合频繁切换的情况。

 【v-if】

    1.动态的向DOM树内添加或者删除DOM元素。

    2.v-if有更高的切换消耗。

    3.v-if适合运行条件很少改变的情况。

true

 false

六、列表演染指令v-for

        使用 v-for 指令把数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组， item 是数组元素迭代的别名

1、v-for遍历数组

2、v-for遍历对象

3、v-for遍历数字

4、v-for中的key

现象:当我勾了小红,然后在下标1的位置添加了赵六,结果发现勾给了赵六,小红自己没勾了。

        原因:v-for会尝试最大限度的复用当前元素，导致状态绑定错乱。

        解决:在v-for后加上一个key属性,key绑定这个数据的唯一值(一般是id,不能是字符串和数字类型)。

七、计算属性和侦听器

1、计算属性

        可以在里面写一些计算逻辑的属性。

        他不像普通函数那样直接返回结果,而是经过一系列计算之后再返回结果。

        同时只要在它当中应用了data中的某个属性，当这个属性发生变化时,计算属性可以嗅探到这种变化,并自动执行

        定义:要用的属性不存在,通过已有属性计算得来。

        使用:在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果。

【基本结构】

 计算属性的基本使用

 

2、侦听器

 1.侦听器的基本结构

2.侦听器的基本使用

    

        修改msg的值
        
{{ msg }}
    

    

    

3.侦听器在数组中的使用

    

        

            

                {{item}}
            
        
        添加一个项
        删除一个项
    

    

    
    

 

    
    

        添加一个项
        删除一个项
        
        修改第一项
        第二项添加
        

            

                {{ item }}
            
        
    
    
    

 

 4.侦听器的完整写法

    
    

        
{{ obj.name }} --- {{ obj.age }} --- {{ obj.height }}
        修改obj的name属性
        修改obj的age属性
        修改obj的指向
    

    

    

八、缓存数据

 存储方式

1、cookie

   一:使用场景:

     1:记住密码,下次自动登录。

     2:记录用户浏览数据,进行商品(广告)推荐。

 二:特点:

     1:cookie保存在浏览器端。

     2:单个cookie保存的数据不能超过4KB。

     3:cookie中的数据是以域名的形式进行区分的。

     4:cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

     5:cookie中的数据会随着请求被自动发送到服务器端。

  三:

    由于cookie存储机制有很多缺点，HTML5不再使用它,转而使用改良后的WebStorage存储机制。

    (localStorage和sessionStorage)

2、sessionStorage

    1.SessionStorage是生命周期

    2.SessionStorage是生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了那么所有通过Session存储的数据也清空了

    3.以键值对的形式存储使用。

//存储数据:

sessionStorage.setltem(key,value)

//获取数据:
sessionStorage.getltem(key)

//删除数据:

sessionStorage.removeltem(key)

//删除所有数据:
sessionStorage.clear()

3、localStorage

  1.什么是localstorage

        在HTML5中,新加入了一个localstorage特性,这个特性主要用来作为本地存储来使用。

        它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localstorage一般为5M。

  2.localStorage的生命周期

        LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,

        否则这些信息将永久存在。

   3.localstorage的局限

        a.在IE8以上的IE版本才支持localstorage这个属性。

        b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，

          对我们日常比较常见的JSON对象类型需要一个转换。

// 4.判断浏览器是否支持localstorage这个属性 
        if(window.localstorage){
           alert('浏览器支持localStorage')
        }

        // 5.localstorage的写入
        if(!window.localStorage){
            alert('浏览器不支持localstorage')
        }else{
            var storage = window.localStorage;
            // 写入a字段
            storage['a'] = 1;
            // 写入b字段 
            storage.b =2;
            // 写入c字段
            storage.setItem('c',3)

            console.log(typeof storage['a']); //string 
            console.log(typeof storage['b']); //string 
            console.log(typeof storage['c']); //string
        }

JSON转换

   1、JSON字符串

2、JSON和JS对象互转

 

 九、样式绑定

 1.class 属性绑定

       想要动态的设置class,也是给一个对象。

        属性名:就是类名。

        属性值:就是布尔值。如果为true,就代表有这个类名;false,代表没有。

2.style绑定

    
    
    
        
        
我是div盒子

        
        
        
我是div盒子

        
        
        
我是div盒子
    

    

    

 

十、事件

 一、事件与事件流

   1、事件与事件流

    【事件】

      JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。常见的有加载事件、鼠标事件。

    【事件流】

      由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流。页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

    【js的事件流三阶段】

        事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

        处于目标阶段(target phrase):处于绑定事件的元素上;

        事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;(事件捕获是从上到下,而事件冒泡,是从下到上。)

2、事件冒泡与事件捕获

     事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。

     事件冒泡:

        微软提出了名为事件冒泡(event bubbling)的事件流。

        事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。

        也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

        因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→div→body→html→document.

        事件捕获:

        网景提出另一种事件流名为事件捕获(event capturing)。

        与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。

        因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→bodv→div→button。

        后来W3C采用折中的方式,平息了网景和微软之间的战争,制定了统一的标准--先捕获在冒泡。

3、事件对象

        用户界面事件:涉及到与BOM交互的通用浏览器事件。

        load事件:在整个页面(包括所有外部资源如图片 JavaScript文件和CSS文件)加载完成后触发。

 window.onload = function() {
            alert("页面加载完成")
        };

    

        焦点事件:在元素获得或失去焦点时触发的事件。 

        鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。

        滚轮事件:使用鼠标滚轮时触发的事件。

        输入事件:向文档中输入文本时触发的事件。

        键盘事件:使用键盘在页面上执行某些操作时触发的事件，

        输入法事件:使用某些输入法时触发的事件

二、事件绑定指令

    计算正方形的面积

    

        
        

        
        改变边长:
        
正方形的边长是{{ length }},面积是{{ area }}
    
    
    

    

三、事件修饰符

  1、事件修饰符使用

 

        

            
            
            
111
            
222
            
333
        
    

    

    

 2、事件修饰符详解

    

十一、表单绑定

1、输入文本的绑定

文本框

        

        
        文本输入: 
 

        
        输入密码: 
 

        
        选择文件: 


        
        反复选择: 


        
        唯一选择: 
 

        
        图片提交:


        
        提交按钮: 
 

         
        选择月份: 
 

        
        选择数字: 
 

         
        选择时间: 
 

        
        选择周:
    

    

    

 

多行文本框

 

        
        
您的留言是
        
{{ comment }}
    

    

    

 2、选择类表单元素的绑定

 单选按钮

 
 
        
         选择一种语言:{{ language }} 
 
        
          
         python 
        
          
         javascript 
        
          
        c++ 
        
    
 
        
     
        
    

复选框

 

        请选择语言,已选择:{{ language }},{{ language.length }}种 

        
        
        python

        
        javascript

        
        c++
    
    
    

下选框

 

        请选择一种语言:{{ language }} 
 

        
            python
            javascript
            C++
        
    
    

    

 

多选列表框

 

        请选择语言,已选择{{ language.length }}种 

        {{ language }}

        
            python
            javascript
            C++
        
    
    
    

3、v-model修饰符

1.  .lazy

对于文本输入框，默认情况下，v-model 推指令在每次 input 事件触发后，都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符，可以将上述行为改为在 change 事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为“惰性”绑定

    

        
        
        {{ msg }}
    

    

    

2.  .number

如果希望用户输入的值能够自动转换为数值类型，那么可以给v-model指令添加.number修饰符

    

        
        
        {{ age }}
    

    
    

 3.   .trim

如果要自动过滤用户输入的首位空白字符，可以给v-model指令添加.tirm修饰符

    

        
        
        一个{{ msg.length }}个字符
    

    

    

十二、 父子组件之间传递数据的方法 

1.父组件->子组件

从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现

 [props.单向数据流]

    概念：父组件的数据改变了会自动流动到自组件，但是子不允许修改由prpos流过来的数据

    所谓的单向数据流不允许子修改，是不允许改栈，但是可以改堆

    例如：父传了数组给子，在子里面可以通过调用push,pop,shift,unshift,splice等

    而且改完后父也会跟着改，因为他们指向的是同一个堆。

    但是在这里不允许改orops.上的栈上的数据，父可以改，而且改完后能流入到子。

2.子组件 -> 父组件

    【$emit】

    子里如何给父组件传递数据？

    利用发通知的形式来间接传数据。

    发通知的语法：this.$emit('自定义的事件名'，数据)

    父里要订阅这个通知（相当于监听这个事件）

    <子组件 @自定义的事件名="函数">

    当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。

    例:

    子里的代码

    点击后，要给父传递数据

    解释：当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。

    父里的代码

    <子组件@sb="函数"/>

    当sb事件通知时，就会调用上面的函数，函数的参数就是永不过时。

十三. 单页应用（SPA）

什么是单页应用？

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用的优缺点：
优点：

• 良好的交互体验

单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅

• 良好的前后端工作分离模式

后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端

• 减轻服务器压力

单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍

缺点：

• 首屏加载慢

解决方案：

1.vue-router懒加载

Vue-router懒加载就是按需加载组件，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显

2.使用CDN加速

在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度。

3.异步加载组件

4.服务端渲染

服务端渲染还能对seo优化起到作用，有利于搜索引擎抓取更多有用的信息（如果页面纯前端渲染，搜索引擎抓取到的就只是空页面）

• 不利于SEO

seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，搜索引擎的基础爬虫的原理就是抓取url，然后获取html源代码并解析。 如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。 这样就很不利于内容被搜索引擎搜索到

解决方案：

1.服务端渲染     

服务器合成完整的 html 文件再输出到浏览器

2.页面预渲染

3.路由采用h5 history模式

• 不适合开发大型项目

大型项目中可能会涉及大量的DOM操作、复杂的动画效果，也就不适合使用Vue、react框架进行开发