vue基础详解（全）

谁借莪１个温暖的怀抱￠ 2022-03-19 02:54 365阅读 0赞

### 一，VUE的核心 ###

1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新）

2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

### 二，使用vue ###

1.引入vue之后就可以进行下面的步骤

2.创建语法（创建 ，设置数据，挂载，渲染）

var vm = new Vue（{}）//参数是一个对象

### 三、定义一个vue实例的4个常用选项 ###

**1.过滤器 filter属性：**

例如我们从后台取出来的数据都是带有小数位的，但是需求上面要求的是只展示整数部分，这个时候我们就可以用过滤器属性了。我们先创建一个实例,数据中的格式都是带有小数点的，此时我们创建filters属性（记住此属性的值是一个对象，所以":"之后要带上大括号“\{\}”，在filters里面我们写一个转换函数，这个函数的功能就是将传参转换为整数后返回，此处用的是es6的语法），写好函数后要怎么使用呢？我们在div里面，将参数用管道符号"|"传给toInt函数，这样就可以了！

<div id="app6">
    
        数字1：{
       {num1 | toInt}}
    
        数字2：{
       {num2 | toInt}}
    
        数字3：{
       {num3 | toInt}}
    
    </div>
    
    
    
    let app6 = new Vue({
    
        el:'#app6',
    
        data:{
    
            num1:123.4,
    
            num2:520.1314,
    
            num3:1314.520
    
        },
    
        filters:{
    
            toInt(value){
    
                    return parseInt(value);
    
                 }
    
        }
    
    });

**4.计算属性computed**

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。

比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。（可以直接调用计算属性里面的值。）

计算属性computed的定义语法和过滤器filters类似，但是用法不一，如下：

总和是\{ \{sum\}\}

我们提供的函数将用作属性app6.sum 的 getter 函数：

计算属性拥有getter和setter两个属性，也就是我们可以设置这两个属性，例如

computed: {
    
      fullName: {
    
        // getter
    
        get: function () {
    
          return this.firstName + ' ' + this.lastName
    
        },
    
        // setter
    
        set: function (newValue) {
    
          var names = newValue.split(' ')
    
          this.firstName = names[0]
    
          this.lastName = names[names.length - 1]
    
        }
    
      }
    
    }

那么每次运行fullname的时候，就是使用getter，返回一个值，而每次执行fullname = ""的时候，就会执行set里面的函数，将firstname和lastname都进行改变。

需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新

**5.****methods  方法**

顾名思义，在methods中，我们可以定义一些方法，供组件使用。

比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。

定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上

let vm = new Vue({
    
        //挂载元素
    
      el:'#app',
    
        //实例vm的数据
    
      data:{
    
             a:0
    
        },
    
        //方法
    
      methods:{
    
            plus(){
    
                return this.a++;
    
            }
    
        }
    
    });
    
    <div id="app">
    
        {
       { a }}
    
        <button v-on:click="plus">加1</button>
    
      </div>

**1. 计算属性computed和方法methods都能用于计算，说说两者的区别？**

**答： 假设我们计算一个值sum，它是经过a和b相加得到的结果。**

**      如果我们使用计算属性的方式来实现得到sum，由于计算属性computed是基于它的依赖进行缓存的，也就是sum的值只有在a或者b的值发生变化的时候才会重新计算求值。这就意味着，倘若a和b的值不发生改变，即使重新渲染或者多次访问计算属性中的sum，都无需重新计算，节省运算开销。**

**        反观，如果我们用methods方法来定义一个求和函数sum( )来计算a和b的求和，如果多个地方需要渲染a和b的和，我们则需要多此调用sum( )方法，这样的后果就是多次重复执行函数，造成不必要的运算开销。**

**6.****watch 观察**

watch选项是Vue提供的用**于检测指定的数据发生改变的api，也就是说，当这个数据发生变化的时候会触发对应的函数**。

上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。

在上个例子的代码基础上，我们加上watch部分的代码

最后一部分watch就是我们新加的代码，a( ) 表示我们要观察监听的就是数据a，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

### 四.vue实例的生命周期： ###

不要在选项属性或者回调函数上面使用箭头函数，因为箭头函数是和父级上下文绑定在一起的。

![20190902103521307.png][]

1. beforeCreate（还没创建实例）

此阶段为实例初始化之后，此时的数据观察和事件配置都没好准备好。

我们试着console一下实例的数据data和挂载元素el，代码如下:

<div id="app7">{
       {name}}</div>
    
      <script>
    
        let app7 = new Vue({
    
          el:"#app7",
    
            data:{
    
             name:"krys"
    
          },
    
          beforeCreate(){
    
             console.log('即将创建');
    
             console.log(this.$data);
    
             console.log(this.$el);
    
          }
    
        });
    
    </script>

得到的结果是：

![2019090210181973.png][]

此时的实例中的data和el还是undefined,不可用的。

2. created（创建实例）

beforeCreate之后紧接着的钩子就是创建完毕created，我们同样打印一下数据data和挂载元素el，看会得到什么？

在上一段代码的基础上，加上下面这段代码：

created(){
    
        console.log('创建完毕');
    
        console.log(this.$data);
    
        console.log(this.$el);
    
    }

我们看到打印的结果：

![2019090210181980.png][]

此时，**我们能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出$data为一个Object对象，而$el的值为undefined。**

3. beforeMount（生成dom）

上一个阶段我们知道DOM还没生成，属性el还为undefined，那么，此阶段为即将挂载，我们打印一下此时的$el是什么？

增加一下代码：

beforeMount(){
    
        console.log('即将挂载');
    
        console.log(this.$el);
    
    }

我们看到打印结果：

![2019090210181967.png][]

此时的$el不再是undefined，而是成功关联到我们指定的dom节点<div id=”app”></div>，**但此时\{ \{ name \}\}还没有被成功地渲染成我们data中的数据**。没事，我们接着往下看。

4. mounted（将实例与dom相连）

**mounted也就是挂载完毕阶段，到了这个阶段，数据就会被成功渲染出来**，我们编写mounted的钩子，打印$el 看看：

mounted()\{

console.log('挂载完毕');

console.log(this.$el);

打印结果

![2019090210182078.png][]

如我们所愿，此时打印属性el，我们看到\{ \{ name \}\}已经成功渲染成我们data.name的值：“krys”。

5. beforeUpdate（实例更新前）

我们知道，当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，**在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。**

html片段代码我们加上ref属性，用于获取DOM元素。

<div ref="app7" id="app7">
    
        {
       {name}}
    
    </div>
    
    Vue实例代码加上beforeUpdate钩子代码：
    
    beforeUpdate(){
    
      console.log('=即将更新渲染=');
    
      let name = this.$refs.app7.innerHTML;
    
      console.log('name:'+name);
    
    },

我们试一下，在控制台修改一下实例的数据name，在更新渲染之前，我们打印视图中文本innerHTML的内容会是多少：

![2019090210181968.png][]

我们在控制台把app.name的值从原来的 “krys” 修改成 “斑马”,在更新视图之前beforeUpdate打印视图上的值，结果依然为原来的值：“krys”，表明在此阶段，视图并未重新渲染更新。

6. updated(实例更新完成之后)

此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码，如下：

updated(){
    
      console.log('==更新成功==');
    
      let name = this.$refs.app7.innerHTML;
    
      console.log('name:'+name);
    
    }

结果如下：

![2019090210181975.png][]

大家注意两个不同阶段打印的name的值是不一样，updated阶段打印出来的name已经是最新的值：“斑马”，说明此刻视图已经更新了。

7. beforeDestroy

**调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。**

8. destroyed

**成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解**绑。

案例：我们通过在销毁前通过控制台修改实例的name，和销毁之后再次修改，看看情况。

beforeDestroy(){
    
       console.log('销毁之前');
    
    },
    
    destroyed(){
    
       console.log('销毁成功');
    
    }

效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

**销毁之前，修改name的值，可以成功修改视图显示的内容为：“更新视图”，一旦效用实例的$destroy( )方法销毁之后，实例与视图的关系解绑，再修改name的值，已于事无补，视图再也不会更新了，说明实例成功被销毁了。**

9. actived

keep-alive组件被激活的时候调用。

10. deactivated

keep-alive 组件停用时调用。

关于keep-alive组件的激活和停用

以后最为常用的钩子是：**created 成功创建。**

五.在html中绑定数据

1.Mustache语法：\{ \{\}\}的写法，在里面写入需要渲染的数据

<div id ="app7">{
       {name}}</div>
    let app7 = new Vue({
    
        el:"#app7",
    
        data:{
    
            name:"krys"
    
        }
    
    }

2.绑定纯html

如果上面的例子中，name的值是一些html语句，如果单纯的是像上面这样写的话，会原样输出，不会转化为html语句，例如

![2019090210181971.png][]

并不能得到我们想要的效果，这时候需要用到vue提供的v-html指令，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2][]

3.绑定属性:attr或者v-bind:attr，其中attr是属性名， 需要注意的是：当渲染的属性值是布尔值的时候（true和false），效果就不一样了，并不是简单地将true或者false渲染出来**，而是当值为false的时候，属性会被移除**。

<div id="app9">
    
       <a v-bind:href="link" >baidu</a>
    
    </div>
    
    let app9 = new Vue({
    
        'el':"#app9",
    
        data:{
    
            link:"https://www.baidu.com"
    
        }
    
    })

![20190902101819114.png][]

4.支持javascript表达式

值得注意的是，**只能包含单个表达式**，多个表达式组成的不会生效！

上面讲到的都是将数据简单地绑定在视图上，但事实上，vue还支持我们对数据进行简单的运算：javascript表达式支持。

<div id="app">{
       { num+3 }}</div>
    
    <script>
    
    let app = new Vue({
    
        el:"#app",
    
        data:{
    
            num:2
    
        }
    
    });
    
    </script>
    
    <div id="app">
    
      <a :href="'http://'+host">hello官网</a>
    
    </div>
    
    <script>
    
    let app = new Vue({
    
        el:"#app",
    
        data:{
    
            host:'hello.com'
    
        }
    
    });
    
    </script>

![20190902101819167.png][]

![20190902101819204.png][]

六，必须要掌握的指令

1.v-text指令

v-text指令用于更新标签包含的文本，他的作用跟双大括号\{ \{\}\}一样，

<div id="app">
    
        <p v-text="msg"></p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
                msg:"hello,vue"
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3][]

