Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用(2)

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

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

点击 动态控制加入样式 和 改变图片：

v-show、v-if、v-bind 综合

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

hello Vue.js!

hello Vue.js!

<input type=“button” value=“点我显示隐藏” @click=“showHide”>

---

这个是不会显示的, 除非前面是true

---

<input type=“button” value=“点我改变title属性” @click=“changeTitle(‘这是改变之后的title’)”>

<input type=“button” value=“点我改变src属性” @click=“changeSrc(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1664551187,1969969469&fm=26&gp=0.jpg’)”>

v-for：遍历对象

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

v-for：用来对 对象 进行遍历的（JavaScript 中数组也是对象的一种）

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

• 遍历时可以获取 索引 index、…

{{ user.name }} {{ user.age }}

{{index}} : {{key}} : {{value}}

• {{index + 1}} : {{a}}

• {{index + 1}}
  

  name: {{user.name}}
  

  age: {{user.age}}
  

  hobby: {{user.hobby}}

  

  v-model：实现双向绑定

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

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

  • 所谓双向绑定，就是表单中数据变化导致 vue 实例 data 数据变化，vue 实例中 data 数据的变化导致表单中数据变化。

  MVVM 架构 双向绑定机制

  Model：数据 Vue实例中绑定数据

  View：页面 页面展示的数据

  VM：ViewModel 监听器

  {{ message }}

  ---

  <input type=“button” value=“改变data中的值” @click=“changeValue”>

  

  

  【项目】记事本案例

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

  <input type=“button” value=“添加到记事本” @click=“save”>
  
  

  【记事本内容】:

• {{ index + 1}} : {{ item }} <a href=“javascript:;” @click=“delRow(index)”>删除

  
  

  总数量: {{ lists.length }} 条

  <input type=“button” v-show=“lists.length != 0” value=“删除所有” @click=“deleteAll”>

  

  事件修饰符

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

  修饰符作用：用来和事件连用，决定事件触发条件或者是阻止事件的触发机制。

  常用的事件修饰符：

  • .stop：用来阻止事件冒泡。

  • .prevent：用来阻止标签的默认行为。

  • .capture

  • .self：只触发自己标签的上特定动作的事件，不监听事件冒泡。

  • .once：让指定事件只触发一次。

  • .passive

  <input type=“button” value=“按钮” @click.stop=“btnClick”>

  <input type=“button” value=“按钮1” @click=“btnClick1”>

  ---

  <a href=“http://hlzy.xyz/” @click.prevent.once=“aClick”>所愿皆所得, 所行化坦途

  按键修饰符

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

  作用：用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符。

  常用按键修饰符：@keyup.xxx="function "

  .enter

  .tab （捕捉通过tab跳转到当前按标签）

  .delete (捕获“删除”和“退格”键)

  .esc

  .space

  .up

  .down

  .left

  .right

  <input type=“text” v-model=“msg” @keyup.enter=“keyups” placeholder=“enter”>
  

  <input type=“text” @keyup.tab=“tabups” placeholder=“tab”>
  

  <input type=“text” @keyup.delete=“deleteups” placeholder=“delete”>
  

  <input type=“text” @keyup.esc=“escups” placeholder=“esc”>
  

  <input type=“text” @keyup.space=“spaceups” placeholder=“space”>
  

  <input type=“text” @keyup.up=“ups” placeholder=“up”>
  

  <input type=“text” @keyup.left=“lefts” placeholder=“left”>
  

  <input type=“text” @keyup.right=“rights” placeholder=“right”>
  

  <input type=“text” @keyup.down=“downs” placeholder=“down”>
  

  Axios 基本使用

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

  中文网站：https://www.kancloud.cn/yunye/axios/234845

  安装：https://unpkg.com/axios/dist/axios.min.js

  GET方式的请求

  ---

  POST方式的请求

  ---

  Axios 并发请求

  ---

  并发请求：将多个请求在同一时刻发送到后端服务接口，最后在集中处理每个请求的响应结果。

  TCP协议

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

  

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

  浏览器篇

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

  个保存的请求

  function save() {

  return axios.post(“http://localhost:8989/user/save”, {

  id: “996”,

  username: “zhenyu”,

  age: 20,

  email: “zhenyu@123.com”,

  phone: “123456789”

  });

  }

  // 3.并发执行

  axios.all([findAll(), save()]).then(

  axios.spread(function (res1, res2) { // 用来将一组函数的响应结果汇总处理

  console.log(res1.data);

  console.log(res2.data);

  })); // 发送一组并发请求

  const app = new Vue({

  el: “#app”,

  data: {},

  methods: {},

  });

  TCP协议

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

  [外链图片转存中…(img-t8DkfDtY-1714333720945)]

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

  浏览器篇

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