Vue学习总结

一时失言乱红尘 2022-02-14 08:47 235阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

第1章 课程介绍

1-1课程简介

![Image 1][]

学习流程

![Image 1][]

知识点

学习前提：  
有一些css、js、es6、webpack、npm等基础知识

![Image 1][]

学习收获

第2章 Vue 起步

2-1 学习方法

多看一下官网api [Vue官网][Vue]  
务必把官网的小的demo自己敲一遍加深一下对语法糖的理解

2-2 hello world

那么初步认识一下vue,那么从一个简单的hello world开始吧

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello world</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">{
       {content}}</div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                content: 'hello world'
            }
        });
    
        setTimeout(function () {
            app.$data.content = 'bye world'
        }, 2000)
    </script>
    </body>
    </html>

el:'root' vue实例化的数据只针对 id为root内使用  
\{ \{content\}\} : 获取 vue里面data 里面的数据值

2-3 开发TodoList（v-model、v-for、v-on）

v-on:click="handleClick" 绑定点击事件  
v-model="inputValue" 数据双向绑定  
v-for="(item,index) in list" 数据循环

2-4 MVVM模式

MVP (Model View Presenter)  
Model:接口请求操作  
View:页面展示  
P:处理数据和页面（大量的dom操作）

![Image 1][]

MVP

MVVM

![Image 1][]

MVVM

而Vue则采用的是mvvm这种模式，它在乎的是数据的变化驱动Ui的变化，不用用户管dom的操作，vue则扮演的是VM的操作，我们的重心是放在了M层也就是数据这一层

2-5 前端组件化

页面有好多部分组成，把页面切成一部分一部分，而拆分出来的部分，就是一个组件

2-6 使用组件改造TodoList

1.全局组件的声明和使用

//Vue创建全局组件的方法
    Vue.component('TodoItem', {
        props: ['content'],
        template: '<li>{
       {content}}</li>'
    });
    <todo-item v-bind:content="item" v-for="item in list"></todo-item>
    
    ps:
    数据的传递通过v-bind: 来定义传递的属性，后面跟上要传递的值
    通过“props”来接受属性，再通过插值表达式来展示{
       {content}}

2.Vue局部组件的创建和使用

//Vue局部组件的创建和使用
    var TodoItem = {
            props: ['content'],
            template: '<li>{
       {content}}</li>'
    };
    var app = new Vue({
            el: '#root',
            components: {
                TodoItem: TodoItem
            }
    })
    ps:
    定义一个变量，值为对象，把属性值和模板作为属性的键值
    在Vue实例化中通过components这个参数来调用这个定义好的变量（局部组件）

2-7 简单的组件间传值

父组件向子组件传值：  
子组件通过定义一个属性:v-bind:content="item",将item值传给子组件的content  
子组件通过props:\['content'\] 来接受父组件传过来的值，再通过插值表达式来展示\{ \{content\}\}  
子组件向父组件传值：  
子组件通过定义一个方法或者一个事件handleItemClick，在方法或者事件中，通过this.$emit(''delete",this.index)方法给给父组件发送一个信号，  
父组件监听这个信号：@delete="handleDeleleItem"  
下面代码演示：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello world</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button v-on:click="handleAdd">提交</button>
        </div>
        <ul>
            
            <todo-item
                    v-bind:content="item"
                    v-bind:index="index"
                    v-for="(item,index) in list"
                    @delete="handleItemDelete"
            >
            </todo-item>
        </ul>
    </div>
    <script>
        //Vue创建全局组件的方法
        // Vue.component('TodoItem', {
        //     props: ['content'],
        //     template: '<li>{
       {content}}</li>'
        // });
    
        //Vue局部组件的创建和使用
        var TodoItem = {
            props: ['content', 'index'],
            template: '<li @click="handleItemClick">{
       {content}}</li>',
            methods: {
                handleItemClick() {
                    this.$emit('delete', this.index);
                }
            }
    
        };
    
        var app = new Vue({
            el: '#root',
            components: {
                TodoItem: TodoItem
            },
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleAdd() {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                // handleRemove(index) {
                //     this.list.splice(index, 1);
                // },
                handleItemDelete(index) {
                    console.log(index);
                    this.list.splice(index, 1)
                }
            }
        });
    </script>
    </body>
    </html>

2-8 Vue的一些指令简写方法

v-on:click 等价于 @click //this.emit('delete') 接受也是 @delete  
v-bind:content 等价于 :content

第3章 Vue 基础精讲

3-1 Vue实例

vue实例是根实例，组件也是vue实例，所以说页面是由很多vue实例组成的  
![.][]data()： 以![开头的指的是vue实例的属性或方法 vm.][vue_ vm.]destroy()：用于销毁vue实例，但是之前的数据和方法并没有被销毁