2.v-html指令(执行html)

这个指令帮助我们绑定一些包含html代码的数据在视图上。

<div id="app">
    
        <p v-html="msg"></p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
                msg:"<b>hello,vue</b>"
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 4][]

3.v-show指令

控制元素的css中display属性，v-show指令的取值为true/false，**分别对应着显示/隐藏。**

<div id="app">
    
        <p v-show="show1">我是true</p>
    
        <p v-show="show2">我是false</p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
               show1:true,
    
                show2:false
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 5][]

4.v-if（其实就相当于if）

v-if指令的取值也是true或者false，**它控制元素是否需要被渲染出来，**设置为true的<p>标签，成功渲染出来，而设置为false的<p>标签，直接被一行注释代替了，并没有被解析渲染出来。

那么如何区别v-show和v-if这两个指令呢？就是一个会被渲染出来，一个不会。记住一个很重要的点**：****如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。**

<div id="app">
    
        <p v-if="if_1">我是true</p>
    
        <p v-if="if_2">我是true</p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
               if_1:true,
    
                if_2:false
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 6][]

5.v-else指令（相当于else）

1) if和else指令，在一般的变成语言都是结对出现，在vue里也不例外，它没有对应的值，但是要求前一个兄弟节点必须使用v-if指令。（没有if哪来的else），如果v-if的值为true那么else里面的东西将不会渲染出来

<div id="app">
    
        <p v-if="if_1">我是if</p>
    
        <p v-else="">我是else</p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
               if_1:true,
    
            }
    
        })
    
    </script>
    
    
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
               if_1:false,
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 8][]

3)v-else-if

v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

4)使用key来管理可复用的元素

Vue 会尽可能高效地渲染元素，**通常会复用已有元素而不是从头开始渲染**。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
    
      <label>Username</label>
    
      <input placeholder="Enter your username">
    
    </template>
    
    <template v-else>
    
      <label>Email</label>
    
      <input placeholder="Enter your email address">
    
    </template>
    
    
    
    
    
    new Vue({
    
        el: '#app',
    
        data: {
    
            loginType:"username"
    
        },
    
        methods:{
    
            change:function () {
    
                this.loginType == "username" ? this.loginType = "email":this.loginType = "username";
    
            }
    
        }
    
    });

那么在上面的代码中切换 loginType **将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。**

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 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>
    
    
    
    
    
    new Vue({
    
        el: '#app',
    
        data: {
    
            loginType:"username"
    
        },
    
        methods:{
    
            change:function () {
    
                this.loginType == "username" ? this.loginType = "email":this.loginType = "username";
    
            }
    
        }
    
    });

现在，每次切换时，输入框都将被重新渲染。

6.v-for指令

v-for指令用来进行循环，不但可以迭代数组，还可以迭代对象和整数，下面例子中，index是索引，item是值（有先后顺序，**第一个是值，第二个是索引**）。可以看到生成了4个div

<div id="app">
    
       <div v-for="(item,index) in list">{
       {index}}.我们的成员有：{
       {item}}</div>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
               list:['krys','zebra','tom','jackson']
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 9][]

**用for in或者for of遍历对象的时候，第一个参数是值，第二个参数是键名，第三个参数是索引。****在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。**

<ul id="v-for-object" class="demo">
    
        <li v-for="(value,key) of object">
    
           {
       {key}}-- {
       {value}}
    
        </li>
    
    </ul>
    
    
    
    
    
    new Vue({
    
        el:"#v-for-object",
    
        data:{
    
            object:{
    
                firstName:"liang",
    
                lastName:"krys",
    
                fullName:"krys liang",
    
                age:23
    
            }
    
        }
    
    });

![20190902101819175.png][]

尽可能在使用 **v-for 时提供 key，**除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略**。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。**

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

</div>

当对数组进行下面两个操作的时候，数组不会进行响应式的变化，也就是说，即使进行了下面的两个操作，数据也不会重新渲染

1）**利用索引直接设置一个值**

2）**修改数组的长度**

