Web前端最全【VUE3】保姆级基础讲解（一）：初体验与指令_vue3写法this(1)，hashmap面试题及答案

于 2024-05-17 00:13:49 发布
阅读量764 收藏 27
点赞数 23
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84434880/article/details/138979753
版权

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

前端资料图.PNG

v-bind（重要）

对象语法

v-bind直接绑定对象

v-on

条件渲染

v-for

基础使用

数组更新监听

key属性

v-model

v-model绑定checkbox

v-model绑定radio

lazy修饰符

number修饰符

trim修饰符

安装和引入

CDN

<script src="https://unpkg.com/vue@next"></script>

本地引入

打开CDN链接，直接复制代码到本地js文件，再引入html

VUE初体验

  • 使用Vue.createApp函数创造一个app，在template里写html代码，最后用app.mount挂载到div中
<body>
    <div class="app"></div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            template:`<h2>asdasdas</h2><span>hehehe</span>`
        })
        //挂载  
        app.mount(".app")
    </script>
</body>
  • 动态展示，使用data创建函数，return创建的变量，在template中使用插值语法{{}}
<body>
    <div class="app"></div>
    
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template:`<h2>{{title}}</h2><span>{{message}}</span>`,
            data:function(){
                return {
                    title:'hello word',
                    message:'message'                    
                }
            }
        })
        //挂载  
        app.mount(".app")
    </script>
</body>app")
  • 列表数据，使用v-for = “item in xxx”来遍历xx数组
