vue常用指令

Bertha 。 2023-05-30 13:58 11阅读 0赞

**声明一****：** 这里列出的只是一些常用的指令，更多指令、更多细节可参考[vue中文官网][vue]。  
**声明二****：** 本文主要学习并整理自51CTO课程`《Vue.js 2.0之全家桶系列视频课程》`，讲师`汤小洋`，跳转链接见文末。

--------------------

# vue常用指令： #

## v-model：双向数据绑定(即：将vue实例的数据属性值与html元素的值进行绑定，一起发生变化)，一般用于表单元素。 ##

**示例：**

*  html中是这样：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center]
 *  js中是这样的：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 1]
 *  效果是这样的：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 2]  
    改变任意一个html元素的值，那么与其v-model绑定的vue实例的属性值就会发生对应的变化，进而其它的与该vue实例的该属性v-model绑定的html元素的值也会发生响应的变化：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 3]

## v-for：循环遍历。 ##

**直接遍历数字(示例)：**  
![在这里插入图片描述][20191110181613440.png_pic_center]  
**遍历数组(示例)：**

**遍历对象(示例)：**

**遍历对象数组(示例)：**

**使用:key提升效率(示例)：**  
`说明`：在使用v-for遍历时，可以通过:key来给每一项(即:每一个key-value或每一个元素)唯一绑定一个标识来提高vue效率。当数据发生变化时，vue就通过这个标识来重用未发生变化的元素，而不需要把所有的元素都重新罗列一遍。  
![在这里插入图片描述][20191110181755700.png_pic_center]

## v-on：事件绑定。一般用法为v-on:事件=“函数”。可简写为@事件=“函数”。 ##

**入门示例：**

*  在js中定义方法：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 13]
 *  在html中使用方法：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 14]
 *  效果如图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 15]

**点击事件(示例)：**

*  在js中定义方法：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 16]  
    **注：** 在一个vue实例的某个方法里，需要调用某个vue实例(该实例本身或其它实例)的属性或者方法时，需要通过变量名进行定位(如这里的tmpV)，如果是调用当前实例的属性或方法时，可直接使用(代表当前实例的)关键字this，也可使用实例变量，如：  
    ![在这里插入图片描述][20191110182522755.png_pic_center]
 *  在html中使用方法：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 17]
 *  效果如图：  
    点击前：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 18]  
    点击后：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 19]

## v-show/v-if：显示或隐藏元素(true显示，false隐藏)。v-show是通过设置display来实现的；而v-if是直接删除然后再重新创建来实现的。 ##

**示例：**

*  在js中定义一个参考变量：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 20]
 *  在html进行使用：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 21]
 *  效果如图(多次点击会交替着显示或隐藏)：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 22]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70]

--------------------

# 给出本人测试时的完整html内容： #

