当前位置： 首页 > news >正文

猿创征文 | 一个大四学长分享自己的web前端学习路线--vue篇（1/3）

news 来源：原创 2024/5/4 18:16:46

目录

前言

web知识体系 

一、vue学习路线

1、Vue的使用

1.1 学会模板插值、指令

 1.2watch属性

 1.3computed属性

 1.4 class和style

1.5 v-if和v-show属性

1.6 v-for属性

1.7 事件 event参数

1.8事件修饰符

1.9按键修饰符

1.10表单

2、组件

2.1 生命周期

 2.2 props（类型与默认值）

2.3 自定义事件

3、高级特性

3.1自定义v-model

3.2 $nextTick

3.3 slot插槽

3.4作用域插槽

3.5 具名插槽

3.6 动态组件

3.7 keep-alive

二、vue周边工具

1、Vuex

1.1用于Vuex的配置选项

1.2用于vue的配置选项

2、vue-router

2.1 动态路由

2.2 懒加载

2.3 剩下的工具（统一放在一起）

前言

   敬各位看到这篇文章的读者朋友们！很荣幸大家能在茫茫的博文海洋里看到小编这篇文章，这里借着C站举办“猿创征文”的活动，向大家分享一下自己的web前端的学习路线，希望此篇能给正在上路的朋友们带来方向，不在迷茫，知道应该怎么学习；希望此篇能给到步入社会的读友们，归纳知识，一面（面试）就成功！

   对于我而言，一个99后的小伙子，已经毕业，不再能冠以学生之名，怀念大学的学生生活的时光，时光荏苒，接触到web前端也是一个机缘巧合的时刻。关于这一部分，大家感兴趣的话可以看一看本博主的另一篇文章，书写了自己与web前端的技术的成长之路：猿创征文 | 初见乍惊欢，久处亦怦然--我web前端的技术成长之路_丘比特惩罚陆的博客-CSDN博客大家好！很荣幸大家能在茫茫的C站博文世界中浏览我这一篇博文，在这里由衷的感谢大家！！！然后借着这一次C站举办的这一个“猿创征文”的活动，向大家分享一个我的web前端的技术成长之路。...https://blog.csdn.net/Lushengshi/article/details/126591078

大家也可以支持一下，你们的支持就是我强大的动力。

web知识体系 

 根据上图的知识体系结构图，我们大概可以知道前端的学习的大方向可以是：先学Vue，再到webpack项目模块维护、最后是前端web小程序，三个大的方向，当然学习的过程是痛苦的大家一步步来，千里之行始于足下。

上图的GIF动态图可以大概了解到，每一个学习的方向有很多的小分支，因为总结归纳的时候用的是百度脑图，所以该知识体系的架构图不能上传到C站当中，感兴趣的朋友可以私聊，本文只能是用文章的方式对思维导图进行总结，文章内容很多，我尽量做到句句是重点！ 

一、vue学习路线

1、Vue的使用

1.1 学会模板插值、指令

  学会使用插值、什么是表达式、了解什么是指令、什么是动态属性已经v-html标签（注意：v-html这个标签会有XSS风险，它会将我们的子组件覆盖掉）

 1.2watch属性

    要注意的一点是，在watch这个属性下，它是不会进行深度监听的，如果监听是为了引用流就会拿不到oldval,因为这个时候的指针是一样的，但是已经指向了新的val;另外一点要注意的是应用类型的话需要对watch+一个deep：这样true属性才能实现深度的监听。

 1.3computed属性

  computed属性会缓存，所以就需要data有变化的时候才会进行重新计算！

 1.4 class和style

  学会掌握class和style使用动态属性以及驼峰式写法。

    <div id="app">
        <p :class="(black:isBalck,red:isRed)">使用class</p>
        <p :class="[black,yellow]">使用class 数组</p>
        <p :class="styleData">使用style</p>
    </div>

        data(){
            return {
               isBlack:true,
               idRed:true,
               black:'black',
               red:'red',
               styleData:{
                fontSize:'20px',   //转换为驼峰式
                color:'blue',
                backgroundColor:'#ccc'  //转换为驼峰式
               }
            }
        },

