Vue知识点全集

Posted 2021-06-07 过往将来

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue知识点全集相关的知识，希望对你有一定的参考价值。

Vue.js简介

Vue 是一套用于构建用户界面的渐进式框架，与其他框架不同，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关心图层，简单易上手，还可以与第三方库整合

Vue基础语法、

    <div id="vue_id">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                site: "菜鸟教程",
                url: "www.runoob.com",
                alexa: "10000"
            },
            methods: {
                details: function() {
                    return  this.site + " - 学的不仅是技术，更是梦想！";
                }
            }
        })
    </script>
    Vue 定义数据对象
    1. data 用于定义属性，实例中三个属性 
    2. methods 用于定义的函数，可以通过return返回函数值
    3. {{}} 用于输出对象属性和函数返回值
    
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>

每个Vue 应用都需要通过实例化Vue来实现，语法：var vm = new Vue({// 选项})
在Vue构造器中有一个el参数，它是DOM元素中的id ，在上面实例中 id 为 vue_id ，在div 元素中，这意味着我们所进行操作全部都在指定的div中，div 外部不受影响
当一个Vue 实例被创建时，它向Vue的响应式系统中加入了其data 对象中能找到的所有属性，当这些属性的值发生变化时，html 视图也会产生相应的变化

    
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "百度", url: "www.baidu.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
    document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "baidu"
    document.write(data.site + "<br>") // Runoob
     
    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>

Vue 模板语法

Vue 使用了基于HTML的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心就是允许使用简单的模板语法来声明式的将数据渲染进DOM的系统

    
    1. 数据绑定最常见的形式就是使用 {{ }} (双大括号)的文本插值
        <div id="app">
          <p>{{ message }}</p>
        </div>
    2. 使用 v-html 指令输出html 代码
        <div id="app">
            <div v-html="message"></div>
        </div>
            
        <script>
        new Vue({
          el: '#app',
          data: {
            message: '<h1>菜鸟教程</h1>'
          }
        })
        </script>
    3. HTML属性中的值应该使用 v-bind 指令
    实例一：判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
        <div id="app">
          <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
          <br><br>
          <div v-bind:class="{'class1': use}">
            v-bind:class 指令
          </div>
        </div>
            
        <script>
        new Vue({
            el: '#app',
          data:{
              use: false
          }
        });
        </script>
    4. Vue 提供了完全的JS表达式支持
        <div id="app">
            {{5+5}}<br>
            {{ ok ? 'YES' : 'NO' }}<br>
            {{ message.split('').reverse().join('') }}
            <div v-bind:id="'list-' + id">菜鸟教程</div>
        </div>
            
        <script>
        new Vue({
          el: '#app',
          data: {
            ok: true,
            message: 'RUNOOB',
            id : 1
          }
        })
        </script>
    5. 指令时代有 v-前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到 DOM 上
    6. v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
        <div id="app">
            <p v-if="seen">seen = "true" 指令生效</p>
        </div>
            
        <script>
        new Vue({
          el: '#app',
          data: {
            seen: true
          }
        })
        </script>
    7.参数时在指令后以冒号指明，例如， v-bind 指令被用来响应地更新 HTML 属性：
        <div id="app">
            <pre><a v-bind:href="url">菜鸟教程</a></pre>
        </div>
            在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
        <script>
        new Vue({
          el: '#app',
          data: {
            url: 'http://www.baidu.com'
          }
        })
        </script>
        
        v-on 指令，它用于监听 DOM 事件：<a v-on:click="doSomething"> 在这里参数是监听的事件名。
    
    8. 双向数据绑定：用户输入
    9. 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
        <div id="app">
            <p>{{ message }}</p>
            <input v-model="message">
        </div>
            
        <script>
        new Vue({
          el: '#app',
          data: {
            message: 'Runoob!'
          }
        })
        </script>
    10. v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
    
    11. v-bind : 完整语法：<a v-bind:href="url"></a>。 缩写 ：<a :href="url"></a>
    12 v-on : 完整语法： <a v-on:click="doSomething"></a> 缩写 ：<a @click="doSomething"></a>

Vue 条件语句

条件判断使用 v-if 指令

    <div id="app">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
          <h1>百度</h1>
        </template>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        seen: true,
        ok: true
      }
    })
    </script>
    1. v-if 指令将根据表达式seen的值（true or false）来决定时否插入 template 组件