<!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>
        <script src="../js/vue.js"></script>
        <script> window.onload = function () { // 允许chrome的扩展程序【vue-devtools】进行调试 // 建议: 开发时，设置为true; 生产时, 设置为false Vue.config.devtools = true // ----------------------------------------------------------- v-model new Vue( { // 指定关联的element el: '#abc', // 存储数据(以json的形式) data: { nameKey: '邓沙利文' } } ); // ----------------------------------------------------------- v-for new Vue( { // 指定关联的element el: '.test1', // 存储数据(以json的形式) data: { arr: [1, 3, 5, 7, 9, 10], user: { id: 9527, name: '华安', age: 25 }, students: { zhangsan: { no: '01', name: '张三', age: 18 }, lisi: { no: '03', name: '李四', age: 24 }, zhawangwu: { no: '02', name: '王五', age: 32 } } } } ); // ----------------------------------------------------------- v-on let tmpV = new Vue( { // 指定关联的element el: '.test2', // 存储数据(以json的形式) data: { k: '123木头人', arr: [1, 3] }, // methods里面用于存储方法 methods: { // 定义方法(示例定义show方法) // 注意: show() 即为 show: function()的缩写 show() { console.log("hello JustryDeng"); }, // 此方法用于向当前vue实例中的数组添加元素888、999 add() { // this关键字即代表当前vue实例。 此console的输出结果为true。 console.log(this == tmpV); // 这里this.arr 与 tmpV.arr 等价 this.arr.push(888); tmpV.arr.push(999); // 调用当前实例的show方法 // 等价于this.show(); tmpV.show(); } } } ); // ----------------------------------------------------------- v-show/v-if new Vue( { // 指定关联的element el: '.test3', // 存储数据(以json的形式) data: { flag: true } } ); } </script>
    </head>
    
    <body>
    
        
        <h3>v-model测试：</h3>
        <div id="abc">
            
            用户名： <input type="text" v-model="nameKey">
                 
            <input type="text" v-model="nameKey">
                 
            {
       {nameKey}}
        </div>
        <hr />
    
        
        <h3>v-for测试：</h3>
        <div class="test1">
    
            直接遍历数字：
            <ul>
                <li v-for="value in 5">{
       {value}}</li>
            </ul>
    
    
    
    
    
            遍历数组(只显示值)：
            <ul>
                <li v-for="value in arr">{
       {value}}</li>
            </ul>
    
            遍历数组(既显示索引， 又显示值)：
            <ul>
                
                <li v-for="(v, k) in arr">{
       {k}} - {
       {v}}</li>
            </ul>
    
    
    
    
    
            遍历对象(只显示属性值)：
            <ul>
                <li v-for="value in user">{
       {value}}</li>
            </ul>
    
            遍历对象(既显示属性名， 又显示属性值)：
            <ul>
                <li v-for="(v, k) in user">{
       {k}} - {
       {v}}</li>
            </ul>
    
            遍历对象(既显示属性名， 又显示属性值，还显示索引)：
            <ul>
                <li v-for="(v, k, index) in user">索引{
       {index}}对应的key-value是: {
       {k}} - {
       {v}}</li>
            </ul>
    
    
    
            遍历对象数组(直接显示对象)：
            <ul>
                <li v-for="stu in students">{
       {stu}}</li>
            </ul>
    
            遍历对象数组(直接显示属性值)：
            <ul>
                <li v-for="stu in students">{
       {stu.no}}、{
       {stu.name}}、{
       {stu.age}} </li>
            </ul>
    
            遍历对象数组(既显示key， 又显示对象)：
            <ul>
                <li v-for="(stu, k) in students">{
       {k}} = {
       {stu}} </li>
            </ul>
    
    
    
    
    
            使用:key提高效率：
            <ul>
                <li v-for="(v, k) in user" :key="k">{
       {k}} = {
       {v}}</li>
            </ul>
    
        </div>
        <hr />
    
        
        <h3>v-on测试：</h3>
    
        <div class="test2">
            <button v-on:click="show()">点我</button>
    
            
            <button v-on:click="show">点我</button>
    
            
            <button @click="show">点我</button>
    
    
            <br />
            <button @click="add">添加元素</button> 当前数组:{
       {arr}}
        </div>
        <hr />
    
        
        <h3>v-show/v-if测试：</h3>
    
        <div class="test3">
            
            <button @click="flag = !flag">点击</button>
    
            <div v-show="flag" style="width: 100px; height: 100px; background-color: green;">v-show测试</div>
            <br />
            <div v-if="flag" style="width: 100px; height: 100px; background-color: blue;">v-if测试</div>
        </div>
        <hr />
    </body>
    
    </html>

**^\_^ 如有不当之处，欢迎指正**

**^\_^ 学习整理自  
        **[51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师 汤小洋][51CTO_Vue.js 2.0_]

**^\_^ 参考链接  
        [Vue.js中文官网][vue]**

**^\_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng**

[vue]: https://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20191110181041834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20191110181219849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2019111018123688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20191110181245137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[20191110181613440.png_pic_center]: https://img-blog.csdnimg.cn/20191110181613440.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20191110181638568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20191110181644298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20191110181653936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20191110181707373.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20191110181715775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/2019111018172359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/20191110181733161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 11]: https://img-blog.csdnimg.cn/20191110181741266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/20191110181748831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[20191110181755700.png_pic_center]: https://img-blog.csdnimg.cn/20191110181755700.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/20191110182359111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 14]: https://img-blog.csdnimg.cn/20191110182412484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 15]: https://img-blog.csdnimg.cn/2019111018243180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 16]: https://img-blog.csdnimg.cn/20191110182444408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[20191110182522755.png_pic_center]: https://img-blog.csdnimg.cn/20191110182522755.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 17]: https://img-blog.csdnimg.cn/20191110182631824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 18]: https://img-blog.csdnimg.cn/20191110182659111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 19]: https://img-blog.csdnimg.cn/20191110182708821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 20]: https://img-blog.csdnimg.cn/20191110182800759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 21]: https://img-blog.csdnimg.cn/20191110182807887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70_pic_center 22]: https://img-blog.csdnimg.cn/20191110182816546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111018304651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1c3RyeV9kZW5n,size_16,color_FFFFFF,t_70
[51CTO_Vue.js 2.0_]: https://edu.51cto.com/course/10543.html