var app = new Vue({
      el:'#root',
      data:{
        message:'hello world'
      },
      methods: {
        handleClick(){},
      },
      watch:{
    
      },
      computed:{
    
      }
    })

3-2 Vue实例生命周期

//生命周期函数就是vue实例在某个时间点自动执行的函数
    var app = new Vue({
            el:'#root',
            data:{
               inputValue:'' 
            },
            beforeCreate: function () {
                console.log('beforeCreate');
            },
            created: function () {
                console.log('created');
            },
            beforeMount: function () {
                console.log(this.$el);
                console.log('beforeMount');
            },
            mounted: function () {
                console.log(this.$el);
                console.log('mounted');
            },
            beforeDestroy: function () {
                //app.$destroy()
                console.log('beforeDestroy');
            },
            destroyed: function () {
                console.log('destroyed');
            },
            beforeUpdate: function () {
                //app.$data.inputValue = 1
                console.log('beforeUpdate')
            },
            updated: function () {
                console.log('updated')
            }
    })

3-3 Vue的模版语法

插值表达式\{ \{\}\} ： 用\{ \{输入的值\}\}  
v-指令 写的是js表达式  
v-text 就是innertext 其实就是 \{ \{\}\}  
v-html 就是innerhtml  
v-指令 后面除了可以写js名称还可以加字符串，插值表达式也可以写字符串

var app = new Vue({
          el: '#root',
          data: {
              name: 'hello',
              bigName: '<h1>hello</h1>'
          }
    })
    
    {
       {name + ' world'}}
    <div v-text="name + ' world' "></div>
    <div v-html="name + ' world' "></div>
    
    ps:v-html 会对bigName进行转义，字体变成h1字体大小，而不会出现标签

3-4 计算属性、方法与侦听器

**计算属性**  
computed属性，因为他是属性，所以在用插值表达式取值的时候不用加括号  
computed：内置变量缓存的功能，当data里面age变量更改时，如果不是计算属性内边的变量更改，那么他就不会渲染computed内部的变量

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        {
       {fullName}}
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                firstName: 'sunny',
                lastName: 'fan',
                age: 28
            },
            //计算属性:内置缓存（firstName、lastName）
            computed: {
                fullName: function () {
                    console.log('计算了一次');
                    return this.firstName + " " + this.lastName
                }
            }
        })
    </script>
    </body>
    </html>

**methods方法**  
因为是方法，所以插值表达式要用括号取值，  
他不具有缓存变量的功能

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        {
       {fullName()}}
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                firstName: 'sunny',
                lastName: 'fan'
            },
            methods: {
                fullName: function () {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName
                }
            }
        })
    </script>
    </body>
    </html>

**侦听器**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>侦听器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        {
       {fullName}} {
       {age}}
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                firstName: 'sunny',
                lastName: 'fan',
                fullName: 'sunny fan',
                age: 28
            },
            watch: {
                firstName: function () {
                    console.log('计算了一次');
                    this.fullName = this.firstName + " " + this.lastName
                },
                lastName: function () {
                    console.log('计算了一次');
                    this.fullName = this.firstName + " " + this.lastName
                }
            }
        })
    </script>
    </body>
    </html>

总结：我们可以通过methods、computed、watch来实现fullName显示的问题  
computed和watch都具备缓存的功能  
但是从代码量的编写程度来看，computed属性会更加方便和便捷一些。

3-5 计算属性的getter和setter

computed属性当中有两个方法，分别是：get 和 set

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>getter和setter</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <body>
    <div id="root">
        {
       {fullName}} {
       {age}}
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                firstName: 'sunny',
                lastName: 'fan',
                age: 28
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName + " " + this.lastName
                    },
                    set: function (value) {
                        console.log(value);
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>
    </body>
    </body>
    </html>

3-6 Vue中的样式绑定

**class的对象绑定**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class的对象绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .activated {
                color: red;
            }
        </style>
    </head>
    <body>
    <body>
    <div id="root">
        <div @click="handleChangeColor" :class="{activated:isActivated}">
            hello world
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                isActivated: false
            },
            methods: {
                handleChangeColor: function () {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script>
    </body>
    </body>
    </html>

**class的数组绑定**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class的数组绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            .activated-one {
                font-size: 20px;
            }
    
            .activated {
                color: red;
            }
        </style>
    </head>
    <body>
    <div id="root">
        <div @click="handleChangeColor" :class="[activated,activatedOne]">hello world</div>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                activated: '',
                activatedOne: 'activated-one'
            },
            methods: {
                handleChangeColor: function () {
                    this.activated = this.activated === 'activated' ? "" : "activated"
                }
            }
        })
    </script>
    </body>
    </html>

**style对象绑定**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>style对象绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        <div @click="handleChangeColor" :style="styleObj">hello world</div>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                styleObj: {
                    color: 'black'
                }
            },
            methods: {
                handleChangeColor: function () {
                    this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
                }
            }
        })
    </script>
    </body>
    </html>