使用 v-else 指令给v-if添加一个 else 块

    随机生成一个数字，判断是否大于0.5，然后输出对应信息：
    <div id="app">
        <div v-if="Math.random() > 0.5">
          大于0.5
        </div>
        <div v-else>
         小于0.5
        </div>
    </div>
        
    <script>
    new Vue({
      el: '#app'
    })
    </script>

用作 v-if 的 else-if 块。可以链式的多次使用：

    判断 type 变量的值：
    <div id="app">
        <div v-if="type === 'A'">
          A
        </div>
        <div v-else-if="type === 'B'">
          B
        </div>
        <div v-else-if="type === 'C'">
          C
        </div>
        <div v-else>
          Not A/B/C
        </div>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
    </script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show 指令来根据条件展示元素

    当 data 中的 ok 为 true 时，显示 Hello!
    <div id="app">
        <h1 v-show="ok">Hello!</h1>
    </div>
    	
    <script>
    new Vue({
      el: '#app',
      data: {
        ok: true
      }
    })
    </script>

Vue 循环语句

循环使用 v-for 指令；需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

1. 使用 v-for 来绑定数据到数组来渲染一个列表：
    <div id="app">
      <ol>
        <li v-for="site in sites">
          {{ site.name }}
        </li>
      </ol>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        sites: [
          { name: 'baidu' },
          { name: 'Google' },
          { name: 'Taobao' }
        ]
      }
    })
    </script>
2. 在模板中使用 v-for 
    <ul>
      <template v-for="site in sites">
        <li>{{ site.name }}</li>
        <li>--------------</li>
      </template>
    </ul>

v-for 可以通过一个对象的属性来迭代数据

1. 使用v-for 正常的读取数据
    <div id="app">
      <ul>
        <li v-for="value in object">
        {{ value }}
        </li>
      </ul>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        object: {
          name: '菜鸟教程',
          url: 'http://www.runoob.com',
          slogan: '学的不仅是技术，更是梦想！'
        }
      }
    })
    </script>
2. 可以提供第二个参数为键名
    <div id="app">
      <ul>
        <li v-for="(value, key) in object">
        {{ key }} : {{ value }}
        </li>
      </ul>
    </div>
3. 第三个参数为索引
    <div id="app">
      <ul>
        <li v-for="(value, key, index) in object">
         {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
    </div>
4. v-for 迭代整数
    <div id="app">
      <ul>
        <li v-for="n in 10">
         {{ n }}
        </li>
      </ul>
    </div>

Vue 计算属性 computed

计算属性可以处理一些复杂的逻辑时

1. 实例一：输出结果为 [ "!", "u", "d", "i", "a", "b" ]
    <body>
    <div id="app">
      {{ message.split('').reverse()}}
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      }
    })
    </script>
    </body>
2. 实例二：输出结果为 [ "!", "u", "d", "i", "a", "b" ]
3. 实例二中声明了一个计算属性 reversedMessage 
4. vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。


    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
     
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'baidu!'
      },
      computed: {
        // 计算属性的 get
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse()
        }
      }
    })
    </script>
5. 实例三：可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
    methods: {
      reversedMessage2: function () {
        return this.message.split('').reverse().join('')
      }
    }

Vue 监听属性：通过 watch 来响应数据的变化。

实例一：通过使用 watch 实现计数器：

    <body>
    <div id = "app">
     <p style = "font-size:25px;">计数器: {{ counter }}</p>
     <button @click = "counter++" style = "font-size:25px;">点我</button>
    </div>
    <script type = "text/javascript">
     var vm = new Vue({
        el: '#app',
        data: {
           counter: 1
        }
     });
     vm.$watch('counter', function(changCounter,counter) {
        alert('计数器值的变化 :' + counter + ' 变为 ' + changCounter + '!');
     });
    </script>
    </body>

