2024年Web前端最新【VUE3】保姆级基础讲解（一）：初体验与指令_vue3写法this，2024年最新斗鱼前端面试题

最新推荐文章于 2024-06-12 11:13:48 发布

2301_82244607

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量992

点赞数 15

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_82244607/article/details/138735261

版权

程序员专栏收录该内容

164 篇文章 0 订阅

订阅专栏

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

28天读完349页，这份阿里面试通关手册，助我闯进字节跳动

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

很显然这样是不好的，因为我们不希望用户看见代码内容，那么就可以使用v-cloak ，在没有渲染完毕时先隐藏这个内容，注意这里还需要在style中设置其作用

v-memo

缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过

<body>
    <div class="app">
        <div v-memo="[name]">
            <h2>{{name}}</h2>
            <h2>{{age}}</h2>
            <h2>{{gender}}</h2>
        </div>
        <button @click="update"></button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    name:'kobe',
                    age:18,
                    gender:'male'
                }
            },
            methods:{
                update:function(){
                    this.gender='why'
                }
            }
        })
        app.mount(".app")
    </script>

只有当我name变量发生更新时，别的变量才会更新，反之异然

也就是说上面的例子，点击按钮，gender不能更新

v-bind（重要）

动态的绑定一个或多个 attribute，也可以是组件的 prop。

之前说的方法都是对 标签的内容 起作用，这个可以对 标签属性 进行赋值等操作

    <div class="app">
        <a v-bind:href="baidu">baidu</a>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    baidu:'https://www.baidu.com'
                }

省略写法

 <a :href="baidu">baidu</a>

对象语法

例子：点击按钮改变颜色

    <style>
        .btnred{
            color: red;
        }
    </style>
</head>
<body>
    <div class="app">
        <button @click="update" :class="{btnred:isred}">btnnn</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    isred:true
                }
            },
            methods:{
                update:function(){
                    this.isred = !this.isred
                }
            }
        })

:class="{btnred:isred}"指的是，如果isredtrue，则class =‘ btnred’，如果isredfalse，则class = ‘’

这个地方按钮绑定函数，直接改变isred的值

相似的，如果要改变style内部的属性

    <div class="app">
        <button :style="{color: fontcolor}">btnnn</button>
    </div>

            data:function(){
                return {
                    fontcolor :'red'
                }
            },

这个地方属性的名字，如果是类似于background-color这种属性，则需要使用驼峰命名法或者加引号

v-bind直接绑定对象

<body>
    <div class="app">
        <button v-bind = obj>btnnn</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    obj:{name:'kobe',age:15,gender:'male'}
                }
            },
        })
        app.mount(".app")
    </script>
</body>

可以直接用v-bind= obj 遍历obj里面的值键对，然后赋值给属性

v-on

对事件的绑定

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 即事件是变化的-->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 传递参数-->
<button v-on:click="doThat('hello', $event)"></button>
<!-- $event 是固定写法，表示动作的发起者 -->

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

v-on修饰符

.stop 阻止冒泡，相当于在函数中写 event.stopPropagation()

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

条件渲染

当 name 里面有值时渲染 ul li 当没有值的时候渲染 h2

直接在 v-if = ‘判断语句’ 在后面还可以使用 v-else v-else-if=‘判断语句’

<body>
    <div class="app">
        <ul v-if="name.length>0">
            <li v-for = 'item in name'>{{item}}</li>
        </ul>
        <h2 v-else>无数据</h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    name:[1,2,3]
                }
            },
        })
        app.mount(".app")
    </script>
</body>

也就是说 v-if 如果为 false，那么这个内容将会直接被销毁

v-if 可以作为隐藏或者显示组件的依据，例如下面可以通过isshow变量控制div的隐藏

        <div v-if="isshow">
            <img src='https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg'alt="">
        </div>

这里也可以使用 v-show效果是一样的

        <div v-show="isshow">
            <img src='https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg'alt="">
        </div>

v-show 和 v-if 区别

v-for

基础使用

使用 “item in xxx”的格式遍历xxx，以获取内容item

<body>
    <div class="app">
        <ul>
            <li v-for="item in name">{{item}}</li>
        </ul>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    name:[111,222,333,444]
                }
            },
        })
        app.mount(".app")
    </script>
</body>

当然不仅仅是内容，也可以获取索引，注意是内容在前，索引在后

 <li v-for="(item,index) in name">{{index}}:{{item}}</li>

当然对于对象，也可以采用这种方法

<body>
    <div class="app">
        <ul>
            <li v-for="(item,key) in products">{{key}}:{{item}}</li>
        </ul>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    products:{name:'aaa',price:999}
                }
            },
        })
        app.mount(".app")
    </script>
