手把手教你入门Vue，猴子都能看懂的教程（下）-阿里云开发者社区

十、绑定样式

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

10.1 class 绑定

可以通过属性、数组、对象绑定，注意和data的连通性

10.2 style 绑定

通过对象、数组方式绑定，注意使用驼峰命名

十一、条件渲染

11.1 v-show

概述：通过display隐藏，dom 仍然存在

网络异常，图片无法展示

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

复制代码

11.2 v-if

概述：不展示的dom直接移除，满足逻辑上的if else结构

网络异常，图片无法展示

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

复制代码

<divv-if="n===1">1</div><divv-else-if="n===2">2</div><divv-else-if="n===3">3</div>//v-else直接输出，因为最后的结果
<divv-else="n>=4">4</div>

复制代码

11.3 template

概述：不会出现在dom中，可以作为统一管理工具

网络异常，图片无法展示

<templatev-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><metacharset="UTF-8"/><title>基本列表</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- v-for指令:1.用于展示列表数据2.语法：v-for="(item, index) in xxx" :key="yyy"3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）--><!-- 准备好一个容器--><divid="root"><h2>人员列表</h2><ul><liv-for="(p,index) in persons":key="index">                    {{p.name}} --- {{p.age}}
</li></ul><h2>汽车列表</h2><ul><liv-for="(c,index) in car":key="index">                    {{c}} --- {{index}}
</li></ul><h2>字符串列表</h2><ul><liv-for="(s,index) in str":key="index">                    {{s}} --- {{index}}
</li></ul><h2>数字列表</h2><ul><liv-for="(s,index) in 5":key="index">                    {{s}} --- {{index}}
</li></ul></div></body><scripttype="text/javascript">Vue.config.productionTip=falsenewVue({
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><metacharset="UTF-8"/><title>列表过滤</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><inputtype="text"v-model="keyName"><ul><liv-for="p in filPersons":key="p.id">                    {{p.name}} --- {{p.age}}
</li></ul></div><scripttype="text/javascript">newVue({
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=>{
returnp.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><metacharset="UTF-8"/><title>列表排序</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h2>人员列表</h2><inputtype="text"placeholder="请输入名字"v-model="keyWord"><button@click="sortType = 2">年龄升序</button><button@click="sortType = 1">年龄降序</button><button@click="sortType = 0">原顺序</button><ul><liv-for="(p,index) of filPersons":key="p.id">                    {{p.name}}-{{p.age}}-{{p.sex}}
<inputtype="text"></li></ul></div><scripttype="text/javascript">Vue.config.productionTip=falsenewVue({
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(){
constarr=this.persons.filter(p=>{
returnp.name.indexOf(this.keyWord)!=-1                        })
if(this.sortType){
arr.sort((p1,p2)=>{
returnthis.sortType===1?p2.age-p1.age : p1.age-p2.age                            })
                        }
returnarr                    }
                }
            }) 
</script></html>

复制代码

十三、表单数据

概述：v-bind 和 v-model 针对具有 value 属性的标签，对于其他的标签，可使用下述方法

网络异常，图片无法展示

<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>收集表单数据</title><scripttype="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组成的数组--><!-- 准备好一个容器--><divid="root"><form@submit.prevent="print">                账号：<inputtype="text"v-model.trim="userInfo.account"><br><br>                密码：<inputtype="password"v-model="userInfo.password"><br><br>                年龄：<inputtype="number"v-model.number="userInfo.age"><br><br>                性别：
                男<inputtype="radio"name="sex"value="male"v-model.number="userInfo.sex">                女<inputtype="radio"name="sex"value="female"v-model.number="userInfo.sex"><br><br>                爱好：
                唱 <inputtype="checkbox"value="sing"v-model="userInfo.hobby">                跳 <inputtype="checkbox"value="dance"v-model="userInfo.hobby">                rap <inputtype="checkbox"value="rap"v-model="userInfo.hobby">                篮球 <inputtype="checkbox"value="basketball"v-model="userInfo.hobby"><br><br>                城市：
<selectv-model="userInfo.city"><optionvalue="">选择城市</option><optionvalue="beijing">北京</option><optionvalue="shanghai">上海</option><optionvalue="shenzhen">深圳</option></select><br><br>                其他信息：
<!-- 懒加载 --><textareav-model.lazy="userInfo.other"></textarea><br><br><inputtype="checkbox"value="confirm"v-model="userInfo.agree">                阅读并接受 <ahref="http://www.baidu.com">《用户协议》</a><br><br><button>提交信息</button></form></div></body><scripttype="text/javascript">Vue.config.productionTip=falsenewVue({
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><metacharset="UTF-8"/><title>过滤器</title><scripttype="text/javascript"src="../js/vue.js"></script><scripttype="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.并没有改变原本的数据, 是产生新的对应的数据--><!-- 准备好一个容器--><divid="root"><h2>当前的时间为 {{time}}</h2><h2>计算属性 {{formTime}}</h2><h2>计算方法 {{getFormatTime()}}</h2><h2>过滤器 {{time | filterTime('YYYY年MM月DD日')}}</h2></div><divid="root2"><h2>{{msg | filterSlice(4)}}</h2></div></body><scripttype="text/javascript">Vue.config.productionTip=false//全局过滤器Vue.filter('filterSlice',(value,num)=>{
returnvalue.slice(0,num)
        })
newVue({
el:'#root',
data:{
time:Date.now()
            },
computed:{
formTime(){
returndayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 
                }
            },
methods: {
getFormatTime(){
returndayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 
                }
            },
filters:{
filterTime(value,str='YYYY年MM月DD日 HH:mm:ss'){
returndayjs(value).format(str) 
                }
            }
        })
newVue({
el:'#root2',
data:{
msg:'123456789',
            },
        })
</script></html>

复制代码

注意

过滤器只有全局通用
第一个参数一定是value，后面接受别的参数
过滤器可以是多个，A、B 过滤的结果 C 和 D 进行过滤......

十五、内置指令

15.1 v-text

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

网络异常，图片无法展示

<!DOCTYPE html><html><head><metacharset="UTF-8"/><title>v-text指令</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><div>你好，{{name}}</div><divv-text="name">你好 </div><divv-text="str"></div></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({
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 所在结构的更新，可以用于优化性能。

网络异常，图片无法展示

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

复制代码

15.5 v-pre

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

网络异常，图片无法展示

<h2>Vue其实很简单</h2><h2v-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><metacharset="UTF-8"/><title>自定义指令</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h2>当前的n值是：<spanv-text="n"></span></h2><h2>放大10倍后的n值是：<spanv-big="n"></span></h2><button@click="n++">点我n+1</button></div></body><scripttype="text/javascript">Vue.config.productionTip=falsenewVue({
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><metacharset="UTF-8"/><title>自定义指令</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h2>当前的n值是：<spanv-text="n"></span></h2><button@click="n++">点我n+1</button><hr/><inputtype="text"v-fbind:value="n"></div></body><scripttype="text/javascript">Vue.config.productionTip=falsenewVue({
el:'#root',
data:{
name:'尚硅谷',
n:1            },
directives:{
fbind:{
//指令与元素成功绑定时（一上来）bind(element,binding){
element.value=binding.valueconsole.log('bind');
                    },
//指令所在元素被插入页面时inserted(element,binding){
element.focus()
console.log('inserted');
                    },
//指令所在的模板被重新解析时update(element,binding){
element.value=binding.valueconsole.log('update');
                    }
                }
            }
        })
</script></html>

复制代码

十七、生命周期

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

常用的生命周期钩子：    1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】    2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例    1.销毁后借助Vue开发者工具看不到任何信息    2.销毁后自定义事件会失效，但原生DOM事件依然有效    3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

复制代码

网络异常，图片无法展示

beforeDestroy：可以访问数据，但不能修改，因为就算你修改了也不能回到beforeUpdate里面

destroyed：this.$destroy()

手把手教你入门Vue，猴子都能看懂的教程（下）

十、绑定样式

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 复杂自定义指令

十七、生命周期

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

手把手教你入门Vue，猴子都能看懂的教程（下）

十、绑定样式

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 复杂自定义指令

十七、生命周期

热门文章

最新文章

相关课程

相关电子书

相关实验场景