实例二：进行千米与米之间的换算

    <div id = "computed_props">
        千米 : <input type = "text" v-model = "kilometers">
        米 : <input type = "text" v-model = "meters">
    </div>
    <p id="info"></p>
    <script type = "text/javascript">
        var vm = new Vue({
        el: '#computed_props',
        data: {
            kilometers : 0,
            meters:0
        },
        methods: {
        },
        computed :{
        },
        watch : {
            kilometers:function(val) {
                this.kilometers = val;
                this.meters = this.kilometers * 1000
            },
            meters : function (val) {
                this.kilometers = val/ 1000;
                this.meters = val;
            }
        }
        });
        // $watch 是一个实例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    })
    </script>

实例二中创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

Vue 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

1. 实例一： OK 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
    <body>
    <div id="app">
      <div v-bind:class="{ 'active': ok }"></div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        ok: true
      }
    })
    </script>
    </body>
2. 在对象中传入更多属性用来动态切换多个class 
    <style>
    .active {
    	width: 100px;
    	height: 100px;
    	background: green;
    }
    .text-danger {
    	background: red;
    }
    </style>
    <body>
    <div id="app">
      <div class="static"
         v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
      </div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
    	hasError: true
      }
    })
    </script>
3. 实例三 ：利用data 中的属性值来操纵样式
    <style>
    .active {
    	width: 100px;
    	height: 100px;
    	background: green;
    }
    .text-danger {
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="app">
      <div v-bind:class="classObject"></div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          'text-danger': false
        }
      }
    })
    </script>
    </body>
4. 利用 v-bind 来将传递数组来改变样式
    <style>
    .active {
    	width: 100px;
    	height: 100px;
    	background: green;
    }
    .text-danger {
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="app">
    	<div v-bind:class="[activeClass, errorClass]"></div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
    </script>
    </body>

Vue 事件处理器

事件监听使用 v-on 指令

1. 实例一：利用 v-on 指令实现点击加一、
    <div id="app">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })
    </script>
    
2. v-on 指令的第二种使用情况：通过一个函数来使用
    <body>
    <div id="app">
       <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        name: 'baidu'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          // `this` 在方法里指当前 Vue 实例
          alert('Hello ' + this.name + '!')
        }
      }
    })
    // 也可以用 JavaScript 直接调用方法
    app.greet() // -> 'Hello baidu'
    </script>
    </body>
3. v-on 的第三种使用方式，内联 JS语句
    <div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })
    </script>

什么时冒泡和捕获

    ```
        <div id="div1" onclick = funTwo() >
            <p id="p1" onclick=funOne() >这是一个段落。</p>
        </div>
    ```
    1. 事件传递定义了元素事件触发的顺序。
    2. 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： `<p>` 元素的点击事件先触发，然后会触发` <div> `元素的点击事件。
    3. 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：` <div>` 元素的点击事件先触发 ，然后再触发 `<p> `元素的点击事件。

使用 v-on 处理事件修饰符常用的语句，Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

    1. <a v-on:click.stop="doThis"></a> 阻止单击事件冒泡 
    2. <form v-on:submit.prevent="onSubmit"></form> 提交事件不再重载页面 
    3. <a v-on:click.stop.prevent="doThat"></a>  修饰符可以串联
    4. <div v-on:click.self="doThat">...</div>   只当事件在该元素本身（而不是子元素）触发时触发回调
    5. <a v-on:click.once="doThis"></a>  click 事件只能点击一次，2.1.4版本新增

利用 v-model 实现数据的双向绑定

![b7336f36c321ed604355174d66bd53cb.png](:/a42c57300b1b4a3dbbfc8ef6c3cb62f2)

v-model 指令在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。

