乐趣区

关于前端:手把手入门-Vue教学

作者：

jiezi

在

Vue 根底外围知识点

一、Vue 简介

概述：动静构建 用户界面 的 渐进式 框架

动静构建：虚构 DOM

用户界面

渐进式

作者

特点

  • 申明式编码、遵循MVVM准则
  • 编码简略、体积小
  • 组件化、复用率高、代码保护容易

vue2 官网资源：https://v2.cn.vuejs.org/

二、模板语法

2.1 插值语法

概述：解析标签体内容、能够解析表达式（能够返回值）

<div id="root">
    <h2> HELLO  {{name.toUpperCase()}}</h2>
</div>
//HELLO VUE

2.2 指令语法

概述：解析标签属性、内容、事件，这里在上面的数据绑定举例

<input type="text" v-bind:value="author">

三、数据绑定

3.1 单向数据绑定

概述：data=>页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 单向：<input type="text" v-bind:value="oneWay"> -->
             <!-- 简写 -->
            单向：<input type="text" :value="oneWay"> 
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。
        
        new Vue({
            el:'#root',
            data:{
                oneWay:'data=>页面'
            }
        })
    </script>
</html>

3.2 双向数据绑定

概述：data<=>页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 双向：<input type="text" v-model:value="twoWay"> -->
            <!-- 简写 -->
            双向：<input type="text" v-model="twoWay">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。

        new Vue({
            el:'#root',
            data:{
                twoWay:'data<=>页面'
            }
        })
    </script>
</html>

四、写法区别

4.1 el 写法

概述

  • 实例化对象时配置
  • 先实例化，而后挂载
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el挂载数据</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>你好 {{name}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。

        const vm = new Vue({
            // 法一
            // el:'#root',
            data:{
                name:'VUE'
            }
        })
        // 法二
        vm.$mount('#root');
    </script>
</html>

4.2 data 写法

概述

  • 对象式
  • 函数式（组件必须应用）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>data挂载数据</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>你好 {{name}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。

        const vm = new Vue({
            
            el:'#root',
            // 对象式
            /* data:{
                name:'VUE'
            } */
            // 函数式
            data(){
                return{
                    name:'VUE'
                }
            }
        })
    
    </script>
</html>

五、MVVM 模型

概述：参考MVVM模型，利用到VUE中

View：模板、页面的DOM构造

ViewModel：桥梁关系，有以下两个作用

  • DOM 监听
  • 数据绑定

Model：代码的data数据对象

特点

  • 在模板间接应用vm属性
  • data数据间接挂载到vm身上

六、数据代理

概述：通过一个对象代理另一个对象属性的操作，这里先将数据代理，前面的数据劫持、检测前面细讲

咱们代码中的data对象数据通过一番操作后变成_data挂载到vm下面，但每次拜访数据只能通过_data拜访不不便，VUE便间接代理到vm身上，原理图如下所示：

实践证明，数据统一

七、事件处理

7.1 根本应用

概述：绑定事件，在methods调用

<button v-on:click="showInfo1">按钮1</button>
<button @click="showInfo2($event,666)">按钮2</button>

留神

  • methods对象最终间接挂载到vm
  • 留神this指向、审慎应用箭头函数
  • 传入参数时，第一个留神不要笼罩函数自带的event

7.2 修饰符

  1. prevent：阻止默认事件（罕用）
  2. stop：阻止事件冒泡（罕用）
  3. once：事件只触发一次（罕用）
  4. capture：应用事件的捕捉模式
  5. self：只有 event.target 是以后操作的元素时才触发事件
  6. passive：事件的默认行为立刻执行，无需期待事件回调执行结束

7.3 键盘事件

概述：键盘触发事件、比方按下某个按键触发事件

7.3.1 零碎提供

回车 => enter
删除 => delete (捕捉“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (非凡，必须配合keydown去应用，tab会失去焦点)
上 => up
下 => down
左 => left
右 => right
<input type="text" placeholder="键盘事件" @keyup.tab="showInfo">

7.3.2 原始 key 值

概述：单词要小写、多个单词应用-宰割

<input type="text" placeholder="键盘事件" @keyup.p="showInfo">
<input type="text" placeholder="键盘事件" @keydown.f2="showInfo">

7.3.3 零碎润饰键

ctrl、alt、shift、meta

留神

  • 配合keydown应用，失常触发事件
  • 配合keyup应用，按下润饰键的同时，再按下其余键，随后开释其余键，事件才被触发

八、计算属性

概述：依据data已有的属性计算新的属性值

原理：底层借助了Objcet.defineproperty办法提供的getter和setter

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>姓名案例_计算属性实现</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 筹备好一个容器-->
        <div id="root">
            姓：<input type="text" v-model="firstName"> <br/><br/>
            名：<input type="text" v-model="lastName"> <br/><br/>
            全名：<span>{{fullName}}</span> <br/><br/>
            
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。

        
        const vm=new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三',
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName
                    },
                    set(val){
                        const arr=val.split('-')
                        this.firstName=arr[0]
                        this.lastName=arr[1]
                    }
                }
            },
        })
    </script>
