VUE

vue

一、Vue.js开发基础

1.简介

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2.核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

3.基本使用

el：挂载；
data：模型数据；
msg：数据。

    <div id="app">
        <!-- {{ }} 输出变量的值-->
        <p>{{ msg }}</p>
    </div>
    <div class="add">
        <p>{{ msg}}</p>
    </div>
    <!-- 导入vue.js -->
    <script src="./vue.js"></script>
    <script>
        // 实例化一个Vue
        new Vue ({
            el:"#app",
            data:{
                msg:"鸡杀马"
            }
        })
    </script>

4.{{}}文本插值

解析标签体内容。

    <div class="app">
        <p>{{ age }}</p>
        <p>{{ age + 10}}</p>
        <p>{{age >= 18}}</p>
        <p>{{ age >= 12 }}</p>
        <p>{{ age >=18 ? '成年' : '未成年'}}</p>
        <!-- <p>{{ if(age >= 18) "成年"}}</p> -->
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'.app',
            data:{
                age:16
            }
        })
    </script>

5. v-text&v-html指令

    <div id="app">
        <div v-text="msg"></div>
        <div v-html="msg"></div>
        <div>hello,{{ msg }}.</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'你好'
            }
        })
    </script>

6.v-model指令

在表单 input、textarea以及select元素上创建双向数据绑定。

   <div id="app">
        <button @click="msg = '你好'">修改msg的值</button>
        <!-- 输入框 -->
        <!-- v-model获得输入的内容 -->
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
        <!-- 下拉框 -->
        <!-- v-model获得选中的value值 -->
        <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <!-- 复选框：只有选中和未选中两种状态 -->
        <!-- v-model得到true或false -->
        <input type="checkbox" v-model="chk">
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'',
                fruit:'',
                chk:true
            }
        })
    </script>

7.v-on指令和methods方法属性

    <div id="app">
        <!-- 当点击这个按钮,就调用fn1函数 -->
        <button v-on:click="fn1">点我啊</button>
        <!-- 当双击这个按钮,就调用fn1函数 -->
        <button v-on:dblclick="fn1">双击666</button>
        <!-- 当移入这个按钮,就调用fn2函数 -->
        <button v-on:mouseenter="fn2">移入我</button>
        <!-- 简写形式:把v-on:改成@就是简写形式 -->
        <h4>以下是简写形式</h4>
        <hr>
        <!-- 当点击这个按钮,就调用fn1函数 -->
        <button @click="fn1">点我啊</button>
        <!-- 当双击这个按钮,就调用fn1函数 -->
        <button @dblclick="fn1">双击666</button>
        <!-- 当移入这个按钮,就调用fn2函数 -->
        <button @mouseenter="fn2">移入我</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            //Vue中放方法的地方
            methods:{
                fn1(){
                    alert('点我干哈?')
                },
                fn2(){
                    alert('你想干哈?')
                }
            }
        })
    </script>

8.v-bind指令

绑定数据和元素属性。

    <div id="app">
        <a href="http://www.baidu.com">跳转</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blank">跳转</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                url:'http://mi.com'
            },
            methods:{
                change(){
                    this.url = 'http://taobao.com'
                }
            }
        })
    </script>

9.生命周期

vue实例从创建到销毁的过程。

   <div id="example">{{message}}</div>
   <script src="./vue.js"></script>
   <script>
        new Vue({
            el: '#example', //挂载
            data: {
                message: 'match'
            },
            beforeCreate() {
                console.log('beforeCreate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            updated() {
                console.log('updated');
                //组件更新后调用$destroyed函数，进行销毁 
                this.$destroy();
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            },
        })
    </script>

二.结构渲染

1. 条件渲染 v-if & v-show指令

（1）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适合运行条件很少改变的情况。

   <!-- v-show和v-if都可以用来控制标签的显示与隐藏
        <标签 v-show='布尔值'></标签>
        <标签 v-if='布尔值'></标签>
        当布尔值为true,他们就显示；当布尔值为false,他们就隐藏.
     -->
    <div id="app">
        <div v-show="isShow">我是由v-show控制的</div>
        <div v-if="isShow">我是由v-if控制的</div>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data:{
                isShow:none
            }
        })
    </script>