1. 实例一：利用 v-model 实现数据的双向绑定
    <div id="app">
      <p>input 元素：</p>
      <input v-model="message" placeholder="编辑我……">
      <p>消息是: {{ message }}</p>
        
      <p>textarea 元素：</p>
      <p style="white-space: pre">{{ message2 }}</p>
      <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'baidu',
        message2: '安阳师范攻城狮！'
      }
    })
    </script>
2. 实例二：利用 v-model 绑定多个复选框
    <div id="app">
      <p>单个复选框：</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{ checked }}</label>
        
      <p>选出你最喜欢的浏览器：</p>
      <input type="checkbox" id="runoob" value="百度" v-model="checkedNames">
      <label for="runoob">Runoob</label>
      <input type="checkbox" id="google" value="谷歌" v-model="checkedNames">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="UC" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {{ checkedNames }}</span>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        checked : false,
        checkedNames: []
      }
    })
    </script>
3. 单选按钮的双向数据绑定
   <body>
    <div id="app">
      <input type="radio" id="baidu" value="baidu" v-model="picked">
      <label for="baidu">baidu</label>
      <br>
      <input type="radio" id="google" value="Google" v-model="picked">
      <label for="google">Google</label>
      <br>
      <span>选中值为: {{ picked }}</span>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
    	picked : 'Runoob'
      }
    })
    </script>
    </body>
4. 利用 v-model 绑定一个 select 列表
    <body>
    <div id="app">
      <select v-model="selected" name="fruit">
        <option value="">选择一个网站</option>
        <option value="www.baidu.com">baidu</option>
        <option value="www.google.com">Google</option>
      </select>
     
      <div id="output">
          选择的网站是: {{selected}}
      </div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
    	selected: '' 
      }
    })
    </script>
    </body>
5. v-model 的 .lazy 修饰符：在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：<!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >
6. 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 .number 给 v-model 来处理输入值：
    <input v-model.number="age" type="number">
7. 如果要自动过滤用户输入的首尾空格，可以添加 .trim 修饰符到 v-model 上过滤输入：<input v-model.trim="msg">

Vue 组件：组件可一扩展HTML代码，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：


![5cc5d90ae8c74057ec697da1ad22211d.png](:/bc9a7266346944a38c75aae92dab8707)

注册一个全局组件语法格式如下：Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>

1. 实例一：注册一个简单的全局组件runoob，并使用它
    <div id="app">
        <runoob></runoob>
    </div>
     
    <script>
    // 注册
    Vue.component('runoob', {
      template: '<h1>自定义组件!</h1>'
    })
    // 创建根实例
    new Vue({
      el: '#app'
    })
    </script>

局部组件：在实例选项种注册局部组件，局部组件只能在这个实例中使用

1. 实例一：注册一个简单的局部组件 runoob，并使用它：
    <div id="app">
        <runoob></runoob>
    </div>
     
    <script>
    var Child = {
      template: '<h1>自定义组件!</h1>'
    }
     
    // 创建根实例
    new Vue({
      el: '#app',
      components: {
        // <runoob> 将只在父模板可用
        'runoob': Child
      }
    })
    </script>

Prop 是子组件用来接受父组件传递过来的数据的一个自定义属性
父组件的数据需要通过 props 把数据传递给子组件，子组件需要显式地用 props 选项声明 prop:

    <div id="app">
        <child message="hello!"></child>
    </div>
     
    <script>
    // 注册
    Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 同样也可以在 vm 实例中像 "this.message" 这样使用
      template: '<span>{{ message }}</span>'
    })
    // 创建根实例
    new Vue({
      el: '#app'
    })
    </script>

动态Prop：类似与用 v-bind 绑定HTML特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

    <div id="app">
    	<div>
    	  <input v-model="parentMsg">
    	  <br>
    	  <child v-bind:message="parentMsg"></child>
    	</div>
    </div>
    
    <script>
    // 注册
    Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 同样也可以在 vm 实例中像 “this.message” 这样使用
      template: '<span>{{ message }}</span>'
    })
    // 创建根实例
    new Vue({
      el: '#app',
      data: {
    	parentMsg: '这是父组件'
      }
    })
    </script>