var vm = new Vue(\{

data: \{

items: \['a', 'b', 'c'\]

\})

vm.items\[1\] = 'x' // 不是响应性的

vm.items.length = 2 // 不是响应性的

为了解决第一类问题，改用下面两个方法来实现同样的效果

Vue.set(vm.items, indexOfItem, newValue)

vm.items.splice(indexOfItem, 1, newValue)

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，可以改用下面的方法

vm.items.splice(newLength)

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue(\{

data: \{

a: 1

\})

// \`vm.a\` 现在是响应式的

vm.b = 2

// \`vm.b\` 不是响应式的

对于已经创建的实例**，Vue 不能动态添加根级别的响应式属性**。但是，**可以使用 Vue.set(object, key, value)** 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue(\{

data: \{

userProfile: \{

\})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 \_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性

vm.userProfile = Object.assign(\{\}, vm.userProfile, \{

age: 27,

favoriteColor: 'Vue Green'

\})

当v-for和v-if处于同一个节点的时候，v-for的优先级比v-if要高，这就是说v-if将分别运行于每个v-for循环中。

\{ \{ todo \}\}

</li>

**当在自定义组件中使用 v-for 时，key 现在是必须的。****然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用 props **

<my-component

v-for="(item, index) in items"

v-bind:item="item"

v-bind:index="index"

v-bind:key="item.id">

</my-component>

7.v-bind指令

v-bind指令用于动态绑定DOM元素的属性（例如href，src等），其中:href等价于v-bind:href

<div id="app">
    
        <a :href="link">百度官网</a>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
               link:"https://www.baidu.com"
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 10][]

8.v-on指令

v-on指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。

<div id="app">
    
       <button v-on:click="say('krys')">调用say函数</button>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            methods:{
    
                say(name){
    
                    console.log("hello"+name);
    
                }
    
            }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 11][]

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：**方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节**。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由**点开头的指令后缀来**表示的。

*  .stop ==stopPropagation->阻止事件继续传播
 *  .prevent == preventDefault ->去除默认行为（form提交不再重载页面）
 *  .capture ->添加事件监听器时使用事件捕获模式，也就是元素自身出发的事件先在此处理，然后才交给内部元素进行处理
 *  .self ->只在event.target是当前元素自身时才触发处理函数
 *  .once->点击事件只会触发一次
 *  .passive->**passive是不拦截默认事件**

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

在监听键盘事件的时候，经常需要检查常见的键值。

上面的keycode是按键的编码，等同于下面

所有的按键别名

*  .enter
 *  .tab
 *  .delete (捕获“删除”和“退格”键)
 *  .esc
 *  .space
 *  .up
 *  .down
 *  .left
 *  .right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 \`v-on:keyup.f1\`

Vue.config.keyCodes.f1 = 112

9、v-model指令（在input、textarea、select这三个元素上创建双向数据绑定。）

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将vue实例的数据作为数据来源。应**该在data中声明初始值，**

这个指令是非常重要且非常常用，一般用在表单输入，它帮助我们轻易的实现表单控件和数据的双向绑定，相对于之前的手动更新DOM，简直就是我们的天使。要注意的是v-model中的值，data中变量的名字，p标签中的\{ \{\}\}里面的值，三者要一致。因为就是iniput输入的值被绑定到了data中，然后输出到p中。

<div id="app">
    
       <input v-model="msg" type="text">
    
        <p>上面输入的值是：{
       {msg}}</p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
           data:{
    
                msg:""
    
           }
    
        })
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 9][]

10.v-once指令

这个指令的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

<div id="app">
    
        <input v-model="msg"  type="text">
    
        <p v-once>你输入：{
       { msg }}</p>
    
    </div>
    
    <script>
    
        let app = new Vue({
    
            el:"#app",
    
            data:{
    
                msg:'hello,我是krys啊哈哈哈哈'
    
            },
    
            watch:{
    
              msg(){
    
                  console.log(this.msg);
    
              }
    
            }
    
        });
    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 9][]

select元素中，如果表达式的初始值没有匹配任何选项（也就是没有指定默认值），select元素将会被渲染为未被选中的状态。这个状况下面再ios就会引发一些bug。所以，在option中提空一个空的禁用的选项。

<div id="example-5">
    
      <select v-model="selected">
    
        <option disabled value="">请选择</option>
    
        <option>A</option>
    
        <option>B</option>
    
        <option>C</option>
    
      </select>
    
      <span>Selected: {
       { selected }}</span>
    
    </div>
    
    
    
    new Vue({
    
      el: '#example-5',
    
      data: {
    
        selected: ''
    
      }
    
    })

多选的时候，象下面那样绑定到一个数组

<div id="example-6">
    
      <select v-model="selected" multiple style="width: 50px;">
    
        <option>A</option>
    
        <option>B</option>
    
        <option>C</option>
    
      </select>
    
      
    
    
    
      <span>Selected: {
       { selected }}</span>
    
    </div>
    
    new Vue({
    
      el: '#example-6',
    
      data: {
    
        selected: []
    
      }
    
    })
    
    
    
    <select v-model="selected">
    
      <option v-for="option in options" v-bind:value="option.value">
    
        {
       { option.text }}
    
      </option>
    
    </select>
    
    <span>Selected: {
       { selected }}</span>
    
    new Vue({
    
      el: '...',
    
      data: {
    
        selected: 'A',
    
        options: [
    
          { text: 'One', value: 'A' },
    
          { text: 'Two', value: 'B' },
    
          { text: 'Three', value: 'C' }
    
        ]
    
      }
    
    })

</select>

data: \{

picked:this.value,

toggle:"false",

selected:this.\_value

\},

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 12][]

修饰符

1）.lazy，只有当值改变的时候才进行同步

2）.number

将用户的输入值自动转换为数值类型

3）.trim

自动过滤用户输入的首尾空白字符，可以给v-model添加.trim修饰符

七.vue中的组件

1）一个组件的data选项必须是一个函数，所有的数据放在return里面。只有这样，每个实例才可以维护一份被返回对象的独立的拷贝。

data: function () \{

return \{

2）注册组件

*  全局注册：[Vue.component][].这样全局注册之后，可以用在任何新创建的vue实例中
 *  局部注册：先声明组件，然后再实例中的components中使用组件。

局部注册中可以通过一个不同的JavaScript对象来定义组件

var ComponentA = \{ /\* ... \*/ \}

var ComponentB = \{ /\* ... \*/ \}

var ComponentC = \{ /\* ... \*/ \}

然后再components选项中定义想要使用的组件

new Vue({
    
      el: '#app',
    
      components: {
    
        'component-a': ComponentA,
    
        'component-b': ComponentB
    
      }
    
    })

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

**注意局部注册的组件在其子组件中不可用。**

例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }
    
    
    
    var ComponentB = {
    
      components: {
    
        'component-a': ComponentA
    
      },
    
      // ...
    
    }

在模块系统中局部注册

在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'
    
    import ComponentC from './ComponentC'
    
    
    
    export default {
    
      components: {
    
        ComponentA,
    
        ComponentC
    
      },
    
      // ...
    
    }

这样就可以在conponentB中的模板使用componentA和c了。

在模块中，基础组件的自动化全局注册

1）什么是基础组件

许多组件只是包裹了一个输入框或者按钮这类的元素，是相对通用的，把它们称之为基础组件，它们会在各个组件中被频繁的使用。

这样就会导致很多包含基础组件的长列表

import BaseButton from './BaseButton.vue'
    
    import BaseIcon from './BaseIcon.vue'
    
    import BaseInput from './BaseInput.vue'
    
    
    
    export default {
    
      components: {
    
        BaseButton,
    
        BaseIcon,
    
        BaseInput
    
      }
    
    }

所以在webpack中，**使用require.context只在全局注册这些通用的基础组件。**

在入口文件中（src/main.js中全局导入基础组件的实例代码）

import Vue from 'vue'
    
    import upperFirst from 'lodash/upperFirst'
    
    import camelCase from 'lodash/camelCase'
    
    
    
    const requireComponent = require.context(
    
      // 其组件目录的相对路径
    
      './components',
    
      // 是否查询其子目录
    
      false,
    
      // 匹配基础组件文件名的正则表达式
    
      /Base[A-Z]\w+\.(vue|js)$/
    
    )
    
    
    
    requireComponent.keys().forEach(fileName => {
    
      // 获取组件配置
    
      const componentConfig = requireComponent(fileName)
    
    
    
      // 获取组件的 PascalCase 命名
    
      const componentName = upperFirst(
    
        camelCase(
    
          // 剥去文件名开头的 `./` 和结尾的扩展名
    
          fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    
        )
    
      )
    
    
    
      // 全局注册组件
    
      Vue.component(
    
        componentName,
    
        // 如果这个组件选项是通过 `export default` 导出的，
    
        // 那么就会优先使用 `.default`，
    
        // 否则回退到使用模块的根。
    
        componentConfig.default || componentConfig
    
      )
    
    })

**记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。**

3）通过props向子组件传递数据

**HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名**：

Vue.component('blog-post', {
    
      // 在 JavaScript 中是 camelCase 的
    
      props: ['postTitle'],
    
      template: '<h3>{
       { postTitle }}</h3>'
    
    })
    
    
    
    <blog-post post-title="hello!"></blog-post>

如果你使用字符串模板,这个限制就不存在。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。**一个组件默认可以拥有任意数量的 prop**，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样

Vue.component('blog-post', {
    
      props: ['title'],
    
      template: '<h3>{
       { title }}</h3>'
    
    })

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

<blog-post title="My journey with Vue"></blog-post>

<blog-post title="Blogging with Vue"></blog-post>

<blog-post title="Why Vue is so fun"></blog-post>

此外还可以定义传进来的prop数据的类型

props: \{

title: String,

likes: Number,

isPublished: Boolean,

commentIds: Array,

author: Object

当子组件需要对prop传入的数据进行处理的时候，最好要有一个本地的数据来进行接收，而不要直接改变prop传进来的数据。

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', \{

props: \{

// 基础的类型检查 (\`null\` 匹配任何类型)

propA: Number,

// 多个可能的类型

propB: \[String, Number\],

// 必填的字符串

propC: \{

type: String,

required: true

\},

// 带有默认值的数字

propD: \{

type: Number,

default: 100

\},

// 带有默认值的对象

propE: \{

type: Object,

// 对象或数组默认值必须从一个工厂函数获取

default: function () \{

return \{ message: 'hello' \}

\},

// 自定义验证函数

propF: \{

validator: function (value) \{

// 这个值必须匹配下列字符串中的一个

return \['success', 'warning', 'danger'\].indexOf(value) !== -1

\})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

注意**那些 prop 会在一个组件实例创建之前进行验证，**所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的（这些是在实例创建之后才可以使用）。

非prop的特性

一个非prop特性是值传向一个组件，但是该组件并没有相应prop定义的特性。但是组件可以接收这样的特性，并且添加到这个组件的跟元素上。

替换/合并已有的特性

如果组件内部已经设置好的属性，再从组件的父级传入进来，就会替换掉组件内部设置好的值。但是，class和style这两个特性会只能一些，会把组件内部和外部的值合并起来，得到最终的值。

禁用特性继承（就是不要让组件的根元素，继承父级的所有属性，将父元素的元素拆开来，赋予给不同的组件元素）

<base-input

v-model="username"

class="username-input"

placeholder="Enter your username"

label = "123"

></base-input>

Vue.component('base-input', \{

inheritAttrs: false,

props: \['label', 'value'\],

<label>

\{ \{ label \}\}

<input

v-bind="$attrs"

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)"

</label>

\})

new Vue(\{

el: '\#todo-list-example',

data: \{

username:""

\})

![20190902101819190.png][]

可以看到父元素的label属性赋予了组件中的label标签，而其他的属性李如玉placeholder、class等则绑定在了$attrs上面，赋予给了input元素

4）通过事件向父级组件发送消息

在下面的例子中blog-post是父组件，父组件中的postFontSize是用来控制博文的字号

new Vue(\{

el: '\#blog-posts-events-demo',

data: \{

posts: \[/\* ... \*/\],

postFontSize: 1

\})

然后在模板中添加一个按钮用来放大字号（利用自定义事件，将enlarge-text事件传给父组件）

Vue.component('blog-post', \{

props: \['post'\],

<h3>\{ \{ post.title \}\}</h3>

Enlarge text

</button>

</div>

\})

然后再父组件中的模板上面监听这个事件

<blog-post

v-for="post in posts"

v-bind:key="post.id"

v-bind:post="post"

v-on:enlarge-text="postFontSize += 0.1"

></blog-post>

</div>

此外，还可以通过这个自定义的事件给父组件传数据

在**$emit的第二个参数中填写的是这个数据**

例如在上面的例子中，我们由子组件来决定放大多少倍，在模板中的button改成下面

Enlarge text

</button>

可以看到，这里的参树为0.1，也就是每次点击都放大0.1em

然后在父级组件监听这个事件的时候，访问这个数据

<blog-post

...

v-on:enlarge-text="postFontSize += $event"

></blog-post>

如果这个处理函数是一个方法，那么这个值将作为参数被传入

<blog-post
    
      ...
    
      v-on:enlarge-text="onEnlargeText"
    
    ></blog-post>
    
    
    
    methods: {
    
      onEnlargeText: function (enlargeAmount) {
    
        this.postFontSize += enlargeAmount
    
      }
    
    }

自定义事件

*  事件名

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 **kebab-case** 的事件名。

*  自定义组件的v-model

一个组件上的v-model会利用value的prop和input的事件，但是像单选框，复选框等类型的输入控件可能会将value特性用在不同的地方（亲测，当勾选单选框或者复选框的时候，值都为undefined）。

所以如果我们想要获得这个值（就是究竟有没有被选中的时候，就可以利用组件的这个model属性）

首先给组件添加model属性，可以看到下面的model含有checked这个属性以及change的这个事件，当组件被改变状态的时候，就会触发这个change事件，并且将自己的checked的值传给父元素，也就是base-checkbox里面的lovingVue这个值绑定了组件中的chencked所对应的值，当base-checkbox触发一个change事件并且附带一个新的值的时候，lovingVue就会被更新。需要注意的是，仍然需要在组件的props里面声明checked这个属性。

Vue.component('base-checkbox', \{

model: \{

prop: 'checked',

event: 'change'

\},

props: \{

checked: Boolean

\},

<input

type="checkbox"

v-bind:checked="checked"

v-on:change="$emit('change', $event.target.checked)"

\})

<base-checkbox v-model="lovingVue"></base-checkbox>

*  将原生事件绑定到组件（.native）

组件根元素直接监听事件（亲测，不添加.native是不生效的），

</div>

Vue.component("myinput",\{

template:"<input type='text' />"

\})

let vm = new Vue(\{

el:"\#test",

data:\{

\},

methods:\{

console:function () \{

console.log("focus");

\});

但有的时候组件的根元素不具有这些原生事件的时候，这个事件触发函数就不会生效，例如

<label>

\{ \{ label \}\}

<input

v-bind="$attrs"

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)"

</label>

于是vue提供了一个$listeners 属性，里面包含了所有作用在这个组件的监听器

focus: function (event) \{ /\* ... \*/ \}

input: function (value) \{ /\* ... \*/ \},

于是上面修改为

Vue.component('base-input', \{

inheritAttrs: false,

props: \['label', 'value'\],

computed: \{

inputListeners: function () \{

var vm = this

// \`Object.assign\` 将所有的对象合并为一个新对象

return Object.assign(\{\},

// 我们从父级添加所有的监听器

this.$listeners,

// 然后我们添加自定义监听器，

// 或覆写一些监听器的行为

// 这里确保组件配合 \`v-model\` 的工作

input: function (event) \{

vm.$emit('input', event.target.value)

)

\},

<label>

\{ \{ label \}\}

<input

v-bind="$attrs"

v-bind:value="value"

v-on="inputListeners"

</label>

\})

5）在自定义组件里面使用v-model，一定要做一下两件事

*  将其value属性绑定在一个value的props上
 *  在其input事件被触发的时候，将新的值通过自定义的input事件抛出

Vue.component('custom-input', \{

props: \['value'\],

<input

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)"

\})

<custom-input v-model="searchText"></custom-input>

6）对于特殊的html元素中，其内部元素为指定的元素，所以当我们自定义的元素出现在这里的时候会被视为无效的内容。

此时使用is属性

<table>

</table>

7）组件名

全局注册的时候第一个参数就是组件名

Vue.component('my-component-name', \{ /\* ... \*/ \})

定义组件名的方式有两种：

*  使用 kebab-case

Vue.component('my-component-name', \{ /\* ... \*/ \})

*  使用 PascalCase

Vue.component('MyComponentName', \{ /\* ... \*/ \})

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

因为**HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。**这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

<custom-input v-model="searchText"></custom-input>

<p>\{ \{searchText\}\}</p>

</div>

Vue.component('CustomInput', \{

props: \['value'\],

<input

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)"

\})

new Vue(\{

el: '\#todo-list-example',

data: \{

searchText:""

\})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 13][]

但是，使用首字母大写的情况下就会出错

<p>\{ \{searchText\}\}</p>

</div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 14][]

8）插槽

所谓插槽，就是在自定义组件中包含的内容，例如

<myelement>something intresting</myelement>

那么上面的something..就是插槽

官网中写道**，如果不在自定义组件中添加<slot></slot>元素，那么所有被放进来的元素将会被抛弃**。

例如上面的myelement模板实现可能如下

v-bind:href="url"

class="nav-link"

</a>

这样写，**当组件渲染的时候，这个slot元素就会代替上面的something intresting**

插槽中可以包含任何模板代码，包括html

<navigation-link url="/profile">

Your Profile

</navigation-link>

*  具名插槽

结合父组件上使用slot从而指定插槽的位置，例如

模板中的内容可能如下，每个位置拥有不一样的元素

<div class="container">
    
      <header>
    
        <slot name="header"></slot>
    
      </header>
    
      <main>
    
        <slot></slot>
    
      </main>
    
      <footer>
    
        <slot name="footer"></slot>
    
      </footer>
    
    </div>
    
    
    
    那么我们在使用父组件的时候
    
    <base-layout>
    
      <template slot="header">
    
        <h1>Here might be a page title</h1>
    
      </template>
    
    
    
      <p>A paragraph for the main content.</p>
    
      <p>And another one.</p>
    
    
    
      <template slot="footer">
    
        <p>Here's some contact info</p>
    
      </template>
    
    </base-layout>

可以看到父组件里面的模板就会出现在slot里面name属性所对应的位置下面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 15][]

如果不像上面，用template元素以及slot属性包裹，直接用在一个普通元素上但是结合slot属性使用，也可以

<base-layout>

<h1 slot="header">Here might be a page title</h1>

<p>A paragraph for the main content.</p>

<p>And another one.</p>

<p slot="footer">Here's some contact info</p>

</base-layout>

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口

*  插槽的默认内容

有的时候为插槽提供的内容是很有用的，例如，个 <submit-button> 组件可能希望这个按钮的默认内容是“Submit”，但是同时允许用户覆写为“Save”、“Upload”或别的内容。

你可以在组件模板里的 <slot> 标签内部指定默认的内容来做到这一点。

<slot>Submit</slot>

</button>

如果父组件为这个插槽提供了内容，那么这个默认的内容就会被替换掉

9）动态组件&异步组件

在一个多标签的界面中使用is特性来切换不同的组件

Vue.component('tab-home', \{

\})

Vue.component('tab-posts', \{

\})

Vue.component('tab-archive', \{

\})

new Vue(\{

el: '\#dynamic-component-demo',

data: \{

currentTab: 'Home',

tabs: \['Home', 'Posts', 'Archive'\]

\},

computed: \{

currentTabComponent: function () \{

return 'tab-' + this.currentTab.toLowerCase()

\})

<button

v-for="tab in tabs"

v-bind:key="tab"

v-bind:class="\['tab-button', \{ active: currentTab === tab \}\]"

v-on:click="currentTab = tab"

>\{ \{ tab \}\}</button>

<component

v-bind:is="currentTabComponent"

class="tab"

></component>

这样实现的话，每次切换，都会重新渲染的。

当在这些组件进行切换的时候，有时会想保持这些组件的状态，以免反复重新渲染所导致的性能问题，为了解决这个问题，用一个keep-alive元素将动态组件包裹起来

<keep-alive>

<component

v-bind:is="currentTabComponent"

class="tab"

></component>

</keep-alive>

*  异步组件

所谓异步组件就是等到需要的时候，才会去服务器加载这个模块。vue用工厂函数的的方式定义组件，这个函数会异步的解析运行，也就是只有在需要被渲染的时候才会触发这个函数。

Vue.component('async-example', function (resolve, reject) \{

setTimeout(function () \{

// 向 \`resolve\` 回调传递组件定义

resolve(\{

\})

\}, 1000)

\})

我们来写一个类似于公众号历史记录这样的东西（就是div结构，样式都一样，仅仅是内容不一样的多个div）

<div class="unit">
    
        <div class="content">
    
            <h1>这是文章的标题</h1>
    
            <div class="info">
    
                <span>2018年11月14日</span>
    
                <span>原创</span>
    
            </div>
    
        </div>
    
        <img src="img/logo.jpg">
    
    </div>
    
    .unit{
    
        height: 200px;
    
        width: 90%;
    
        overflow: hidden;
    
        margin: 0 auto;
    
        background-color: #ffffff;
    
    }
    
    .content{
    
        width: 60%;
    
        height: 100%;
    
        float: left;
    
    }
    
    img{
    
        width: 40%;
    
        height: 100%;
    
        float: left;
    
    }
    
    .info{
    
        font-size: 16px;
    
        color: #cccccc;
    
    }
    
    .info span{
    
        margin: 0 15px;
    
    }
    
    .info span:nth-child(2){
    
        border: 1px solid #cccccc;
    
        border-radius: 7px;
    
    }
    
    
    
    接

其中基本的css代码和html的代码如下：下来定义一个组件，代码如下：，这个组件名叫myarticle，拥有props属性和template属性，其中pros属性用来接收参数，这些参数会在模板里面用到。

Vue.component('myarticle',{
    
        props:['detail'],
    
        template :' <div class="unit">\n' +
    
        '        <div class="content">\n' +
    
        '            <h1>{
       {detail.title}}</h1>\n' +
    
        '            <div class="info">\n' +
    
        '                <span>{
       {detail.date}}</span>\n' +
    
        '                <span v-show="detail.is_oringinal">原创</span>\n' +
    
        '            </div>\n' +
    
        '        </div>\n' +
    
        '        <img :src="detail.imgurl">\n' +
    
        '    </div>'
    
    });

然后创建一个vue实例，需要注意的是，一定要确保实例vm在创建之前，组件已经成功注册。

let vm = new Vue({
    
        el:"#app",
    
        data:{
    
            articles:[
    
                {
    
                    title:"这是第一个标题",
    
                    date:"2018年11月14日",
    
                    is_oringinal:true,
    
                    imgurl:"img/logo.jpg"
    
                },
    
                {
    
                    title:"这是第二个标题",
    
                    date:"2018年11月15日",
    
                    is_oringinal:true,
    
                    imgurl:"img/logo.jpg"
    
                },
    
                {
    
                    title:"这是第三个标题",
    
                    date:"2018年11月16日",
    
                    is_oringinal:true,
    
                    imgurl:"img/logo.jpg"
    
                }
    
            ]
    
        }
    
    })

注册完组件之后，就开始使用这个自定的组件

</div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 16][]

八.组件之间的通信

组件实例的作用域都是孤立的，**也就是子组件在模板中不能引用父组件的数据**。

1.父->子，父组件将数据传递给子组件

先创建一个实例

//创建一个vue实例

const app = new Vue(\{

el:"\#app",

data:\{

msg:"我是父组件的数据哦嘻嘻嘻"

\});

</script>

实例中含有数据msg。

注册子组件

Vue.component('son',\{

template:"<div></div>"

\})

并将子组件插入到父组件下面：

</div>

接下来我们开始传递数据，父组件向子组件传递参数，用组件提供的props属性，在下面的代码中，父组件app向son组件的：message属性传输了它自己的值msg。子组件message接收了这个参数，然后在组件的定义里面，用props来接收这一个值，并将这个值在div中输出。这样就完成了父组件传递给子组件了。props选项声明了它要接受的参数是message，而接收到的对应的值是父组件的数据msg。我们在子组件顺利地把message展示出来。

</div>

Vue.component('son',\{

props:\['message'\],

template:"<div>\{ \{message\}\}</div>"

\})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 17][]

而props是单向绑定的，也就是说子组件接收到这个值之后无论怎么修改，父组件中也不会受到影响。因为vue为了防止子组件无意修改了父组件的数据和状态，如果多个子组件任意地对父组件进行修改，会让数据流难以阅读。

2.子->父，子组件传数据给父组件。

父组件监听子组件的事件，并接收子组件传过来的数据

vue实例都有一个事件的接口，这个接口就是$emit(eventname)来触发一个事件

1.注册一个新组件

Vue.component('son',\{

template:\`<button @click="send">

点击

</button>\`,

methods:\{

send()\{

this.$emit('connect');

\});

一个按钮button，点击它的时候，会触发组件内部的send( )方法，而方法体里面会触发一个事件，事件名取名为：“connect”。

然后我们就去父组件监听这个事件‘connect’，监听方式跟普通原生的事件一模一样，也是用 v-on 指令，缩写用@符号。 我们采用缩写来监听：

</div>

const app = new Vue(\{

el:"\#app",

methods:\{

say()\{

console.log(\`大家好，我监听到了

事件connect的触发\`);

\});

这样，当点击按钮的时候，就成功调用了父组件的say函数。这时，我们只需要把子组件的数据，通过这个事件connect传递给父组件，就可以实现子->父的通信。在data函数里面返回需要返回的数据，并在$emit里面讲msg一并发射出去，在父组件中的say中接收

Vue.component('son',\{

props:\['message'\],

template:"<button @click = 'send'>点击</button>",

data()\{

return\{

msg:'大家好，我是儿子的数据'

\},

methods:\{

send()\{

this.$emit('connect',this.msg);

\})

const  app = new Vue(\{

el:"\#app",

methods:\{

say(msg)\{

console.log("hello，我监听到了子组件的connect事件的触发,儿子的数据是"+msg);

\})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 17][]

这样就完成了子->父组件的数据传输

九.动态绑定class和style

1.class的绑定

1）对象法：动态绑定的class的值是一个对象\{\}，键是一个样式名，而值是是否显示这个样式。在对象中，若该属性对应的value为true，则该属性会被渲染出来，为false，则不会渲染出来。并且这写法可以与单独的class属性可以共存

let  vm = new Vue(\{

el:"\#app",

data:\{

isActive:true,

error:"active",

active:"erro",

color:"red",

ifshow:"block",

\})

2）数组法,数组语法中也可以使用对象语法：

<p :class="\[active,errorc\]">hello</p>

数组中的值在实例中对应的值是一个属性样式，也就是说数组法中html中数组的值可以不是一个样式名，只要它在vue实例中data中对应的键值的值是一个样式名。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 18][]

2.style的绑定（绑定内联样式style）

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

1）对象语法，需要注意的是这样绑定的属性之间要用逗号隔开，不要用分号

<p :style="\{color:color,display:ifshow\}">world</p>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 18][]

2）数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

当 **v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀**。

你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

3.用在组件上

当在一个自定义组件上使用class属性的时候，**这些类将被添加到该组件的根元素上面**。这个元素上**已经存在的类不会被覆盖**。

例如，如果你声明了这个组件：

Vue.component('my-component', \{

\})

然后在使用它的时候添加一些 class：

<my-component class="baz boo"></my-component>

HTML 将被渲染为:

对于带数据绑定 class 也同样适用：

<my-component v-bind:class="\{ active: isActive \}"></my-component>

当 isActive 为 truthy 时，HTML 将被渲染成为：

十.demo，做一个TODOlist

确定T

十一.用transition组件轻松实现过渡效果

1.transition过度原理分析

vue提供的transition组件会在以下四种情况下起作用

*  条件渲染（v-if）
 *  条件展示(v-show)
 *  动态组件
 *  组件根节点

在上述的任意一种情况发生的时候（比如v-show的值本来为true的时候，当发生某种变化导致值变为false的时候），就可以给transition组件包含的节点元素添加enter或leave过度动画元素。

当插入或删除包含在transition组件中的元素时，vue将会做以下的处理

*  自动嗅探目标元素是否应用了css过渡或动画，如果是，在适当的时候添加或者删除css类名
 *  如果过渡组件提供了JavaScript钩子函数，这些钩子函数将会在恰当的时机被调用
 *  如果没有找到JavaScript钩子也没有检测到css过渡/动画，dom操作在下一帧立即执行

下面的v在实际应用改成transition中name属性的值

*  v-enter：定义过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。
 *  v-enter-active：定义过渡生效时的状态，在整个进入过渡的阶段都会应用，在元素被完全插入之前生效，在过渡或者动画完成之后被移除。（就是这个类来定义过渡的时间等)
 *  v-enter-to：定义过渡的结束状态，在元素被插入之后下一帧生效，在过渡或者动画完成之后被移除。
 *  v-leave：离开过渡的开始的那一刻（用在从显示到隐藏的时候）
 *  v-leave-active：离开过渡的的持续状态，在整个离开过渡的阶段中应用（在这里定义过渡的时间等）
 *  v-leave-to离开过渡的结束状态，在离开过渡被触发之后下一帧生效。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 19][]

需要注意的是

**节点一定要被transition元素包含**

**transition的name属性一定要与css类名开始的地方相同（如果没有使用name属性，那么类名前缀为v）**

2.例子

<button @click="show = !show">toggle</button>

<p v-if="show">hello</p>

</transition>

</div>

let vm = new Vue(\{

el:"\#test",

data:\{

show:false

\});

</script>

.fade-enter-active, .fade-leave-active \{

/\*定义过渡的状态\*/

transition: all 1.5s ease;

.fade-enter, .fade-leave-to  \{

/\*定义进入动画的状态，以及离开动画最后结束的状态\*/

transform: translateX(20px);

（2）css动画

在动画中，v-enter类名在节点插入dom后不会立即删除，而是在animationend时间触发时删除。

（也就是说，直到触发动画事件的时候才会删除这个类名）

.animate-enter-active\{

animation: bounze 1s;

.animate-leave-active\{

animation: bounze 1.5s reverse;

@keyframes bounze \{

0%\{

transform: translateX(0px);

50%\{

transform: translateX(20px);

100%\{

transform: translateX(40px);

（3）自定义过渡类名

可以通过自定义类名来使用其他第三方css动画库里面的类名（在transition元素上面指定自定义的类名）

*  \* enter-class
 *  \* enter-active-class
 *  \* enter-to-class (2.1.8+)
 *  \* leave-class
 *  \* leave-active-class
 *  \* leave-to-class (2.1.8+)

Toggle render

</button>

<transition

name="custom-classes-transition"

enter-active-class="animated tada"

leave-active-class="animated bounceOutRight"

<p v-if="show">hello</p>

</transition>

</div>

（4）JavaScript钩子

就是在transition 过渡或者动画中使用JavaScript的的处理函数进行处理，有一下八个钩子

*  before-enter
 *  enter
 *  after-enter
 *  enter-cancelled
 *  before-leave
 *  leave
 *  after-leave
 *  leave-cancelled

<transition

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"

v-on:leave="leave"

v-on:after-leave="afterLeave"

v-on:leave-cancelled="leaveCancelled"

</transition>

// ...

methods: \{

// --------

// 进入中

// --------

beforeEnter: function (el) \{

// ...

\},

// 当与 CSS 结合使用时

// 回调函数 done 是可选的

enter: function (el, done) \{

// ...

done()

\},

afterEnter: function (el) \{

// ...

\},

enterCancelled: function (el) \{

// ...

\},

// --------

// 离开时

// --------

beforeLeave: function (el) \{

// ...

\},

// 当与 CSS 结合使用时

// 回调函数 done 是可选的

leave: function (el, done) \{

// ...

done()

\},

afterLeave: function (el) \{

// ...

\},

// leaveCancelled 只用于 v-show 中

leaveCancelled: function (el) \{

// ...

当仅仅使用JavaScript过渡的时候，需要有两个注意事项

*  在enter和leave中必须使用done来进行回调
 *  在transition中使用v-bind:css="false"，这样vue会跳过css的检测。

（5）初始渲染的过渡

可以通过appear特性来设置节点在初始渲染的过渡

（6）多个元素的过渡

就是多个元素之间只显示其中一个，当状态发生改变的时候，显示的元素不一样，就会出现元素之间的过渡。值得注意的是，官网推荐在相同标签名的元素之间进行切换的时候，需要给这些元素设置key特性，并拥有不一样的值，否则vue为了效率只会替换相同标签内部的内容。

Save

</button>

Edit

</button>

此外，在vue中，当两个元素进行过度的时候，transition的默认行为是进入和离开同时发生，那么此时两个元素就都会同时发生过度效果，这会影响效果，所以vue中有一个过渡模式

这个模式有两个值，分别是

*  out-in 离开元素先过渡然后再到进入的元素过渡
 *  in-out 与上面相反

Save

</button>

Edit

</button>

</transition>

（6）多个组件的过渡

多个组件的过渡使用动态组件

Vue.component("tab-home",\{

template:\`<p>this is home</p>\`

\});

Vue.component("tab-aboutus",\{

template:\`<p>this is aboutus</p>\`

\});

Vue.component("tab-vechicle",\{

template:\`<p>this is vechicle</p>\`

\});

let vm = new Vue(\{

el:"\#test",

data:\{

buts:\["home","aboutus","vechicle"\],

currentTab:"home"

\},

computed:\{

currentActiveTab:function () \{

return "tab-"+this.currentTab;

\});

\{ \{but\}\}

</button>

<keep-alive>

</keep-alive>

</transition>

</div>

（7）列表过渡

**使用transition-group组件包含列表元素**

使用transition-group的特点

*  不同于transition，它会以一个真实的元素呈现，默认为一个span，可以通过tag特性来更改为其他元素
 *  过渡模式不可以用，因为不再切换其他元素
 *  内部元素总是需要有一个唯一的key属性

new Vue(\{

el: '\#list-demo',

data: \{

items: \[1,2,3,4,5,6,7,8,9\],

nextNum: 10

\},

methods: \{

randomIndex: function () \{

return Math.floor(Math.random() \* this.items.length)

\},

add: function () \{

this.items.splice(this.randomIndex(), 0, this.nextNum++)

\},

remove: function () \{

this.items.splice(this.randomIndex(), 1)

\},

\})

<button v-on:click="remove">Remove</button>

<transition-group name="mutiple" tag="p">

\{ \{ item \}\}

</span>

</transition-group>

</div>

.mutiple-item \{

display: inline-block;

margin-right: 10px;

.mutiple-enter-active,.mutiple-leave-active\{

transition: all 1s ;

.mutiple-enter,.mutiple-leave-to\{

transform: translateY(10px);

列表的排序过渡，transition-group组件还有一个特殊之处，不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需要了解新增的v-move特性，他会在元素的改变定位的过程中应用。

css的类名可以使用name属性自定义前缀，也可以通过move-class属性手动设置。

十二.vue-router

1.vue-router是vue官方的路由插件，适合用于构建单页面应用。

2.先引入vue-router

3.准备组件，vue-route给我们提供了两个新组件，<router-link>和<router-link>组件，其中link是用于帮助用户进行视图导航，也就是传统页面中a标签所做的事情，用to来指定组件的位置。而view组件负责渲染匹配到的视图组件，也就是渲染link指向的目标地址，

<router-link to="/hins">张敬轩</router-link>

<router-link to="/ste">孙燕姿</router-link>

<router-link to="/adele">Adele</router-link>

</div>

<router-view></router-view>

</div>

接下来定义视图组件以及与导航地址关联起来。创建一个router实例，创建实例的时候我们需要传参数routes来进行配置。

const hins = \{

template:\`<div>这是张敬轩的页面</div>\`

\};

const ste = \{

template:\`<div>这是孙燕姿</div>\`

\};

const  adele = \{

template:\`<div>这是Adele</div>\`

\};

const router = new VueRouter(\{

routes:\[

path:"/hins",

component:hins

\},

path:"/ste",

component:ste

\},

path:"/adele",

component:adele

\});

最后，创建一个vue实例，创建的时候通过配置router参数来注入我们刚定义好的router路由

//创建vue实例，注入路由router

const app = new Vue(\{

el:"\#app",

router //此处是ES6语法，

//相当于router:router

\});

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 20][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 21][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 22][]

十三.vuex

1.vuex是什么？

vuex是一个专为vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果你想想修改这个全局对象的数据？是可以的，但没那么简单，你得按照Vuex提供的方式来修改，不能自己随意用自己的方式来修改

（1）vue的状态存储是响应式的，方你的组件使用到了这个vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据。

（2）不能直接修改vuex的状态，想修改就得使用vuex提供的唯一途径：显示地提交mutations来实现修改，

2.vuex的3个核心概念

（1）要使用vuex，就要创建一个实例store，我们称之为仓库，利用这个仓库对状态进行管理

const store = new Vuex.Store(\{\});

（2）State

vuex使用单一状态树，用一个对象state包含了整个应用层级的所有状态。在下面代码中，假如我们有一个全局状态count，值为5，就可以将其定义为state对象里面的一对键值对，作为全局状态供我们使用。

const store = new Vuex.Store(\{

state:\{

count:5

\});

（2）Getters

当我们需要从state中派生出一些状态的时候，就会使用到getters，相当于getters是state的计算属性。

const store = new Vuex.Store(\{

state:\{

count:5

\},

getters:\{

newCount:state =>state.count\*3

\});

（3）mutations

vuex给我们提供修改仓库store中的状态的唯一方法就是通过提交mutation。

定义一个mutations：

const store = new Vuex.Store(\{

state:\{

count:5

\},

getters:\{

newCount:state =>state.count\*3

\},

mutations:\{

increment(state)\{

state.count ++;

\});

定义好了后就必须要提交mutation，语法如下：

store.commit('increment');

4.例子

需求：做一个计算器，那么运算的结果result和输入的值enter就是会跟每一个组件（按键）

相关联的，所以这里我们将result和enter作为应用层的状态（全局数据）来处理，这里就会简单的使用到vuex提供的仓库store。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 23][]

首先完成上面界面的实现。

一共有3个主要区域，一个运算的结果，一个输入的结果，还有按键区域。

按键区域的使用可以使用组件来实现，定义一个keyboard组件，根据传入的参数来定义不一样的按键。

</div>

Vue.component("keyboard",\{

props:\['value'\],

template:\`<div

:data-value="value">

\{ \{value\}\}

</div>\`

\});

const app = new Vue(\{

el:"\#app",

data:\{

keys:\[

'clear','+','-','\*',

'7','8','9','/',

'4','5','6','0',

'1','2','3','=',

\});

</script>

\#app\{

width: 100%;

height: 100%;

.result\{

width: 324px;

height: 56px;

font-size: 34px;

margin-left: 178px;

.enter\{

width: 324px;

height: 50px;

font-size: 24px;

margin-left: 218px;

.keys\{

width: 324px;

height: 324px;

.list div\{

width: 80px;

height: 80px;

line-height: 80px;

background-color: \#efefef;

border: 0.5px solid \#cccccc;

border-bottom: none;

border-right: none;

float: left;

text-align: center;

font-size: 18px;

vertical-align: center;

.list div:first-child\{

color: \#ff8282;

.list div:last-child\{

color: white;

background-color: \#ff8282;

界面实现了，接下来就是数据的显示以及如何进行数据绑定，当按键被按下的时候，显示输入的值以及运算的结果。这时候，组件们就共用到了result和enter这两个值，所以我们首先需要建立仓库来管理它们，并初始化为空字符串

const store = new VUex.Store(\{

state:\{

result:"",

enter:""

\})

vuex提供了store选项，允许我们将仓库store引入到根组件中，并且此跟组件的所有子组件都可以使用仓库store，而且子组件无需显示的引入。

首先我们在vue实例下面引入我们的仓库store

const app = new Vue(\{

el:"\#app",

data:\{

keys:\[

'clear','+','-','\*',

'7','8','9','/',

'4','5','6','0',

'1','2','3','=',

\},

store,

引入之后我们就来使用，那么怎么使用仓库的result和enter呢？我们这里用到vue的computed计算属性。通过this.$store来回去仓库，然后this.$store.state来获取属性，最后用this.$store.state.result来获取仓库里的result。同理获得enter

computed:\{

result()\{

return this.$store.state.result;

\},

enter()\{

return this.$store.state.enter;

将result和enter显示在html代码里面

<div class="result">\{ \{result\}\}</div>

<div class="enter">\{ \{enter === ""?0:enter\}\}</div>

最后，绑定按键的点击事件，当我们点击键盘的时候，对仓库的result和enter进行修改。但是vuex中不能任意修改应用层的状态，所以就通过它提供的唯一的途径：通过commit提交mutation。当用户点击键盘的时候我们就提交一个mutation，并把当前按的键对应的值传过去。所以我们要重新定义keyboard组件的事件。

Vue.component("keyboard",\{

props:\['value'\],

template:\`<div

@click="getKeyboardValue"

:data-value="value">

\{ \{value\}\}

</div>\`,

methods:\{

getKeyboardValue(event)\{

let value=event.target.dataset.value;

this.$store.commit('calculate',value)

\});

增加了一个监听点击事件的处理函数getKeyboardValue，我们会提交体格名为calculate的mutation给仓库，并将当前按键的值一起提交过去。这个calculate的mutation要在仓库中定义

const store = new Vuex.Store(\{

state:\{

result:"",

enter:""

\},

mutations:\{

calculate(state,value)\{

if (value === '=')\{

state.result = eval(state.enter);

state.enter+=value;

\}else if (value === 'clear')\{

state.result = state.enter = "";

\}else \{

state.enter +=value;

\});

十四.使用axios

（1）get请求

axios.get('detail.html?id=10').then(function (res) \{

console.log(res);

\}).catch(function (err) \{

console.log(err);

\});

axios.get('detail.html',\{

params:\{

id :10

\}).then(function (res) \{

console.log(res);

\}).catch(function (err) \{

console.log(err)

\})

（2）post请求

axios.post('detail.html',\{

name:"krys",

age:22

\}).then(function (res) \{

console.log(res)

\}).catch(function (err) \{

console.log(err);

\})

（3）多个请求并发

function getProfile()\{

//请求1

return axios.get('vuex.html');

function getUser()\{

//请求2

return axios.get('todo.html');

//并发请求

axios.all(\[

getProfile(),

getUser()

\]).then(axios.spread((res1, res2)=>\{

//两个请求现已完成

console.log(res1);

console.log(res2);

\}));

![20190902101819295.png][]

我们事先定义了两个方法getProfile（）和getUser（）帮我们实现get请求。在某个业务场景中，我们需要同时产生以上两个get请求，并需要等待它们都请求完毕后再做逻辑处理，你也许会想到回调嵌套，但现在你可以使用axios的并发请求API: axios.all()

当这两个请求都完成的时候会触发 axios.spread() 函数，res1和res2两个参数分别代表返回的结果，相当实用的API。

上面的写法当中是axios提供给我们的别名写法，也可以写成下面这样

axios(\{

method: 'post',

url: 'detail.html',

data: \{

\});

十五、官网上看到的一些总结

1.使用object.freeze()会阻止修改现有的属性，也就是说，当代码中使用了Object.freeze(obj)，那么在vue实例中将不会再追踪这个对象的变化。（仅仅针对data属性中的值是外部的一个对象）

<button v-on:click="foo = 'baz'">Change it</button>

</div>

var obj = \{

foo: 'bar'

Object.freeze(obj);

new Vue(\{

el: '\#app',

data: obj

\})

2.混入

（1）什么是混入？

混入（mixins）是一种分发vue组件中可以重复使用的功能的方式。

混入对象可以包含任意组件选项。当组件使用混入对象是，所有混入独享的选项将被混入该组件本身的选项。（其实就是多个组件中相同功能的部分）

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

（2）当组件和混入对象含有同名选项的时候，以下面这些方式进行混合

*  数据对象在内部会进行递归合并，在和组件的数据发生冲突的时候以组件数据为优
 *  同名钩子函数将混为同一个数组，因此两个都会被调用，但是混入对象的钩子将会在组件自身钩子之前被调用
 *  值为对象的选项，例如methods，components等将会被混合为同一个对象，当两个对象里面属性名冲突的时候，取组件对象的键值对

var mixin = \{

data: function () \{

return \{

message: 'hello',

\},

created: function () \{

console.log('混入对象的钩子被调用')

\},

methods: \{

foo: function () \{

console.log('foo')

\},

conflicting: function () \{

console.log('from mixin')

\};

let vm =  new Vue(\{

el:"\#list-demo",

mixins: \[mixin\],

data: function () \{

return \{

message: 'goodbye',

\},

created: function () \{

console.log('组件的钩子被调用')

\},

methods:\{

bar: function () \{

console.log('bar')

\},

conflicting: function () \{

console.log('from self')

\});

vm.foo() // => "foo"

vm.bar() // => "bar"

vm.conflicting() // => "from self"

（3）全局混入

全局声明混入对象，在全局混入对象中声明的属性，会影响所有的vue实例。

全局声明混入对象的代码

// 为自定义的选项 'myOption' 注入一个处理器。

Vue.mixin(\{

created: function () \{

var myOption = this.$options.myOption

if (myOption) \{

console.log(myOption)

\})

let vm =  new Vue(\{

el:"\#list-demo",

data: function () \{

return \{

message: 'goodbye',

\},

myOption:"hello"

\});

这样控制台会立即打印出hello

大多数情况下，只应当应用于自定义选项，就像上面示例一样。

3.自定义指令

自定义全局指令

Vue.directive("myfirst",\{

inserted:function (el) \{

el.focus();

\});

自定义局部指令

directives: \{

focus: \{

// 指令的定义

inserted: function (el) \{

el.focus()

然后可以在模板中的任何元素上面使用

此外，指令定义对象有如下几个钩子函数（均为可选）

*  bind：只调用一次，指令第一次绑定到元素时调用
 *  inserted：被绑定你元素插入父节点时调用（也就是dom生成的时候调用）
 *  update：所在组件爱你的vnode更新时调用
 *  componentUpdated所在组件的vnode及其子vnode全部更新后调用
 *  unbind：只调用一次，指令与元素解绑时调用

这些钩子函数会被传入下面这些参数

\* el：指令所绑定的元素，可以用来直接操作 DOM 。

\* binding：一个对象，包含以下属性：

\* name：指令名，不包括 v- 前缀。

\* value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

\* oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

\* expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1"中，表达式为 "1 + 1"。

\* arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

\* modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 \{ foo: true, bar: true \}。

\* vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

\* oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

4、渲染函数以及JSX

在vue中使用render生成html代码

Vue.component('anchored-heading', \{

render: function (createElement) \{

return createElement(

'h' + this.level,   // 标签名称

this.$slots.default // 子元素数组

)

\},

props: \{

level: \{

required: true

\});

（2）虚拟DOM

虚拟节点：包含的信息会告诉vue页面上需要渲染什么样的节点，以及其子节点。如下面会返回一个虚拟及诶单

createElement('h1', this.blogTitle)

createElement(

// \{String | Object | Function\}

// 一个 HTML 标签字符串，组件选项对象，或者

// 解析上述任何一种的一个 async 异步函数。必需参数。

'div',

// \{Object\}

// 一个包含模板相关属性的数据对象

// 你可以在 template 中使用这些特性。可选参数。

// (详情见下一节)

\},

// \{String | Array\}

// 子虚拟节点 (VNodes)，由 \`createElement()\` 构建而成，

// 也可以使用字符串来生成“文本虚拟节点”。可选参数。

'先写一些文字',

createElement('h1', '一则头条'),

createElement(MyComponent, \{

props: \{

someProp: 'foobar'

\})

)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220319/d3881b5e054d4a8f8b0ec72b30eb56df.png
[20190902103521307.png]: /images/20220319/27f3dc4f73244c7aae78dd04127027a8.png
[2019090210181973.png]: /images/20220319/64c571065c4747b5b9d16c5d2a2722f0.png
[2019090210181980.png]: /images/20220319/7fc710bee2714a7081cc412907e28d63.png
[2019090210181967.png]: /images/20220319/e336ae02a2c640eaa1d7df22f8377405.png
[2019090210182078.png]: /images/20220319/b9c8ec6aebc740139e7a00d578118c2a.png
[2019090210181968.png]: /images/20220319/b1520d8b427d419398b967288ccb7fa4.png
[2019090210181975.png]: /images/20220319/22c54249b5aa41ee8149ca43cedfebbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220319/fdfbfc3b14d2497dbc6c24c3b41d48a4.png
[2019090210181971.png]: /images/20220319/a6b91ed52e9648cbabdbc66b55ac8c07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20220319/b27b4de3f2d643eea4116110517ed83f.png
[20190902101819114.png]: /images/20220319/1afba774648741d79374ae900f6c7f4b.png
[20190902101819167.png]: /images/20220319/5283330fe56b4e7b87012cf339c18505.png
[20190902101819204.png]: /images/20220319/aa387185c67a4a5a911ef5bf85bbaa99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3]: /images/20220319/951927e88af9421c8da1c5e917c6dbe7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 4]: /images/20220319/ae8444dd703f4a1fba70afa9f786aa31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 5]: /images/20220319/c8dc790b1ee0451398bd76a485d47fd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 6]: /images/20220319/2ca07afe35614feb9eb03545273b9b60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 7]: /images/20220319/2ac75d16ff644b61a6bffec06a11a3af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 8]: /images/20220319/0e66880855424a5b98da096d49633a32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 9]: /images/20220319/e5f252324ecb49d1b088e4f8c9ba78d3.png
[20190902101819175.png]: /images/20220319/bc3bf8df69464d72b93e9696f7d94f9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 10]: /images/20220319/bd8142d306e942ef9ab995a4b7278493.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 11]: /images/20220319/172c1ed7c17c46ce9a923e6a7973025f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 12]: /images/20220319/951a7f6350ee4cd48164419cbf50ca44.png
[Vue.component]: http://vue.component/
[20190902101819190.png]: /images/20220319/f9dbe249f7634abda100bb28b23a18a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 13]: /images/20220319/91408edc6f63493bbd1774fff654dbec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 14]: /images/20220319/8d20d8217fd441f7b7a08d857856ec6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 15]: /images/20220319/4ee0b4bbdb694e48a8b6d947097c8129.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 16]: /images/20220319/8d684ab59e95465c83f15f276c423cbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 17]: /images/20220319/415862ec67c446518a245357dfe877b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 18]: /images/20220319/630d4fc4c2a94025b85b8007e32fcaf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 19]: /images/20220319/52a12d169a0242a4af64b6bb3955a8fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 20]: /images/20220319/067ff6d2a9d349be889fbd8e7e2d4e3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 21]: /images/20220319/604719aeacc0479bb74c7d5314d3aa7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 22]: /images/20220319/aea8128c68744ed3828f9d3f034a0ca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 23]: /images/20220319/4e4d8c6721624424b6fc741d38a93e15.png
[20190902101819295.png]: /images/20220319/43d4ecf552a241c5bed760040efc52a3.png