1.5 v-if和v-show属性

学会什么是v-if和什么是v-show。v-if是判断出来什么就显示什么，其他的练DOM节点都不给渲染；v-show则是判断什么就显示什么，其他的就是用display：node给隐藏起来，但是还是要进行渲染的。

    <div id="app">
<p v-if="type === 'qbt'">QBT</p>
<p v-else-if="type === 'cfl'">CFL</p>
<p v-else>显示其他</p>

<p v-show="type === 'qbt'">show显示</p>
<p v-show="type === 'cfl'">show显示cfl</p>
    </div>

<script>
    export default{
        data(){
            return {
                type:'a'
            }
        }
    }
</script>

1.6 v-for属性

学会什么是v-for循环属性，还要注意的是在使用v-for属性的时候要，key需要和业务相关的id,不可以随意的写。

<body>
    <div id="app">
<p>遍历数组</p>
<ul>
    <li v-for="{ite,index} in listarr" :key="item.id">
        {{index}}--{{itemid}}--{{item.title}}
    </li>
</ul>

<p>遍历对象</p>
<ul>
    <li v-for="(val,key,index) in list1" :key="key">
        {{index}}--{{key}}--{{val.title}}
    </li>
</ul>
    </div>
</body>

    export default{
        data(){
            return {
                listarr:{
                    { id:'a',title:'主题一'},
                    { id:'b',title:'主题二'},
                },
                listobj:{
                    a:{title:'主题一'},
                    b:{title:'主题二'},
                }
            }
        }
    }

1.7 事件 event参数

  学会什么是event事件参数，注意：如果函数不需要传递参数的话可以直接在定义直接在定义的时候获取event。如果需要传递参数就需要通过￥event带引用过来。event的构造函数是MouseEvent，target是时间监听的地方也是时间挂载的地方，currentTarget是时间触发的地方。

<body>
    <div id="app">
<p>{{num}}</p>
<button @click="increnent1">加一</button>
<button @click="increnent2(2,$event)">加二</button>
    </div>
</body>

<script>
    export default{
        data(){
            return {
                num:0
            }
        }
    }

1.8事件修饰符

熟悉掌握什么是时间修饰符，熟练掌握，下面罗列了一系列事件修饰符的案例：

<body>
    <div id="app">
<!-- 阻止单击事件继续传输 -->
<p v-on:click.stop="dothis"></p>
<!-- 提交事件不再重置啊页面 -->
<p v-on:submit.prevent="onsubmit"></p>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="dothat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器的时候使用事件捕获模式 -->
<!-- 内部元素触发的时间先在这里处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="dothis">完成这个</div>
<!-- 只当在event.target是当前元素自身触发的时候处理函数 -->
<!-- 简单而言，就是时间不是从内部元素触发的 -->
<div v-on:click.self="dothat">完成那个</div>
    </div>
</body>

1.9按键修饰符

熟悉掌握什么是按键修饰符，熟练掌握，下面罗列了一系列按键修饰符的案例：

<body>
    <div id="app">
<!-- 即使年下alt或者shift，呗一同按下的时候也会触发 -->
<button @click.ctrl="onclick">按下</button>
<!-- 有且只有CTRL被按下的时候才能触发 -->
<button @click.ctrl.exact="onCtrlCLick">按下</button>
<!-- 没有任何系统修饰符按下的时候才能被触发 -->
<button @click.exact="onclick">按下</button>
    </div>
</body>

1.10表单

1、了解使用v-model标签；

2、熟悉掌握常见的表单项textarea、CheckBox、radio、select；

3、学会使用常见的修饰符lazy、number、trim.

<body>
    <div id="app">