使用 v-bind 指令将 todo 传递到每个重复的组件中

注意：prop 是单向绑定,当父组件的属性变化时，将传递给子组件，但是不会反过来
    <body>
    <div id="app">
    	<ol>
        <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      	</ol>
    </div>
    
    <script>
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }} : {{ todo.name }}</li>'
    })
    new Vue({
      el: '#app',
      data: {
        sites: [
          { text: 'baidu' , name: '百度'},
          { text: 'Google' , name: '谷歌'},
          { text: 'Taobao' , name: '淘宝'}
        ]
      }
    })
    </script>
    </body>

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

    Vue.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        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
          }
        }
      }
    })
1. 注意：当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
2. type 可以是下面原生构造器：String，Number，Boolean，Array，Object，Date，Function，Symbol
3. type 也可以是一个自定义构造器，使用 instanceof 检测。

Vue 组件 - 自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即 使用 $on(eventName) 监听事件,使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

    <div id="app">
    	<div id="appExample">
    	  <button-counter v-on:increment="incrementTotal"></button-counter>
    	  <button-counter v-on:increment="incrementTotal"></button-counter>
    	  <p> = {{ total }}</p>
    	 
    	</div>
    </div>
    
    <script>
    Vue.component('button-counter', {
      template: '<button v-on:click="incrementHandler"> 点击 + 1 ：{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        incrementHandler: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#appExample',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>
    </body>
1. 如果想在某个组件的根元素上监听一个原生事件，可以使用 .native 修饰 v-on 
    <my-component v-on:click.native="doTheThing"></my-component> 
2. 上面实例中的 组件中的 data 不是一个对象,是一个函数,
    data: function () {
      return {
        count: 0
      }
    }
3. 这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，

自定义组件 runoob-input ,父组件的num的初始值是 100 ，更改子组件的值能实时更新父组件的值

    <body>
    <div id="app">
        <runoob-input v-model="num"></runoob-input>
        <p>输入的数字为:{{num}}</p>
    </div>
    <script>
    Vue.component('runoob-input', {
        template: `
        <p>   <!-- 包含了名为 input 的事件 -->
          <input
           ref="input"
           v-bind:value="value" 
           v-on:input="$emit('input', $event.target.value)"
          >
        </p>
        `,
        props: ['value'], // 名为 value 的 prop
    })
       
    new Vue({
        el: '#app',
        data: {
            num: 100,
        }
    })
    </script>
    </body>

由于 v-model默认传的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。

    <div id="app">
        <base-checkbox v-model="lovingVue"></base-checkbox> 
         <div v-show="lovingVue"> 
            如果选择框打勾我就会显示。 
        </div>
    </div> 
    <script>
    // 注册
    Vue.component('base-checkbox', {
     
      model: {
        prop: 'checked',
        event: 'change'  // onchange 事件
      },
      props: {
        checked: Boolean
      },
       
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })
    // 创建根实例
    new Vue({
      el: '#app',
      data: {
        lovingVue: true
      }
    })
    </script>
注意;实例中 lovingVue 的值会传给 checked 的 prop，同时当 <base-checkbox> 触发 change 事件时， lovingVue 的值也会更新。

Vue 自定义指令

Vue 除了默认设置的核心指令(v-model 和 v-show ),Vue 也允许注册自定义指令

1. 实例一：注册一个全局指令 v-focus ，功能是在页面加载时，元素获得焦点
    
    <div id="app">
        <p>页面载入时，input 元素自动获取焦点：</p>
        <input v-focus>
    </div>
     
    <script>
    // 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
      // 当绑定元素插入到 DOM 中。
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    // 创建根实例
    new Vue({
      el: '#app'
    })
    </script>
2. 我们也可在实例中使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用
    <body>
    <div id="app">
      <p>页面载入时，input 元素自动获取焦点：</p>
      <input v-focus>
    </div>
    
    <script>
    // 创建根实例
    new Vue({
      el: '#app',
      directives: {
        // 注册一个局部的自定义指令 v-focus
        focus: {
          // 指令的定义
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          }
        }
      }
    })
    </script>
    </body>

指令定义函数提供了几个钩子函数(并非必须)

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数的参数有以下几种

el: 指令所绑定的元素，可以用来直接操作DOM
binding: 一个对象，包含以下属性
1. name ：指令名，不包括 v- 前缀
2. value ：指令的绑定值，例如： v-my-directive=“1 + 1”, value 的值是 2。
3. oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4. expression: 绑定值的表达式或变量名。例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
5. arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
6. modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

    <div id="app"  v-runoob:hello.a.b="message">
    </div>
     
    <script>
    Vue.directive('runoob', {
      bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: '       + s(binding.name) + '<br>' +
          'value: '      + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: '   + s(binding.arg) + '<br>' +
          'modifiers: '  + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    new Vue({
      el: '#app',
      data: {
        message: '菜鸟教程!'
      }
    })
    </script>

Vue 路由允许通过不同的 URL 来访问不同的内容

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js + vue-router 可以很简单的实现单页应用。
3.<router-link>是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。
什么是路由，就比如坐车回家，你需要先到火车站，然后再买票（指定目的地），路由就相当于这个火车站
路由的作用同样可以由 a 标签来实现，但是呢，点击 a 标签从当前页面跳转到另一个页面，通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页
通过使用 router-link，通过router-link进行跳转不会跳转到新的页面，不会重新渲染，它会选择路由所指的组件进行渲染
通过a标签和router-link对比，router-link避免了重复渲染，不像a标签一样需要重新渲染减少了DOM性能的损耗
router-link 默认渲染为一个a 标签 tag可以更改渲染出来的 router-link 的类型
router-view 可以认为是一个占位符，这是 vue-router 提供的元素，专门用来当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去

<body>
    <div id="app">
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script src="./libs/vue.js"></script>
1. 导入路由模块
    <script src="./libs/vue-router-3.0.1.js"></script>
    <script>
        // 定义组件的模板对象
        var login = {
            template: '<h1>登录组件</h1>'
        }
        var register = {
            template: '<h1>注册组件</h1>'
        }

2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
3. 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
        var routerObj = new VueRouter({
            这个配置对象中的 route 表示 【路由匹配规则】 的意思
            routes:[
                // 路由匹配规则：
                //  1.每个路由规则，都是一个对象，在这个对象身上，都必须要有两个属性，
                //      属性1 是 path ，表示监听，哪个路径链接地址
                //      属性2 是 component ,表示，如果 路由是前面匹配到的 path ，则展示component 属性所对应的那个组件
                //      注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
                { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事 redirect 是重定向的
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
        })
        var vm = new Vue({
            el:"#app",
            data:{
            },
            router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
        })
    </script>
</body>

Vue 过渡和动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
语法格式：

    <transition name = "nameoftransition">
       <div></div>
    </transition>

1. 实例中通过点击 "点我" 按钮将变量 show 的值从 true 变为 false。如果为 true 显示子元素 p 标签的内容。
    <style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
        opacity: 0
    }
    </style>
    </head>
    <body>
    <div id = "app">
    <button v-on:click = "show = !show">点我</button>
    <transition name = "fade">
        <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
    </transition>
    </div>
    <script type = "text/javascript">
    var vm = new Vue({
    el: '#app',
        data: {
            show:true,
            styleobj :{
                fontSize:'30px',
                color:'red'
            }
        },
        methods : {
        }
    });
    </script>
    </body>

![cde9971785b2fabe1c80feee98fc3c11.png](:/d92213017ce34040b1ae3cc74e33f26c)

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。、
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

Vue 混入(mixins) 定义了一部分可以复用的方法或者计算属性

混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

    var vm = new Vue({
        el: '#databinding',
        data: {
        },
        methods : {
        },
    });
    // 定义一个混入对象
    var myMixin = {
        created: function () {
            this.startmixin()
        },
        methods: {
            startmixin: function () {
                document.write("欢迎来到混入实例");
            }
        }
    };
    var Component = Vue.extend({
        mixins: [myMixin]
    })
    var component = new Component();

选项合并，当组件和混入对象含有同名选项时，这些选项将会混合
数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

    <div id = "databinding"></div>
    <script type = "text/javascript">
    var mixin = {
    	created: function () {
    		document.write('混入调用' + '<br>')
    	}
    }
    new Vue({
    	mixins: [mixin],
    		created: function () {
    		document.write('组件调用' + '<br>')
    	}
    });
    </script>
输出结果为 混入调用 ，组件调用

如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。如下实例，Vue 实例与混入对象的 methods 选项都包含了相同的函数：

    var mixin = {
        methods: {
            hellworld: function () {
                document.write('HelloWorld 方法' + '<br>');
            },
            samemethod: function () {
                document.write('Mixin：相同方法名' + '<br>');
            }
        }
    };
    var vm = new Vue({
        mixins: [mixin],
        methods: {
            start: function () {
                document.write('start 方法' + '<br>');
            },
            samemethod: function () {
                document.write('Main：相同方法名' + '<br>');
            }
        }
    });
    vm.hellworld();
    vm.start();
    vm.samemethod();
输出结果为 ：HelloWorld 方法，start 方法，Main：相同方法名
从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

Vue Ajax(axios)

使用 GET()方法简单读取JSON数据

    new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .get('https://www.runoob.com/try/ajax/json_demo.json')
          .then(response => (this.info = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
    })

使用 response.data 读取 JSON 数据：

    <div id="app">
      <h1>网站列表</h1>
      <div
        v-for="site in info"
      >
        {{ site.name }}
      </div>
    </div>
    <script type = "text/javascript">
    new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .get('https://www.runoob.com/try/ajax/json_demo.json')
          .then(response => (this.info = response.data.sites))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
    })
    </script>

GET 方法传递参数格式如下：

    // 直接在 URL 上添加参数 ID=12345
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
     
    // 也可以通过 params 设置参数：
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

PSOT 方法传递参数格式如下：

    axios.post('/user', {
        firstName: 'Fred',        // 参数 firstName
        lastName: 'Flintstone'    // 参数 lastName
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

POST 方法实例

    new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
          .then(response => (this.info = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
    })

Vue 生命周期

这是一个代码实例用于详细的查看生命周期

    <! DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width， initial-scale=1.0">
            <meta http-equiv="x-UA-Compatible" content="ie=edge">
            <title>vue生命周期学习</title>
           <style>
               
           </style>
        </head >
        <body>
            <div id="app">
                <h1>{{ message }}</h1></div>
        </body>
        <script src="./libs/vue.js"></script>
        <script>
            
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'vue的生命周期'
                    },
            beforeCreate: function() {
                    console.group('------beforeCreate创建前状态------');
                    console.log("%c%s", "color:red" , "el: " + this.$el); //undefined
                    console.log("%c%s", "color:red" , "data : " + this.$data); //undefined
                    console.log("%c%s " , "color:red" , "message: " + this.message)
                    },
        created: function() {
            console.group(' ------created创建完毕状态------');
            console.log("%c%s", "color:red" , "el: " + this.$el); 
            //undefined
            console.log("%c%s", "color:red" , "data : " + this.$data);
            //已被初始化
            console.log("%c%s" , "color:red" , "message: " + this.message);
            //已被初始化
            },
        beforeMount: function() {
            console.group(' ------beforeMount挂载前状态------');
            console.log("%c%s" , "color:red" , "el: " +(this.$el));
            //已被初始化
            console.log(this.$el) ;
            console.log("%c%s", "color:red" , "data : " + this.$data);
            //己被初始化
            console.log("%c%s", "color:ned" , "message: " + this.message);
            //己被初始化
        },
        mounted : function() {
            console.group('------mounted挂载结束状态------');
            console.log("%c%s" , "color:red" , "el: " + this.$el);
            //已被初始化
            console.log(this.$el);
            console.log("%c%s" , "color:red" , "data : " + this.$data);
            //已被初始化
            console.log("%c%s", "color:red" , "message: " + this.message);
            //已被初始化
        },
        beforeupdate: function () {
                     console.group(' beforeUpdate更新前状态===============》');
                    console.log("%c%s", "color:red", "el: " + this.$el);
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message);
                },
        updated: function () {
            console.group(' updated更新完成状态===============》');
            console.log("%c%s", "color :red" , "el: " + this.$el);
            console.log(this.$el);
        console.log("%c%s", "color:red", "data : " + this.$data);
        console.log("%c%s", "color:red" , "message: " + this.message);
        },
        beforeDestroy : function () {
            console.group(' beforeDestroy销毁前状态===============》');
            console.log( "%c%s", "color :red" , "el: " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red" , "data : " + this.$data);
            console.log("%c%s", "color :red" , "message: " + this.message);
        },
        destroyed : function () {
            console.group(' destroyed 销毁完成状态===============》');
            console.log("%c%s", "color :red" , "el: " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color :red", "data : " + this.$data);
            console.log("%c%s", "color:red" , "message: " + this.message)}
        })
        </script>
    </html>

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
vue生命周期可以分为三个部分：创建阶段，运行阶段，销毁阶段，

在这里插入图片描述

beforeCreate ;组件的data和methods以及页面的DOM结构都还未初始化，什么都做不了
created:组件的 data 和 methods 已经可以使用了，但是页面没有渲染，在created中，经常发起 ajax 请求
beforeMount :当模板在内存中编译完成，会立即执行beforeMount，此时内存中的模板结构未渲染到页面，页面看不到真实数据，用户看到的只是一个模板页面
Mounted: 页面已经渲染完毕，用于可以看到真实数据，Mounted 执行完就进入运行阶段，如果使用还未初始化第三方UI插件，必须在 Mounted中进行此初始化
beforeUpdate：在数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，在beforeUpdate中可以进一步的更改数据的，不会附加重复渲染的过程，在执行beforeUpdate时，数据是最新的数据，但是页面中呈现的数据还是旧的
Updated:由于数据的更新导致虚拟DOM重新渲染和打补丁，然后调用 updated 时，组件的DOM已经更新，此时可以执行依赖于DOM的操作，此时页面完成更新，数据完成更新，呈现数据也完成更新
beforeDestroy:实例销毁之前调用，此时实例依然完全可用，在执行 beforeDestroy 时，组件即将被销毁，但是未真正销毁，组件依旧可用，data,methods 数据和方法依旧可以正常使用
destryed:实例销毁后调用，执行后，Vue组件解除绑定，所有事件监听器会被移除，所有子组件完成销毁，组件无法使用，data 和 methods 数据和方法无法被使用

以上是关于Vue知识点全集的主要内容，如果未能解决你的问题，请参考以下文章

专知荟萃26行人重识别 Person Re-identification知识资料全集（入门/进阶/论文/综述/代码，附查看）

vue-cli全集（父子组件传值axios）

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

Vue知识点全集

Vue知识点文章目录

Vue.js简介

Vue基础语法、

Vue 模板语法

Vue 条件语句

Vue 循环语句

Vue 计算属性 computed

Vue 监听属性：通过 watch 来响应数据的变化。

Vue 样式绑定

Vue 事件处理器

利用 v-model 实现数据的双向绑定

Vue 组件：组件可一扩展HTML代码，封装可重用的代码

Vue 组件 - 自定义事件

Vue 自定义指令

指令定义函数提供了几个钩子函数(并非必须)

钩子函数的参数有以下几种

Vue 路由允许通过不同的 URL 来访问不同的内容

Vue 过渡和动画

Vue 混入(mixins) 定义了一部分可以复用的方法或者计算属性

Vue Ajax(axios)

Vue 生命周期