Vue学习之路（基础篇）(1)，2024年最新前端自学教程

{{message}}

{{score}}

点我

#总结:

事件 事件源:发生事件dom元素 事件: 发生特定的动作 click… 监听器

发生特定动作之后的事件处理程序 通常是js中函数

1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click

2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名

3.在vue中事件的函数统一定义在Vue实例的methods属性中

4.在vue定义的事件中this指的就是当前的Vue实例,

日后可以在事件中通过使用this获取Vue实例中相关数据调用methods中相关方法

（4）事件案例

{{message}}

{{score}}

点击分数+1

点击分数+任意

点击分数+任意，message拼接一个字符串

注意：

1、双向绑定机制 MVM，Model<==> ViewModel(视图模型，监听器，监听model的改变，一旦改变影响View)==>View(视图) data数据：model {{message}}这个就是view

4.2 Vue中事件的简化语法

{{name}}

{{score}}

<button @click=“incr()”>点击+1

<button @Click=“desc()”>点击-1

总结:

1.日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定

4.3 Vue事件函数两种写法

{{count}}

<input type=“button” value=“改变count的值” @click=“changecount”>

总结:

1.在Vue中事件定义存在两种写法

一种是 函数名:function(){}

一种是 函数名(){} 推荐

• 简化语法及简化函数写法

{{msg}}

{{count}}

点击年龄+1

<button @click=“incrementAge”>点击年龄+1

<button @click=“test(5)”>点击年龄+N

4.4 Vue事件参数传递

姓名：{{users[1].name}}

分数：{{score}}

<input type=“button” @click=“incr(‘优秀’)” value=“点击修改分数”>

总结:

1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

• v-on传递参数案例

{{msg}}

年龄：{{count}}

点我每次给年龄+1

点我每次给年龄+不确定

点我每次给年龄+不确定,同时msg+“你好”

点我每次给年龄+不确定,同时msg+“你好”

---

五.v-show v-if v-bind

=======================================================================================

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示

天津商业大学欢迎你的加入!

天津商业大学欢迎你的加入这是vue中定义变量true!

<input type=“button” value=“展示隐藏标签” @click=“showmsg”>

总结

1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏

2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示

百知教育

百知教育欢迎你的加入

• v-if与v-show的区别

{{msg}}

{{msg}}

v-show在谷歌里面的控制台 由css实现

5.2.1:v-if&&v-show案例

{{msg}}

{{msg}}

<button @click=“hidenH2”>用来隐藏h2标签

<button @click=" showH2">用来显示h1标签

<button @click=“showHiddenH2”>用来显示、隐藏h2

<button @click=“isShow=!isShow”>用来显示、隐藏h2(直接操作data的属性)

• v-if&v-show案例

{{msg}}

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

5.4 v-bind 简化写法

​ vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

<input type=“button” value=“动态控制加入样式” @click=“addCss”>

<input type=“button” value=“改变图片” @click=“changeSrc”>

六.v-for的使用

=============================================================================

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

1: 基础获取对象

{{user.id}}

{{user.name}}

{{user.age}}

{{user.address}}

{{user.content}}

---

2:展示对象内容

{{key}}-{{u}}-{{index}}

---

遍历普通数组

• {{index}}_{{name}}

• 遍历对象数组

  ID name address age content {{user.id}} {{user.name}} {{user.address}} {{user.age}} {{user.content}}

  

  总结

  1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

  ---

  七 .v-model 双向绑定

  ==================================================================================

  v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

  

  • 零散数据建的双向绑定

  姓名：
  

  密码：
  

  年龄：
  

  地址：
  

  <input type=“button” value=“注册” @click=“register()”>

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  文末

  我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

  首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

  更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

  前端面试题汇总

  

  JavaScript

  

  性能

  

  linux

  

  前端资料汇总

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  

  过华为、OPPO等大厂，18年进入阿里一直到现在。**

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  [外链图片转存中…(img-k53Vyavs-1712777483642)]
  [外链图片转存中…(img-CTIBwWZ3-1712777483643)]
  [外链图片转存中…(img-t0vIJfnX-1712777483643)]
  [外链图片转存中…(img-Bl41rtJm-1712777483643)]
  [外链图片转存中…(img-12iQMxsc-1712777483644)]
  [外链图片转存中…(img-fcRttTP5-1712777483644)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-HIEyBd0q-1712777483644)]

  文末

  我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

  首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

  更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

  前端面试题汇总

  

  JavaScript

  

  性能

  

  linux

  

  前端资料汇总

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  [外链图片转存中…(img-2fKU6Bkk-1712777483645)]