<p>输入框{{name}}</p>
<input type="text" v-model.trim="name"/>
<input type="text" v-model.lazy="name"/>
<input type="text" v-model.number="name"/>

<p>多行文本{{desc}}</p>
<textarea v-model="desc"></textarea>
<!-- 注意：这样的写法是错误的：<textarea>{{desc}}</textarea> -->

<p>复选框 {{check@name}}</p>
<input type="checkbox" id="1" value="1" v-model="checkbox">
<label for="1">no1</label>
<input type="checkbox" id="2" value="2" v-model="checkbox">
<label for="2">no2</label>
    </div>
</body>

2、组件

2.1 生命周期

  1. 了解生命周期的三个阶段：挂载、更新、销毁阶段；
  2. 了解父子组件是要等子组件完成才能完成父组件。

 2.2 props（类型与默认值）

   掌握了解其定义，当父组件将数据传递到子组件的时候，这里是list；props可以直接写数组，但是写成对象的形式的话就可以定义米欧认知和类型。了解到父组件到子组件之间是数据的传递，子组件到父组件是事件的调用。

<body>
    <div id="app">
<input @add="addhand"/>
<List :list="list" @delete="deletehand"></List>
    </div>
</body>

<script>
    import input from './input'
    import List from './List'

    export default{
        components: {
            input,
            List
        },
        data(){
            return {
                List:[
                    {
                        id:'11',
                        title:'主体1'
                    }
                ]
            }
        }
    }
<body>
<div>
    <ul>
        <li v-for="item in list" :key="item.id">{{item.title}}
            <button @click="deleteitem(item.id)">删掉ID</button>
        </li>
    </ul>
</div>
</body>