</html>

简写模式：只须要返回值，不须要批改计算属性的值时应用

computed:{
    fullName(){
        return this.firstName + '-' + this.lastName
    }
}

留神：

  • 只有get所依赖的数据变动，才会再次调用
  • 依赖的数据不变动，间接调用缓存，不调用get
  • set只有须要批改计算属性的值才会被调用

九、监督属性

概述：监督属性的数据变动，失去newVal oldVal能够比对

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天气案例_监督属性</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
                监督属性watch：
                    1.当被监督的属性变动时, 回调函数主动调用, 进行相干操作
                    2.监督的属性必须存在，能力进行监督！！
                    3.监督的两种写法：
                            (1).new Vue时传入watch配置
                            (2).通过vm.$watch监督
         -->
        <!-- 筹备好一个容器-->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。
        
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '酷热' : '凉快'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                isHot:{
                    handler(newVal,oldVal){
                        console.log('isHot被批改了',newVal,oldVal);

                    }
                }
            }
        })
    </script>
</html>

深度监督：监督整个对象中的数据变动，开始deep:true属性就行

立刻执行：immediate:true数据就算不变动，也会先执行一次

简写模式：简略的需要、不须要配置其余属性

//简写属性
watch:{
    isHot(newVal,oldVal){
        console.log('isHot被批改了',newVal,oldVal);
    }
}

十、绑定款式

概述：通过绑定style/class实现动态效果

10.1 class 绑定

能够通过属性、数组、对象绑定，留神和data的连通性

10.2 style 绑定

通过对象、数组形式绑定，留神应用驼峰命名

十一、条件渲染

11.1 v-show

概述：通过display暗藏，dom 依然存在

<div v-show="n===1">1</div>
<div v-show="n===2">2</div>

11.2 v-if

概述：不展现的dom间接移除，满足逻辑上的if else构造

<div v-if="n===1">1</div>

<div v-if="n===1">1</div>
<div v-else-if="n===2">2</div>
<div v-else-if="n===3">3</div>
//v-else间接输入，因为最初的后果
<div v-else="n>=4">4</div>

11.3 template

概述：不会呈现在dom中，能够作为对立管理工具

<template v-if="n===1">
    <div>1</div>
    <div >2</div>
    <div>3</div>
    <div>4</div>
</template>

十二、列表渲染

概述：指令v-for展现列表数据，遍历数组、对象

12.1 根本应用

概述：for in遍历，插值语法应用数据，:key这里咋暂且认为标识的每一条数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>根本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
                v-for指令:
                        1.用于展现列表数据
                        2.语法：v-for="(item, index) in xxx" :key="yyy"
                        3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
        -->
        <!-- 筹备好一个容器-->
        <div id="root">
            <h2>人员列表</h2>
            <ul>
                <li v-for="(p,index) in persons" :key="index">
                    {{p.name}} --- {{p.age}}
                </li>
            </ul>

            <h2>汽车列表</h2>
            <ul>
                <li v-for="(c,index) in car" :key="index">
                    {{c}} --- {{index}}
                </li>
            </ul>

            <h2>字符串列表</h2>
            <ul>
                <li v-for="(s,index) in str" :key="index">
                    {{s}} --- {{index}}
                </li>
            </ul>

            <h2>数字列表</h2>
            <ul>
                <li v-for="(s,index) in 5" :key="index">
                    {{s}} --- {{index}}
                </li>
            </ul>
        </div>
    </body>
        <script type="text/javascript">
            Vue.config.productionTip = false
            
            new Vue({
                el:'#root',
                data:{
                    persons:[
                        {id:'001',name:'张三',age:18},
                        {id:'002',name:'李四',age:19},
                        {id:'003',name:'王五',age:20}
                    ],
                    car:{
                        name:'奥迪A8',
                        price:'70万',
                        color:'彩色'
                    },
                    str:'hello'
                }
            })
        </script>
</html>

12.2 key 的原理

概述：vue 虚构 dom 比拟的标识