**style的数组绑定**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>style数组绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        <div @click="handleChangeColor" :style="[styleObj,{fontSize:'30px'},styleOne]">hello world</div>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                styleObj: {
                    color: 'black'
                },
                styleOne: {
                    fontWeight: 'bold'
                }
            },
            methods: {
                handleChangeColor: function () {
                    this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
                }
            }
        })
    </script>
    </body>
    </html>

3-7 条件渲染

**v-if 、v-else-if、v-else**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>V-if</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        <h5>实例一:v-if</h5>
        <template v-if="isShow">
            hello world
        </template>
        <button @click="handleChange">{
       {toggleText}}</button>
        <hr>
        <h5>实例二:v-else</h5>
        <div v-if="isShowTwo">
            要是我显示
        </div>
        <div v-else>
            要么你显示
        </div>
        <button @click="handleChangeRole">切换显示</button>
        <hr>
        <h5>实例三:v-else-if</h5>
        <div v-if="status==='A'">
        A
        </div>
        <div v-else-if="status==='B'">
            B
        </div>
        <div v-else-if="status==='C'">
            C
        </div>
        <div v-else>
            其他
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                isShow: false,
                toggleText: '显示',
                isShowTwo: true,
                status: 'A'
            },
            methods: {
                handleChange: function () {
                    this.isShow = !this.isShow;
                    this.toggleText = this.toggleText === '显示' ? '隐藏' : '显示'
                },
                handleChangeRole: function () {
                    this.isShowTwo = !this.isShowTwo;
                }
            }
        })
    </script>
    </body>
    </html>

**用 `key` 管理可复用的元素**  
当切换两个input输入框的时候，为了不然input框的输入内容被占用，所以我们通过设置input的key值来解决这个问题

<template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="userName-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

**v-show**  
v-show很相似，只要设置值为true则显示

**v-if和v-show的区别**

*  v-show不能和v-else 和 v-else-if结合使用
 *  v-show 不管是ture还是fasle div元素都会渲染出来（false style的display:none）,如果如果有频繁的切换，我们会首选v-show,减少对dom的频繁操作

3-8 Vue列表渲染

**v-for**  
<li v-for="(item,index) in list" :key="index">\{ \{index\}\}--\{ \{item\}\}</li>  
<li v-for="(item,key,index) of userInfo" :key="index">\{ \{key\}\}-\{ \{item\}\}-\{ \{index\}\}</li>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="root">
        <ul>
            <li v-for="(item,index) in list" :key="index">{
       {index}}--{
       {item}}</li>
        </ul>
        <ul>
            <li v-for="(item,key,index) of userInfo" :key="index">{
       {key}}-{
       {item}}-{
       {index}}-</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                list: [
                    'hello',
                    'world'
                ],
                userInfo: {
                    name: 'sunny',
                    age: 29
                }
            }
        })
    </script>
    </body>
    </html>

template可以当一个空标签做为for循环渲染，而这个template不会渲染到dom里面

为了防止子组件循环渲染出现dom结构不对的情况，我们一般会通过`is`来给子组件命名

//html
     <table>
        <tbody>
          <tr is="row" v-for="item in list" :title="item"></tr> //这个地方调用is属性
       </tbody>
    </table>
    
    //js
     Vue.component('row', {
            props: ['title'],
            template: '<tr><td>{
       {title}}</td></tr>'
    });
    var app = new Vue({
            el: '#root',
            data: {
                list: [
                    'hello',
                    'world'
                ]
            }
        })

更改数组值方法有哪些？

**1.变异方法**  
`push()、 pop()、 shift()、unshift()、splice()、sort()、reverse()`  
**2.替换数组**  
当也可以创建一个新的数组，在通过  
`filter()、concat()、slice()`  
更改原始数组的值，再把更改后的数组替换旧的数组  
**3.set或者$set方法**

Vue.set(app.userInfo,'age',22)
    //或者
    vm.$set(app.userInfo,'age',22)

**4.Object.assign()或者\_.extend()**

vm.userInfo = Object.assign({},vm.userInfo,{
      sex:'男',
      email:'fx35792@163.com'
    })

> ps:不可以通过数组下标去更改数组的值

作者：没事就写点东西吧  
链接：https://www.jianshu.com/p/0d0cee7fe516

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[Vue]: https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2F
[.]: https://math.jianshu.com/math?formula=.
[vue_ vm.]: https://math.jianshu.com/math?formula=%E5%BC%80%E5%A4%B4%E7%9A%84%E6%8C%87%E7%9A%84%E6%98%AFvue%E5%AE%9E%E4%BE%8B%E7%9A%84%E5%B1%9E%E6%80%A7%E6%88%96%E6%96%B9%E6%B3%95%20vm.