<body>
    <div class="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template:`
            <h2>{{title}}</h2>
            <ul>
                <li v-for="item in message">{{item}}</li>
            </ul>
            `,
            data:function(){
                return {
                    message:['message','123','222']              
                }
            }
        })
        app.mount(".app")
    </script>
</body>
  • 计数器，使用methods创建函数，并在template中使用 @click='plus’绑定事件与函数
<body>
    <div class="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template:`
            <h2>计数器:{{counter}}</h2>
            <button @click='plus'>+1</button>
            <button @click='sub'>-1</button>
            `,
            data:function(){
                return {
                    counter:0
                }
            },
            methods:{
                plus:function(){this.counter++},
                sub:function(){this.counter==0? this.counter=0:this.counter--},
            }
        })
        app.mount(".app")
    </script>
</body>

上面的例子中，template都写的很别扭，因为是在··中写的，没有提示，可以改进为：

<body>
    <div class="app">
        <h2>计数器:{{counter}}</h2>
        <button @click='plus'>+1</button>
        <button @click='sub'>-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    counter:0
                }
            },
            methods:{
                plus:function(){this.counter++},
                sub:function(){this.counter==0? this.counter=0:this.counter--},
            }
        })
        app.mount(".app")
    </script>
</body>

既将template内容直接写到div中，app.mount(“.app”)时会自动渲染这个div的内容

MVVM模型

MVC和MVVM

什么是MVVM框架？ - 知乎

在VUE中，VUE就是充当了viewmodel角色，他是一个桥梁，链接了model和view，能自己完成事件监听和数据展示，不需要人为写代码设置

data属性 与 methods属性

methods中都是使用this.去调用变量，这里的this都是一个proxy对象，用于监听变量的改变，这里不能用箭头函数的原因也是这个，因为箭头函数没有this，当我们使用this时实际上是使用了window，这样就不能找到我们需要改变的变量了

VUE基础-模板语法

Mustache双大括号语法

上一章说了 {{}} 可以引入data函数中返回的变量，其实不仅仅是引入，甚至可以进行转换和计算

<body>
    <div class="app">
        <h2>{{counter*2}}</h2>
        <span>{{infos.split(' ')}}</span>
        <h3>{{age>=18?'成年人':"未成年人"}}</h3>
        <h2>{{gettime()}}</h2>

    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    counter:100,
                    infos:'hello world',
                    age:22
                }
            },
            methods:{
                gettime:function(){
                    return '2022-12-1'
                }
            }
        })
        app.mount(".app")
    </script>
</body>

可以在{{}}中进行计算和字符串变换，也就是说{{}}可以写表达式

上述例子中，在{{}}中完成了

  • 数字计算表达式
  • 字符串分割转换
  • 三元表达式（这个地方不能写if表达式）
  • 函数调用

v-once指令

对于

{{counter}}

这个指令，如果在h2处增加v-once，变为： 

<h2 v-once>{{counter}}</h2>

这个v-once的意思是是只渲染一次，那么后期如果counter这个值改变了，那么h2显示的内容也不变

v-html

可以解析html命令字符串

    <div class="app">
//解析字符串
        <h2 v-html="infos"></h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    infos:`<span style="color: red;">hhhhh</span>`,
                }
            },

v-pre

可以跳过解析过程，也就是说**{{}} 直接当成大括号字符串处理**

<h2 v-pre>{{counter}}</h2>

结果就直接是{{counter}}

v-cloak

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div class="app">
        <h2 v-cloak>{{counter}}</h2> 
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    counter:11,
                }
            },
        })
        setTimeout(()=>{
            app.mount(".app")
        },1000)
    </script>
</body>
</html>

如果我给 app.mount(“.app”)设置间隔时间，1s之后再挂载div，也就是说1s之后h2中的counter才会变渲染变为11

正常情况下，前1s，浏览器显示的是 {{counter}} 1s之后显示 11

很显然这样是不好的，因为我们不希望用户看见代码内容，那么就可以使用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  区别

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

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

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

``

v-show 和  v-if  区别

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-8gzPfkM0-1715876005494)]

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

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

[外链图片转存中…(img-qGIWrkYG-1715876005494)]

2401_84434880
关注
  • 23
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue3与星火大模型的Spark-Web-JS源码：AI对话应用开发实例
03-25
项目概述：本项目是一款基于Vue3和星火大模型的AI对话应用，命名为Spark-Web-JS。主要采用JavaScript进行开发，辅以Vue.js框架，并结合CSS与HTML进行界面设计。项目包含共31个文件，具体构成如下：JavaScript文件8个...
解决vue net :ERR_CONNECTION_REFUSED报错问题
10-14
主要介绍了解决vue net :ERR_CONNECTION_REFUSED报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Web前端框架应用：第3章 Vue开发基础-组件进阶.pptx
06-06
第3章 Vue开发基础（下） 全局API 全局配置 实例属性 组件进阶 学习目标 目录 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 实例属性 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 组件进阶 知识架构 ...
Web前端框架应用：第3章 Vue开发基础-全局配置.pptx
06-06
第3章 Vue开发基础（下） 全局API 全局配置 实例属性 组件进阶 学习目标 目录 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 实例属性 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 组件进阶 知识架构 ...
Web前端框架应用：第3章 Vue开发基础-API.pptx
06-06
第3章 Vue开发基础（下）;学习目标;目录;知识架构;知识架构;知识架构;知识架构;知识架构;Vue.directive：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性。;案例展示：自定义注册指令v-focus。;...
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
vue-web3：V Vue.js的Web3区块链绑定（受Vuefire和Drizzle启发）
02-05
VueWeb3 Web3 1.0的Vue.js绑定安装在模块环境中，例如CommonJS： npm install vue web3@beta vue-web3 var Vue = require ( 'vue' )var Web3 = require ( 'web3' )var VueWeb3 = require ( 'vue-web3' )// explicit ...
vue3 + vite入门级资料 (基于vue2和前端基础)
12-13
这是一项基于vite框架和vue3的学习项目，主要使用了vue3的组合式API，也就是复合setup函数的写法。其中内容有vue3的生命周期，watch函数，以及vue3的响应式数据reactive和ref的用法。简而言之就是练手，练基本操作。
70G新课程！新技术新高度-Vue3+TypeScript前端全新技术荟萃 前端大师殿堂进阶高级实战
07-05
一线大厂的前端开发技术荟萃，带领同学们征战前端开发技术的最前沿！课程内容通过整合Vue3+TypeScript及相关技术栈的高级技术与开发特性，让同学们迅速掌握最新的开发技术，并能够直击应用于开发工作之中。 ├─1....
vue-web-extension：:hammer_and_wrench_selector:Vue CLI 3+预设（以前是Vue CLI 2样板），用于使用Vue，Babel，ESLint等快速启动Web扩展！
02-02
如果您将此样板的v1与Vue-CLI 2支持一起使用，请参阅。 此Vue CLI预设允许您快速启动包含以下内容的Web扩展： 多亏了 ，构建Web扩展所需的一切（ manifest.json ， .zip构建...） 和 （可配置） 与 和（包括...
vue3+ts+antd 前端基础模板
最新发布
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
Web前端框架应用：第3章 Vue开发基础-属性及应用.pptx
06-06
Web前端框架应用：第3章 Vue开发基础-属性及应用.pptx
Web前端框架应用：第1章 Vue基础入门-打包工具.pptx
06-06
第1章 Vue基础入门 初识Vue webpack打包工具 Vue开发环境 学习目标 目录 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 Vue开发环境 ☞点击查看本节相关知识点 1.3 webpack打包工具 安装webpack webpack官网...
Vue2+Vue3前端框架全套视频.zip
02-24
目录网盘文件永久链接 Vue2+Vue3 part1 Vue2+Vue3 part2 Vue2+Vue3 part3 Vue2+Vue3 part4 Vue2+Vue3 part5
电影推荐系统（前端：Vue3 + Element Plus + axios）.zip
01-03
电影推荐系统（Movie Recommendation System，前端：Vue3 + Element Plus + axios）
web前端VUE框架-基础知识及核心原理
02-24
Vue(读音/vju:/，类似于view)是一套用于构建用户界面的渐进式框架特点：易用、灵活、高效全家桶：vue+components（vueelement/iview...）+vue-router+vuex+vue-cli类库：jquery、zepto、underscore...插件：dialog、...
vue3中使用Web Worker多线程（JS原味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
vue3中使用Web Worker多线程（TS风味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
【JaveWeb教程】（10）Web前端基础：Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例
01-07
【JaveWeb教程】（10）Web前端基础：Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例，这篇博文的案例，没有看这篇博文，下载下来也是没什么用。
web前端代码规范vue3
09-01
在Web前端开发中，编写规范的代码是非常重要的，可以提高代码的可读性和维护性。对于Vue3项目的代码规范，可以参考以下步骤： 1. 配置ESLint：ESLint是一个用于检测和报告JavaScript代码错误的工具。在Vue3项目中，可以通过在项目根目录下的.eslintrc.js文件中进行配置。其中，extends后面的"@vue/standard"表示使用Vue官方提供的标准方式进行代码检测。 2. 安装相关插件：在Vue3项目中，可以使用一些lint插件来辅助编写规范的代码。例如，可以使用"plugin:vue/vue3-essential"来对Vue3模板编写进行检测。这些插件可以在.eslintrc.js文件中配置。 3. 遵循Vue官方指南：Vue官方提供了一份详细的代码规范指南，建议开发者遵循这些指南来编写Vue3项目的前端代码。该指南包含了Vue3的最佳实践、命名规范、组件设计等方面的内容，可以帮助开发者编写更规范的代码。 总结：对于Vue3项目的前端代码规范，可以通过配置ESLint，安装相关插件，并遵循Vue官方指南来实现。这样可以确保代码的质量和可读性，提高开发效率。请参考以上步骤进行操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [前后端分离vue.js+spring boot 计算机软件工程课程设计毕业设计 前端 后端](https://download.csdn.net/download/Amzmks/88275824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [前端实战项目:前端框架Vue3.0项目教程（一）Vue3.0环境的搭建](https://blog.csdn.net/play_big_knife/article/details/119912738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值