概述（重要）

  • 初始数据生成虚构DOM、虚构DOM转换成实在DOM，留神VUE对之前的DOM留有备份在内存中，留给前面的比照算法
  • 页面数据产生扭转导致页面更新
  • 从新生成虚构dom，依据惟一标识符key和之前的虚构dom比拟（未找到从新生成实在DOM）
  • 数据统一则复用，不统一从新生成实在DOM
  • 这里默认 index 作为key，毁坏程序会导致标签标识呈现问题，加大了工作量（无奈复用数据）、导致输出的数据错位

概述（重要）

这里的流程和下面差不多，只是key由本人惟一指定，不会扭转程序

面试题

面试题：react、vue中的key有什么作用？（key的外部原理）
                        
                        1. 虚构DOM中key的作用：
                                        key是虚构DOM对象的标识，当数据发生变化时，Vue会依据【新数据】生成【新的虚构DOM】, 
                                        随后Vue进行【新虚构DOM】与【旧虚构DOM】的差别比拟，比拟规定如下：
                                        
                        2.比照规定：
                                    (1).旧虚构DOM中找到了与新虚构DOM雷同的key：
                                                ①.若虚构DOM中内容没变, 间接应用之前的实在DOM！
                                                ②.若虚构DOM中内容变了, 则生成新的实在DOM，随后替换掉页面中之前的实在DOM。

                                    (2).旧虚构DOM中未找到与新虚构DOM雷同的key
                                                创立新的实在DOM，随后渲染到到页面。
                                                
                        3. 用index作为key可能会引发的问题：
                                            1. 若对数据进行：逆序增加、逆序删除等毁坏程序操作:
                                                            会产生没有必要的实在DOM更新 ==> 界面成果没问题, 但效率低。

                                            2. 如果构造中还蕴含输出类的DOM：
                                                            会产生谬误DOM更新 ==> 界面有问题。

                        4. 开发中如何抉择key?:
                                            1.最好应用每条数据的惟一标识作为key, 比方id、手机号、身份证号、学号等惟一值。
                                            2.如果不存在对数据的逆序增加、逆序删除等毁坏程序操作，仅用于渲染列表用于展现，
                                                应用index作为key是没有问题的。

12.3 列表过滤

概述：通过含糊查问列表数据解析后果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表过滤</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        <div id="root">
            <input type="text" v-model="keyName">
            <ul>
                <li v-for="p in filPersons" :key="p.id">
                    {{p.name}} --- {{p.age}}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    keyName:'',
                    persons:[
                        {id:'001',name:'马冬梅',age:30,sex:'女'},
                        {id:'002',name:'周冬雨',age:31,sex:'女'},
                        {id:'003',name:'周杰伦',age:18,sex:'男'},
                        {id:'004',name:'温兆伦',age:19,sex:'男'}
                    ],
                    filPersons:[],
                },
                //法一 数据监督
                watch:{
                    keyName:{
                        immediate:true,
                        handler(val){
                            this.filPersons= this.persons.filter(p=>{
                                return p.name.indexOf(val)!=-1
                            })
                        }
                    }
                },
                //法二 计算属性
                /* computed:{
                    getName(){
                        return this.persons.filter(p=>{
                            return p.name.indexOf(this.keyName)!=-1
                        })
                    }
                }
             */
            })
        </script>
</html>

总结

  • 这里应用计算属性更加简略
  • 监督属性留神不能简写，监督的数据不变动也须要立即执行一次函数

12.4 列表排序

概述：在列表过滤的根底下面减少了排序功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表排序</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 筹备好一个容器-->
        <div id="root">
            <h2>人员列表</h2>
            <input type="text" placeholder="请输出名字" v-model="keyWord">
            <button @click="sortType = 2">年龄升序</button>
            <button @click="sortType = 1">年龄降序</button>
            <button @click="sortType = 0">原程序</button>
            <ul>
                <li v-for="(p,index) of filPersons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                    <input type="text">
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false
            
            new Vue({
                el:'#root',
                data:{
                    keyWord:'',
                    sortType:0, //0原程序 1降序 2升序
                    persons:[
                        {id:'001',name:'马冬梅',age:30,sex:'女'},
                        {id:'002',name:'周冬雨',age:31,sex:'女'},
                        {id:'003',name:'周杰伦',age:18,sex:'男'},
                        {id:'004',name:'温兆伦',age:19,sex:'男'}
                    ]
                },
                computed:{
                    filPersons(){
                        const arr= this.persons.filter(p=>{
                            return p.name.indexOf(this.keyWord)!=-1
                        })

                        if(this.sortType){
                            arr.sort((p1,p2)=>{
                                return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                            })
                        }
                        return arr
                    }
                }
            }) 

        </script>