（2）v-if指令

    <!-- 多分支使用v-if -->
    <div id="app">
        <h3>根据班长有多少钱,决定今天中午吃什么：</h3>
        <div v-if="money >=10000">请全班同学吃{{ dinner }}</div>
        <div v-else-if="money >=5000">请全班同学吃季季红火锅</div>
        <div v-else-if="money >=1000">请全班同学嗦南昌拌粉</div>
        <div v-else-if="money >=100">请全班同学喝AD钙奶</div>
        <div v-else>暴打班长一顿,叫他回去取钱。</div>
    <hr>
    <!-- 双分支使用v-if -->
    <div v-if="age >=18">成年了,去网吧偷耳机。</div>
    <div v-else>未成年,去公园捡垃圾。</div>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                money:10000,
                age:14
            }
        })
    </script>

（3）v-show指令

    <!-- 多分支使用v-show -->
    <div id="app">
        <h3>根据班长有多少钱,决定今天中午吃什么：</h3>
        <div v-show="money >=10000">请全班同学吃豪华海鲜自助</div>
        <div v-show="money >=5000">请全班同学吃季季红火锅</div>
        <div v-show="money >=1000">请全班同学嗦南昌拌粉</div>
        <div v-show="money >=100">请全班同学喝AD钙奶</div>
        <div v-show="money < 100">暴打班长一顿,叫他回去取钱。</div>
    <hr>
    <!-- 双分支使用v-show -->
    <div v-show="age >=18">成年了,去网吧偷耳机。</div>
    <div v-show="age < 18">未成年,去公园捡垃圾。</div>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                money:3000,
                age:14
            }
        })
    </script>

2. 列表渲染 v-for

(1)v-for遍历数组

<!-- 
        【v-for】
        语法：<标签 v-for='item in 数组'></标签>
        作业：自动实现数组有多少个元素,就会产生多少这样的标签。
    -->

    <div id="app">
        <button @click="add">在最后添加一个</button>
        <ul>
            <!-- 第一个参数是元素,第二个参数是下标。与名字无关。 -->
            <li v-for="(item,index) in list">{{ item }}---{{ index }}</li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['刘备','关羽','张飞','赵云','黄忠']
            },
            methods:{
                add(){
                    this.list.push('马超')
                }
            }
        })
    </script>

(2)v-for遍历对象

<!-- v-for可以遍历对象
    语法：<标签 v-for="(val,key) in 对象"></标签> 
          <标签 v-for="val in 对象"></标签> -->
          
    <div id="app">
        <ul>
            <!-- 对象有多少个属性就会产生多少个这样的标签。 -->
            <li v-for="item in obj">{{ item }}</li>
            <!-- 第一个参数是属性值,第二个参数是属性名。 -->
            <!-- 跟名字无关,也可以简写只拿属性值。 -->
            <li v-for="(val,key) in obj">{{ key }}---{{ val }}</li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'jack',
                    age:16,
                    sex:'男'
                }
            }
        })
    </script>

(3)v-for遍历数字

<div id="app">
        <!-- 遍历数字(指定次数的循环) -->
        <h2>以下是指定次数</h2>
        <ul>
            <!-- num是1到9 -->
            <li v-for="num in 6">{{ num }}</li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>

(4)v-for中的key

<div id="app">
        <button @click="list.splice(1,0,{id:4,name:'赵六'})">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                <input type="checkbox">
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
    <!-- 
        现象：当我勾了李四,然后在下标1的位置添加了赵六,结果发现勾给了赵六,李四自己没勾了。
        原因：v-for会尝试最大限度的复用当前元素,导致状态绑定错乱。
        解决：在v-for后加上一个key属性,key绑定这个数据的唯一值(一般是id,不能是字符串和数字类型)。

     -->
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'},
                ]
            }
        })
    </script>

三.计算属性，侦听器和数据存储侦听器

1.计算属性 computed

<div id="app">
        <span>hello,{{fullName}}<span>
        <!--fullName是个计算属性-->    
    <div>  
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '熊',
                lastName: '大'
            },
            computed:{
                //这个函数就是getter
                fullName:function(){
                    return this.firstName +'-'+  this.lastName
                }
            }
        })
    </script>

2.侦听器 watch