</body>

数组更新监听

<body>
    <div class="app">
        <ul>
            <li v-for="(item,index) in products">{{index}}:{{item}}</li>
        </ul>
        <button @click = 'deleteItem'>deleteItem</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>

        const app = Vue.createApp({
            data:function(){
                return {
                    products:[111,222,333,444,555,666]
                }
            },
            methods:{
                deleteItem:function(){
                    this.products.pop()
                }
            }
        })
        app.mount(".app")
    </script>
</body>

点击按钮时，可以监听到数组的变化，并实时反馈到页面上

key属性

VNode

也就是说，我们之前使用

创建的其实不是真实的DOM，而是VNode，之后再转换为真实的DOM

虚拟DOM

如果不是一个简单的div，而是一堆的元素，会形成一个VNode Tree，也就是虚拟DOM

为了理解 key属性的作用，这里看一个案例

<body>
    <div class="app">
        <ul>
            <li v-for="item in products" :key="'item">{{item}}</li>
        </ul>
        <button @click = 'insert'>insert</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>

        const app = Vue.createApp({
            data:function(){
                return {
                    products:['a','b','c','d','e']
                }
            },
            methods:{
                insert:function(){
                    this.products.splice(2,0,'f')
                }
            }
        })
        app.mount(".app")
    </script>
</body>

这里遍历数组，产生li ，按钮可以在 c 和 d中间插入一个f

在没有key属性时

a和b节点会只能复制，然后将c改为f，d改为c，最后增加一个节点放d

有key属性时

直接复用之前的c 和d，新增f插入

实际上有key属性时，所有操作都会遵循 **“能复用就复用”**的原则，大大增加了效率

v-model

这里通过一个小案例实现 双向绑定

<body>
    <div class="app">
        <input type="text" :value="message" @input="messageChange">
        <h1>{{message}}</h1>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    message:'hhhhh'
                }
            },
            methods:{
                messageChange(e){
                    this.message  = e.target.value
                }
            }
        })
        app.mount(".app")
    </script>
</body>

将input输入框的内容与 massage变量双向绑定，message的值可以影响到input输入框的初始值，而输入之后也可以反过来影响message的值

现在使用v-model实现双向绑定

<body>
    <div class="app">
        <input type="text" v-model="message">
        <h1>{{message}}</h1>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    message:'hhhhh'
                }
            },
        })
        app.mount(".app")
    </script>
</body>

v-model绑定checkbox

对于单选框，返回值就是 true或者false

<body>
    <div class="app">
        <input type="checkbox" v-model="message">aaa
        <h1>{{message}}</h1>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    message:''
                }
            },
        })
        app.mount(".app")
    </script>
</body>

对于多选框，返回应该是一个数组，且必须明确value值

<body>
    <div class="app">
        <label for="aaa">
            <input id="aaa"  type="checkbox" v-model="message" value="aaa">aaa
        </label>
        <label for="bbb">
            <input id="bbb"  type="checkbox" v-model="message" value="bbb">bbb
        </label>
        <label for="ccc">
            <input id="ccc"  type="checkbox" v-model="message" value="ccc">ccc
        </label>
        <label for="ddd">
            <input id="ddd"  type="checkbox" v-model="message" value="ddd">ddd
        </label>
        
        <h1>{{message}}</h1>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    message:[]
                }
            },
        })
        app.mount(".app")
    </script>
</body>

v-model绑定radio

对于rdiao，如果其使用v-model绑定相同的值，那么默认可以互斥

<body>
    <div class="app">
        <label for="aaa">
            <input id="aaa"  type="radio" v-model="message" value="male">male
        </label>
        <label for="bbb">
            <input id="bbb"  type="radio" v-model="message" value="womale">womale
        </label>
        <h1>{{message}}</h1>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    message:''
                }
            },
        })
        app.mount(".app")
    </script>
</body>

如果在data中给message设置默认，例如‘womale’，那么radio初始会自动选择womale

lazy修饰符

之前的input都是在输入时，就实时的改变了message，加入lazy修饰符之后，只有在发生改变时才会改变message，例如打回车键，鼠标点别的地方

    <div class="app">
        <input type="text" v-model.lazy="message">
        <h1>{{message}}</h1>
    </div>

number修饰符

如果message是数字类型，那么可以使用这个修饰符将变量保持为数字类型

    <div class="app">
        <input type="text" v-model.number="message">
        <h1>{{message}}{{typeof message}}</h1>
    </div>

trim修饰符

JavaScript

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
JS代码调试
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2301_82244607

关注

15
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最新【VUE3】保姆级基础讲解（一）：初体验与指令_vue3写法this，2024年最新斗鱼前端面试题

三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
复制链接

扫一扫