</html>

十三、表单数据

概述：v-bind 和 v-model 针对具备 value 属性的标签，对于其余的标签，可应用下述办法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>收集表单数据</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            收集表单数据：
                    若：<input type="text"/>，则v-model收集的是value值，用户输出的就是value值。
                    若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
                    若：<input type="checkbox"/>
                            1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                            2.配置input的value属性:
                                    (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                                    (2)v-model的初始值是数组，那么收集的的就是value组成的数组
        -->
        <!-- 筹备好一个容器-->
        <div id="root">
            <form @submit.prevent="print">
                账号：<input type="text" v-model.trim="userInfo.account"> <br><br>
                明码：<input type="password" v-model="userInfo.password"> <br><br>
                年龄：<input type="number" v-model.number="userInfo.age"> <br><br>
                性别：
                男<input type="radio" name="sex" value="male" v-model.number="userInfo.sex"> 
                女<input type="radio" name="sex" value="female" v-model.number="userInfo.sex"> <br><br>

                喜好：
                唱 <input type="checkbox" value="sing" v-model="userInfo.hobby">
                跳 <input type="checkbox" value="dance" v-model="userInfo.hobby">
                rap <input type="checkbox" value="rap" v-model="userInfo.hobby">
                篮球 <input type="checkbox" value="basketball" v-model="userInfo.hobby"> <br><br>
                城市：
                <select v-model="userInfo.city">
                    <option value="" >抉择城市</option>
                    <option value="beijing" >北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen" >深圳</option>
                </select> 

                <br><br>

                其余信息：
                <!-- 懒加载 -->
                <textarea v-model.lazy="userInfo.other"> 

                </textarea> <br><br>

               <input type="checkbox" value="confirm" v-model="userInfo.agree">
                浏览并承受 <a href="http://www.baidu.com">《用户协定》</a> <br><br>
                <button>提交信息</button>
            </form>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    age:'',
                    sex:'male',
                    hobby:[],
                    city:'',
                    other:'',
                    agree:''

                }
            },
            methods: {
                print(){
                    console.log(JSON.stringify(this.userInfo));
                }
            },

        })
    </script>
</html>
//{"account":"admin","password":"123456","age":18,"sex":"male","hobby":["sing","dance","basketball"],"city":"beijing","other":"12313","agree":true}

留神 v-model 的三个修饰符

  • lazy：失去焦点再收集数据
  • number：输出字符串转为无效的数字
  • trim：输出首尾空格过滤

十四、过滤器

概述：对要显示的数据进行特定格式化后再显示（实用于一些简略逻辑的解决）

语法：
            1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
            2.应用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
备注：
            1.过滤器也能够接管额定参数、多个过滤器也能够串联
            2.并没有扭转本来的数据, 是产生新的对应的数据

上面以一个简略的格式化工夫为例，资源链接：https://www.bootcdn.cn/dayjs/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>过滤器</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript" src="../js/dayjs.min.js"></script>
    </head>
    <body>
        <!-- 
            过滤器：
                定义：对要显示的数据进行特定格式化后再显示（实用于一些简略逻辑的解决）。
                语法：
                        1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
                        2.应用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
                备注：
                        1.过滤器也能够接管额定参数、多个过滤器也能够串联
                        2.并没有扭转本来的数据, 是产生新的对应的数据
        -->
        <!-- 筹备好一个容器-->
        <div id="root">
            <h2>以后的工夫为 {{time}}</h2>

            <h2>计算属性 {{formTime}}</h2>

            <h2>计算方法 {{getFormatTime()}}</h2>


            <h2>过滤器 {{time | filterTime('YYYY年MM月DD日')}}</h2>
        </div>
        
        <div id="root2">
            <h2>{{msg | filterSlice(4)}}</h2>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false
        //全局过滤器
        Vue.filter('filterSlice',(value,num)=>{
            return value.slice(0,num)
        })
        new Vue({
            el:'#root',
            data:{
                time:Date.now()
            },
            computed:{
                formTime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 
                }
            },
            methods: {
                getFormatTime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 
                }
            },
            filters:{
                filterTime(value,str='YYYY年MM月DD日 HH:mm:ss'){
                    return dayjs(value).format(str) 
                }
            }
        })

        new Vue({
            el:'#root2',
            data:{
                msg:'123456789',
            },

        })

        
    </script>
</html>

