Vue总结

一.Vue简介

Vue是一款前端渐进式框架，可以提高前端开发效率.

特点：

遵循MVVM模式

编码简洁，体积小，运行效率高，适合移动/PC端开发

它本身只关注UI，可以引入其它di’s开发项目

二.存储方式
cookie：
（1).使用场景：
1.记住密码，下次自动登录
2.记录用户浏览数据，进行商品（广告）推荐。
(2)特点
1.cookie保存在浏览器端。
2.单个cookie保存的数据不能超过4KB.
3.cookie中的数据是以域名的形式进行区分的。
4.cookie中的数据是有过期时间的，超过时间数据会被浏览器自动删除。
5.cookie中的数据会随着请求被自动发送到服务端。
(3) 由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制。（localStorage和sessionStorage)

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

1. 在HTML中，新加入了一个 localStorage特性，这个特性主要用来作为本地存储来使用。
   它解决了cookie存储空间不足的问题，每条cookie的存储空间4K， localStorage一般为5M

2. localStorage的生命周期
   LocalStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除 localStorage信息，
   否则这些信息将永久存在。

3. localStorage的局限
   a.在IE8以上的IE版本才支持 localStorage这个属性。
   b.目前所有的浏览器中都会被 localStorage的值类型限定为striing类型，
   对我们日常比较常见的JSON对象类型需要一个转换。
   4.判断浏览器是否支持 localStorage这个属性

三.计算属性
可以在里面写一些计算逻辑的属性
它不像普通函数那样直接返回结果，而是经过一系列计算之后再返回结果。
同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以嗅探到这种变化，并自动执行。

定义：要用的属性不存在，通过已有属性计算得来。
使用：在computed对象中定义计算属性，在页面中使用{{方法名}}来表示计算的结果。

【基本结构】

 new Vue({
            el:'',
            // 数据
            data:{},
            // 方法属性
            // 事件绑定，不用return,没有缓存。
            methods:{},
        })

四.绑定style属性
属性名对应样式名;属性值对应样式值，一般给变量。

div style="color: greenyellow; font-size: 48px;">我是div</div>

外部增加{};属性值改造成字符串;分高改造成逗号;属性名到对象名的改变

<div  v-bind:style="{color: 'blueviolet', fontSize: '48px'}">我是div</div>

第一个color是样式名，第二个color是变量名，和data中的变量保持一致

<div  v-bind:style="{color: color, fontSize: size}">我是div</div>
</div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                color:'red',
                size:'30px'
            }
        })
    </script>

五.侦听器

【对数组进行侦听】
数组是应用类型,存在比较复杂的侦听规则。
从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。
为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue b.当你修改数组的长度时,例如:vm.items.length = newlength

2.使用标准方法修改数组可以被侦听到
https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

push() 尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

 <div id="app">
        <button @click="list.push('文档')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!--利用索引值改变数组时，不能被侦听到。-->
        <button @click="list[0]='纷纷'">修改第一项</button>
        <button @click="list.splice(1,0,'为起点')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="./../vue.js"> </script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['搜索','真伪','微魏','谔谔']
            },
            watch:{  
                list(){
                    console.log('数组改变了');
                }
            }
        })

在数组中使用侦听器总结:
1.彻底替换为一个新数组,那么可以被侦听到。
2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。1/ 3.如果直接修改数组的元素,那么无法被侦听到。
(解决方法:使用$set(()方法修改元素的值。Vue3语法。)

不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。

侦听器：
作用：用来侦听数据有没有变化，一旦有变化就调用函数。
语法：在和data、methods这些平行的位置写一个watch

侦听器的完整写法：

【对对象进行侦听】

 <div id="app">
        <p>{{obj.name}}---{{ obj.height}}</p>
        <button @click="obj.name='rose'">修改obj的name属性</button>
        <button @click="obj.age=30">修改obj的name属性</button>
        <button @click="obj={name:'andy',age:99}">修改obj的指向</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                name:'jake',
                age:20,
                height:178
            }
        },
        watch:{
            // 这种写法侦听不到obj对象内部属性的变化，
            // 只能侦听到obj对象指向的变化。
            obj(){
            console.log('obj变化了'); 
            },
          // 如果想侦听到对象里属性的变化.
          // 侦听obj里name的变化(要记得加引号)
         // "obj.name"(){
         // console.log('name变化了');
         // 可是这样写只能侦听一个属性。
//  如果希望侦听到对象里所有属性的变化,就要开启深度侦听。
 obj:{
// 当有变化会调用的函数
 handler(){
console.log('obj的属性变化了');
},
// 开启深度侦听
// deep:true,
// 要不要当前页面一打开就立即调用handler函数。
// 给true表示立即调用,默认是flase。(代表只有改动了才调用// immediate:true
}}
})
        
    </script>