<!-- 对对象进行侦听 -->
    <div id="app">
        <p>{{ obj.name }} --- {{ obj.age }}  --- {{ obj.height }}</p>
        <button @click = "obj.name = 'rose'">修改obj的name属性</button>
        <button @click = "obj.age = 30">修改obj的age属性</button>
        <button @click = "obj = {name:'andy', age:99} ">修改obj的指向</button>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'jack',
                    age:16,
                    height:175
                }
            },
            watch:{
                obj:{
                    // 当有变化会调用的函数
                    handler(){
                        console.log('obj的属性变化了');
                    },
                    // 开启深度侦听
                    deep:true,
                    // 要不要当前页面一打开就立即调用handler函数。
                    // 给true表示立即调用,默认是flase。(代表只有改动了才调用)
                    immediate:true
               }
            }
        })
    </script>

3.数据存储

(1).cookie

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

(2).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
        }

(3).sessionStorage

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

四.JSON转换

1.JSON字符串

// JSON和JS对象的关系
        // JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。

        // 这个一个对象
        var obj = {a:"hello", b:"world"};
        console.log(typeof(obj)); //object
        var obj1 = JSON.stringify({a:"hello", b:"world"})
        console.log(obj1);

        // 这个一个JSON字符串,本质是一个字符串
        var json = '{"a":"hello", "b":"world"}';
        console.log(typeof(json)); //string
        JSON.parse('{"a":"hello", "b":"world"}')

2.JSON和JS对象互换

 // 【JSON和JS对象互转】

        // JSON.parse()方法 实现从JSON字符串转换为JS对象
        var obj = JSON.parse('{"a":"hello", "b":"world"}')
        console.log(obj); //object

        // JSON.stringify()方法 实现从JS对象转换为JSON字符串
        var json = JSON.stringify({a:"hello", b:"world"})
        console.log(json);

五.事件处理

1.事件与事件流

事件：

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

事件流：

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

2.事件三件流：

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

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

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

3.事件方法

@click:当单击元素时,发生click事件。

@dbclick:当双击元素时,发生dbclick事件。

@focus:当元素获得焦点时,发生focus事件。

@blur:当元素失去焦点时发生blur事件。

@submit:当提交表单时,发生submit事件。

@keydown:当键盘被按下时,发生keydown事件。

@keyup:当键盘被松开,发生keyups事件。

@mouse enter: 当鼠标指针穿过(进入)被选元素时,会发生mousedown事件。

@mouse down:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。

@mouse leave: 当鼠标离开被选元素时,会发生mouseleave事件。

@mouse move:当鼠标指针在指定的元素中移动时，会发生 mousemove 事件。

@mouse out:在鼠标指针离开被选元素或任意子元素时都会被触发。

@mouse over:当鼠标指针位于元素上方时，会发生 mouseover 事件。

@mouse up:当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。

六.AJAX

Ajax就是让浏览器跟服务器交互的一套API。

它的作用就是让浏览器和服务器进行交互。

是向服务器请求数据的局部刷新页面的技术。

ajax发送post请求

1.创建对象,实例化一个ajax对象

2.调用open方法,设置请求方式和地址

3.设置请求头

<script>
        //1.创建请求对象，实例化一个ajax对象
        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);
        }
        //5.使用send()方法去发送ajax请求
        xhr.send('username=王紫妮11111')
    </script>

ajax发送get请求

 <input type="button" value="点我看笑话" class="getJoke">
    <div class="joke-container"></div>
    <script>
        document.querySelector('.getJoke').onclick = function () {
            //1.创建一个请求对象
            let xhr = new XMLHttpRequest()
            //2.调用xhr的open方法，开启请求
            //传入请求方式和请求地址
            xhr.open('get', 'https://autumnfish.cn/api/joke')
            //3.设置请求成功后的回调函数
            xhr.onload = function () {
                //把响应的内容打印到控制台里
                // console.log(xhr.response);
 
                //把响应的内容显示在div区域
                document.querySelector('.joke-container').innerHTML = xhr.response
            }
            //调用send方法
            xhr.send()
        }
    </script>

get请求提交参数

 <script>
        //AJAX发送get请求，通过url地址拼接传递参数
        //url地址？ key=value
        //url地址？ key1=value1&key2=value2
 
        // 1.创建请求对象
        let xhr = new XHLHttpRequest()
        // 2.调用open,设置请求方式和请求地址
        xhr.open('get','https://autumnfish.cn/api/joke/list?num=5')
        // 3.设置请求成功后的回调函数
        xhr.onload = function(){
            console.log(xhr.response);
        }
        // 4.发送请求
        xhr.send()
    </script>