留神

  • 过滤器只有全局通用
  • 第一个参数肯定是value，前面承受别的参数
  • 过滤器能够是多个，A、B 过滤的后果 C 和 D 进行过滤……

十五、内置指令

15.1 v-text

概述：间接替换掉标签的内容、无奈解析标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-text指令</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 筹备好一个容器-->
        <div id="root">
            <div>你好，{{name}}</div>
            <div v-text="name">你好 </div>
            <div v-text="str"></div>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提醒。
        
        new Vue({
            el:'#root',
            data:{
                name:'VUE',
                str:'<h3>你好啊！</h3>'
            }
        })
    </script>
</html>

15.2 v-html

概述：和v-text相比，多了一个辨认html构造（有安全性问题）

15.3 v-cloak

概述：VUE 实例创立实现并接管实例后删除这个属性，能够防止出现{{name}}状况

15.4 v-once

概述：所在节点在首次动静渲染后，就视为动态内容了。当前数据的扭转不会引起 v-once 所在构造的更新，能够用于优化性能。

<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>以后的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>

15.5 v-pre

概述：跳过该节点编译过程

<h2>Vue其实很简略</h2>
<h2 v-pre>以后的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>

十六、自定义指令

概述：通过指令包装dom元素，让使用者防止操作dom元素、个别有三个流程 bind、inserted、update

自定义指令总结：
    一、定义语法：
        (1).部分指令：
           new Vue({ directives:{   } })              
        (2).全局指令：
        Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

    二、配置对象中罕用的3个回调：
        (1).bind：指令与元素胜利绑定时调用。
        (2).inserted：指令所在元素被插入页面时调用。
        (3).update：指令所在模板构造被从新解析时调用。
    三、调用机会
        1.指令与元素胜利绑定时（一上来）。
        2.指令所在的模板被从新解析时。
    四、备注：
        1.指令定义时不加v-，但应用时要加v-；
        2.指令名如果是多个单词，要应用kebab-case命名形式，不要用camelCase命名，命名留神''

16.1 简略自定义指令

概述：只用到了 bind、update 两个函数，合在一起应用

需要1：定义一个v-big指令，和v-text性能相似，但会把绑定的数值放大10倍。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 筹备好一个容器-->
        <div id="root">
            <h2>以后的n值是：<span v-text="n"></span> </h2>
            <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
            <button @click="n++">点我n+1</button>
            
        </div>
    </body>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                n:1
            },
            directives:{
                big(element,binding){
                    // console.log(element,binding);
                    element.innerHTML  = binding.value *  10
                }
            }
        })
        
    </script>
</html>

留神

  • 这里的v-big属性是简写成函数，简单的写为对象
  • 默认传入两个参数，element,binding，能够看上面这张图（很清晰）
  • this 指向的是window

16.2 简单自定义指令

概述：三个阶段一起调用，先绑定、插入，模板解析时更新

需要2：定义一个v-fbind指令，和v-bind性能相似，但能够让其所绑定的input元素默认获取焦点。
元素须要插入到页面之后在进行焦点触发
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 筹备好一个容器-->
        <div id="root">
            <h2>以后的n值是：<span v-text="n"></span> </h2>
            <button @click="n++">点我n+1</button>
            <hr/>
            <input type="text" v-fbind:value="n">
        </div>
    </body>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                n:1
            },
            directives:{
                fbind:{
                    //指令与元素胜利绑定时（一上来）
                    bind(element,binding){
                        element.value = binding.value
                        console.log('bind');
                    },
                    //指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus()
                        console.log('inserted');

                    },
                    //指令所在的模板被从新解析时
                    update(element,binding){
                        element.value = binding.value
                        console.log('update');

                    }
                }
            }
        })
        
    </script>
</html>

十七、生命周期

概述：VUE帮咱们调用的函数，为一整套的VUE工作流程、钩子

罕用的生命周期钩子：
    1.mounted: 发送ajax申请、启动定时器、绑定自定义事件、订阅音讯等【初始化操作】
    2.beforeDestroy: 革除定时器、解绑自定义事件、勾销订阅音讯等【收尾工作】

对于销毁Vue实例
    1.销毁后借助Vue开发者工具看不到任何信息
    2.销毁后自定义事件会生效，但原生DOM事件仍然无效
    3.个别不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了

​

beforeDestroy：能够拜访数据，但不能批改，因为就算你批改了也不能回到beforeUpdate外面

destroyed：this.$destroy()

本文转载自infoQ作者：知心宝贝

原文链接：https://xie.infoq.cn/article/…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章