<script>
    import event from './event'
    export default{
        props:{
            list:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        methods:{
            addtitle(){
                // 调用父组件事件
                this.$emit('add',this.title)

                // 调用自己定义的时间
                event.$emit('onAddtitle',this.title)

                this.title = ''
            }
        }

2.3 自定义事件

理解自定义事件是什么：就是组件之间的通讯不仅仅是props+$emit,还有我们的自定义的时间；自定义事件是为了处理除了父子组件之间的通讯。

 调用自己定义的事件：

event.$emit('onAddtitle',this.title)

及时销毁，不然会有可能造成内存泄漏

        beforeDestory(){
            event.$off('onAddtitle',this.addtitlehander)
        }

3、高级特性

3.1自定义v-model

   第一步，我们要先接受一个props，并且要定义好model，注意的是命名名字要保持一致，然后再定义一个event作为触发事件，这个也要一致，再然后可以去标签当中去绑定变量和事件。

<body>
<div>
   <p>高级特效</p>
</hr>

<!-- 自定义 v-model -->
<p>{{name}}</p>
<MyVNodel v-model="name"></MyVNodel>
</div>
</body>

<script>
    import MyVNodel from './MyVNodel'
    export default{
        components: {
            MyVNodel
        },

3.2 $nextTick

 记住以下三点：1、vue是异步渲染得；2、data数据改变之后，DOM是不会立即渲染的；3、$nextTick会在DOM渲染之后会触发，以获取最新的DOM节点。

// 异步渲染  $nextTick待DOM渲染玩再回调
//页面渲染的时候会将data的修改做整合，多次data修改智慧渲染一次
this.$nextTick(){
    // 获取DOM元素
    const ulElem  = thsi.$refs.ul1
    console.log(ulElem.childNodes.length)
}
            }

要注意的是操作DOM的时候需要拿到DOM才能用到。多次改变data就会渲染一次，nextTick就会只执行一次。

3.3 slot插槽

  slot插槽的使用大家可以翻博主往期的博客，比这边总结的更加详细。注意的是slot插槽就是接收外部莹莹的子节点，组件什么的都可以插入，当啊人不传的话就会显示slot的默认内容。

<body>
<div>
<a href="url">
    <slot>你写的内容，没有写的话 就会显示默认的内容</slot>
    <!-- 简单地说，默认内容的话，急速父组件没有设置内容，就会在这里显示 -->
</a>
</div>
</body>

<script>
    export default{
        props:['url'],
        data(){
            return {}
        },

3.4作用域插槽

    总结：这个是使用slot的子组件中多了一个data，如果不传内容的话，就会显示我们data里面的内容，那么把这个子组件的data给到哪里使用？这个就会给到我们的作用域插槽，scoped，需要在子组件随意定义一个属性绑定到我们的data里面的数据，父组件调用就不能直接写，需要写template，指定v-slot，然后就可以使用子组件中的slot的值了。

<body>
<div>
<a href="url">
    <slot>{{myweb}}</slot>
</a>
</div>
</body>

<script>
    export default{
        myweb:['http://xxxxxx.com'],//仅仅是个例子
        title:'博客没人看！！！',
        }

3.5 具名插槽

  除了以上罗列出来的插槽，当然还有更加简单粗暴的，那就是我们的具体名字的插槽，我们称其为具名插槽，顾名思义就是那一些含有名字的插槽。

<body>
    <!-- 使用具名插槽 -->
<div class="container">
<header>
    <slot name="header"></slot>
</header>
<main>
    <slot></slot>
</main>
<footer>
    <slot></slot>
</footer>
</div>
</body>

3.6 动态组件

  了解什么是动态组件？知道其用法：is=“组件名”的这个用法.再者，要注意的是那些比较常见的页面，需要根据数据来确定具体渲染什么；注意的还有data中组件的名字，nextTick要和注册和引入的组件的名字要一样的，简单而言，急速需要根据数据动态的渲染的场景，组件的类型不能确定。

  

<component :is="NextTickname"></component>


<script>
    export default{
        data(){
            return {
                name:'xxx',
                myweb:{
                 url:'http://xxxxx.com',
                 title:'xxxx',
                },
                NextTickname:"NextTick"
            }
        }

3.7 keep-alive

  学会知道什么是keep-alive.再者，要注意的是不需要我们频繁的渲染比如tab页、按钮点击显示的内容；还要了解的是keep-alive和v-show的区别，v-show是直接修改css当中的display，简单粗暴，但是keep-alive是在vue的层级框架爱对js的对象渲染控制。

<body>
<div>
    <keep-alive>
        <KeepAliveStageA v-if="state === 'A'"/>
        <KeepAliveStageB v-if="state === 'B'"/>
        <KeepAliveStageC v-if="state === 'C'"/>
    </keep-alive>
</div>
</body>

二、vue周边工具

1、Vuex

1.1用于Vuex的配置选项

了解的是Vuex里面包含有的配置选项分别有什么，这里可以一一的罗列出来，分别有：state、getters、action、mutation。

1.2用于vue的配置选项

了解的是用于vue的配置选项都有哪些、以及应该怎么使用这一些配置选项，这里还是罗列一下，分别有：dispatch、commit、mapstate、mapGeeters、mapActions、mapMutations.

小结：只要了解这一些配置选项即可，对于我来说没必要要死记硬背，只要你会用就可以了，这里为什么没有罗列实例代码，是因为之前写了相关的博文，比这里更加的详细，大家可以移步到相关的博文浏览，这里小编贴心的把相关的链接给大家放出来：

猿创征文｜【Vue五分钟】 Vuex状态管理总结_丘比特惩罚陆的博客-CSDN博客Vuex是一个专门为了vue项目开发而开发的状态管理的模式。因为我们的vue组件之间都会存在自己的状态，并且每一个数据之间都需要共享需要的数据。https://blog.csdn.net/Lushengshi/article/details/126568845

2、vue-router

2.1 动态路由

了解并掌握vue-router路由的配置已经什么是动态路由。

    const User = {
        // 获取参数
        template: '<div>User {{ $router.params.id}}<div/>'
    }

    const router = new VueRouter({
        router:[
            // 动态路径参数 以：开头  
            { path:'/user:id',component:User }
        ]
    })

2.2 懒加载

了解掌握什么是懒加载以及懒加载应该怎么使用（配合动态组件使用），我们的路由懒加载其实就是利用import函数去异步加载组件而已。

<script>
    export default new VueRouter({
       router:[
        {
            path:'/',
            component:()=>import({
                './../component/myadd'
            })
        },
        {
            path:'/feedback',
            component:()=>import({
                './../component/mydelete'
            })
        }
       ]
    })
</script>

2.3 剩下的工具（统一放在一起）

突然发现剩下的组件一个个写的话，文章太长了，才想起这是个归纳思维导图的，没必要全部一一写下来，大家用到什么就去学什么就好了，学习是自己的。

  • to 配置选项
  • push 配置选项
  • history 配置选项
  • hash 配置选项

相关文章：

  • ELK日志分析系统简
  • 详细SpringBoot框架教程——SpringBoot配置SSL（https）
  • 性能测试你需要懂这些
  • 【付费推广】常见问题合集，焦点展台与任务管理
  • Android毕业论文选题基于Uniapp+Springboot实现的校园论坛
  • 佛山复星禅诚医院黄汉森：云边协同，打造线上线下一体化智慧医疗
  • Connor学JVM - 执行引擎
  • 【软考学习6】计算机存储结构——局部性原理、Cache、主存地址单元、磁盘存取、总线和可靠性
  • Python 基于OpenCV+face_recognition实现人脸捕捉与人脸识别
  • TensorFlow？PyTorch？Paddle？AI工具库生态之争：ONNX一统天下 ⛵
  • 关于 Java Long 类型传给前端损失精度
  • 30分钟熟练使用最常用的ES6，还不学是等着被卷死？
  • 【面试题】面试必备我跟面试官聊了一个小时线程池！
  • 设置服务器上MySQL允许外网访问
  • 【牛客网刷题】中秋节前开启java专项练习错题总结第一天
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • #Java异常处理
  • 【刷算法】从上往下打印二叉树
  • Android 架构优化~MVP 架构改造
  • ES学习笔记(12)--Symbol
  • JavaScript工作原理（五）：深入了解WebSockets，HTTP/2和SSE，以及如何选择
  • jquery ajax学习笔记
  • Less 日常用法
  • MySQL QA
  • Python学习之路16-使用API
  • RedisSerializer之JdkSerializationRedisSerializer分析
  • Shell编程
  • Yeoman_Bower_Grunt
  • 飞驰在Mesos的涡轮引擎上
  • 分布式事物理论与实践
  • 分享一个自己写的基于canvas的原生js图片爆炸插件
  • 解析带emoji和链接的聊天系统消息
  • 力扣(LeetCode)21
  • 手写一个CommonJS打包工具（一）
  • 数据科学 第 3 章 11 字符串处理
  • 思否第一天
  • 系统认识JavaScript正则表达式
  • 一个完整Java Web项目背后的密码
  • 用 vue 组件自定义 v-model， 实现一个 Tab 组件。
  • 由插件封装引出的一丢丢思考
  • 找一份好的前端工作，起点很重要
  • 阿里云移动端播放器高级功能介绍
  • ​云纳万物 · 数皆有言｜2021 七牛云战略发布会启幕，邀您赴约
  • # Apache SeaTunnel 究竟是什么？
  • （Matalb时序预测）PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • （附源码）springboot助农电商系统 毕业设计 081919
  • （附源码）ssm高校实验室 毕业设计 800008
  • (五) 一起学 Unix 环境高级编程 (APUE) 之 进程环境
  • （一）SpringBoot3---尚硅谷总结
  • （已解决）报错：Could not load the Qt platform plugin “xcb“
  • (转)重识new
  • .CSS-hover 的解释
  • .NET Core 实现 Redis 批量查询指定格式的Key