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

7次阅读

共计 15167 个字符，预计需要花费 38 分钟才能阅读完成。

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

动静构建：虚构 DOM

用户界面

渐进式

作者

特点

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

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

二、模板语法

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

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

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

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

概述：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>

概述：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>

概述

实例化对象时配置
先实例化，而后挂载

<!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>

概述

对象式

函数式（组件必须应用）

<!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 模型，利用到 VUE 中

View：模板、页面的 DOM 构造

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

DOM 监听
数据绑定

Model：代码的 data 数据对象

特点

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

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

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

实践证明，数据统一

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

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

留神

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

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

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

回车 => enter
删除 => delete (捕捉“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (非凡，必须配合 keydown 去应用，tab 会失去焦点)
上 => up
下 => down
左 => left
右 => right

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

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

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

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 实现动态效果

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

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

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

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

概述：不展现的 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>

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

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

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

概述：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>

概述：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 是没有问题的。

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

<!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>

总结

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

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

<!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 进行过滤 ……

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

<!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>

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

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

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

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

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

<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 命名，命名留神 ''

概述：只用到了 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

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

需要 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/…

正文完

前端

发表至：前端

2022-10-18

0

关于前端:你不知道的前端冷知识

transform样式详解

关于前端:BIP研发黑话单据上下游单据表单

关于前端:作为前端我对业务的一点理解

关于项目管理:软件项目研发管理系统是什么

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

Vue 根底外围知识点

一、Vue 简介

2.1 插值语法

2.2 指令语法

三、数据绑定

3.1 单向数据绑定

3.2 双向数据绑定

四、写法区别

4.1 el 写法

4.2 data 写法

五、MVVM 模型

六、数据代理

七、事件处理

7.1 根本应用

7.2 修饰符

7.3 键盘事件

7.3.1 零碎提供

7.3.2 原始 key 值

7.3.3 零碎润饰键

八、计算属性

九、监督属性

十、绑定款式

10.1 class 绑定

10.2 style 绑定

十一、条件渲染

11.1 v-show

11.2 v-if

11.3 template

十二、列表渲染

12.1 根本应用

12.2 key 的原理

12.3 列表过滤

12.4 列表排序

十三、表单数据

十四、过滤器

十五、内置指令

15.1 v-text

15.2 v-html

15.3 v-cloak

15.4 v-once

15.5 v-pre

十六、自定义指令

16.1 简略自定义指令

16.2 简单自定义指令

十七、生命周期

站内搜索