六.事件处理

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

【事件流】
由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流。
页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。
【js的事件流三阶段】
事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;
处于目标阶段(target phrase):处于绑定事件的元素上;
事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;
(事件捕获是从上到下,而事件冒泡,是从下到上。)

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

  微软提出了名为事件冒泡(event bubbling)的事件流。
   事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。
  也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。
 因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→div→body→html→document.

事件捕获:
网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。
因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→bodv→div→button。
焦点事件：在元素获得或失去焦点时触发的事件。

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

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

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

     键盘事件：使用键盘在页面上执行某些操作时触发的事件。
    
     输入法事件：使用某些输入法时触发的事件。

七.事件修饰符
event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡。
以上方法需要处理DOM事件细节，代码繁琐。
为了解决这个问题，Vue.js提供了事件修饰符。
修饰符是以点开头的指令后缀来表示的

<!--.stop阻止冒泡事件继续传播-->
<a v-on:click.stop="doThis"></a>

<!--.self 当事件目标是当前元素自身时，触发事件-->
<ul @click.self="ulClick"></ul>

<!--.capture将原本默认的冒泡方式改为捕捉方式-->

<!--.prevent 阻止事件默认行为-->
<!--@submit.prevent 提交事件不再重载页面-->
<form v-on:submit.pervent="onSubmit"></form>

<!--.stop.prevent 修饰符可以串联，既阻止冒泡又阻止默认行为.-->
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent></form>
    <div id="app">
        <ul @click.self="ulClick">
            <!--事件修饰符.self：当事件的目标是当前元素自身，才会触发处理函数，-->
            <!--<ul @click.self="ulClick">-->
            <!--<li @click.self="ulClick">111 </li>-->
            <!--事件修饰符stop：组织事件冒泡-->
            <li @click.stop="liClick">111</li>

            <li @click.stop="liClick">22</li>
            <li>33</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
           methods:{
            divClick(){
              console.log('div');
            },
            ulClick(){
                console.log('ul');
            },
            liClick(){
                // liClick(evt)
                console.log('li');
                // evt.stopPropagation()//JS原生写法 阻止事件冒泡  
            }
           }
        
        })
    </script>

lazy

<!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>
</head>
<body>
    <div id="app">
    <!--时间修饰符.lazy（懒惰）  不会即时的将输入框的内容存放入data-->
    <input v-model.lasy="msg">
    <span>{{msg}}</span>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'222'
            }
        })
    </script>
</body>
</html>

number

<!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>
</head>
<body>
    <div id="app">
    <!--修饰符.number把string字符串转为number数字-->
    <input type="number" v-model.number="age">
    <span>{{age}}</span>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                age:''
            },
            watch:{
                age(){
                    console.log(typeof(this.age));
                }
            }
        })
    </script>
</body>
</html>

trim

<!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>
</head>
<body>
    <div id="app">
        <!--.trim屏蔽空格-->
        <input type="text" v-model.trim="msg">
        <span>一个{{msg.length}}个字符串</span>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>
</body>
</html>

八.Ajax
“Asynchronous Javascript And XML”(异步JavaScript和XML) Ajax就是让浏览器跟服务器交互的一套API。
它的作用:让浏览器和服务器进行交互。是向服务器请求数据的局部刷新页面的技术。
AJAX发送post请求
1.实例化一个请求对象
2.调用open方法，传递请求方法以及请求地址
3.设置请求头
4.设置请求成功后的回调函数
5.发送请求
get请求传递参数：直接在url地址后拼接，安全性不高。
post请求传递参数：在send()方法里传递

<script>
    //    1.实例化一个请求对象
   let xhr = new XMLHttpRequest
    //     2.调用open方法，传递请求方法以及请求地址
    xhr.open('post','https://autumnfish.cn/api/user/register')
    //     3.设置请求头
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    //     4.设置请求成功后的回调函数 
    xhr.onload=function(){
        // console.log(xhr.response);
        let obj = JSON.parse(xhr.response)
        console.log(obj);
    }
    // 5.发送请求
    // 请求格式：'key=value'
    xhr.send('username=xxx')
    </script>

Ajax工作流程

<!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>
</head>
<body>
    <script>
        //1. 通过new关键字创建一个网络请求对象。(创建一个对象。)
        let xhr= new XMLHttpRequest()
        //2. 调用xhr对象的open方法，设置请求方式和请求地址
        xhr.open('get','https://autumnfish.cn/api/joke')
        // 3.设置请求成功后的回调函数
        xhr.onload =function(){
            // xhr.response表示服务器响应的内容
            console.log(xhr.response);
        }
        // 4.调用send方法
        xhr.send();
    </script>
</body>
</html>