后端小白程序员的Vue学习笔记

最新推荐文章于 2024-07-24 23:34:03 发布
最新推荐文章于 2024-07-24 23:34:03 发布
阅读量883 收藏
点赞数 1
分类专栏： 个人学习笔记box 文章标签： mvvm javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43873227/article/details/118058691
版权

文章目录

写在前面

本博文仅作为个人学习过程的记录，可能存在诸多错误，希望各位看官不吝赐教，支持错误所在，帮助小白成长！

Vue

一、什么是 Vue

  • 开发者：尤雨溪(中国)
  • 一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月，与其他大型框架不同的是，Vue 被设计为可以自顶向下逐层应用。
  • Vue 核心库只关注视图层(HTML+CSS)。
  • 便于与第三方库（网络通信：axios，页面跳转：vue-router , 状态管理：vuex）或者既有项目整合。

二、相关技术栈

前端

  • HTML(容易)

  • CSS(难点、重点)

    企业中开发，多用 CSS 预处理器，用编程的方式来自动生成输出 CSS

  • JS(重点)

    JS 框架：

    • jQuery

    • Angular（Java 程序员开发）

      将 MVC 搬到了前端，增加了模块化开发的理念，采用 TypeScript(微软)开发

    • React（Facebook 出品）

      提出了虚拟 Dom（Visual Dom）的概念

      需要学 JSX 语言

    • Vue

      渐进式：不要求完全使用全部功能，可以只在项目中只嵌入一部分。

      综合了 Angular 和 React

      特色：属性计算

      强调模块化

      Component Tree

    • Axios（前端通信框架）

  • UI 框架

    1. ElementUI（饿了么）
    2. AmazeUI
    3. Bootstrap（Twitter）
    4. Ant-Design（阿里巴巴）

后端

  • NodeJS

    由于过于笨重，作者声称已经放弃了 NodeJS，开始开发新的架构Deno

  • NodeJS 及项目管理工具

    1. Express: NodeJS 框架

    2. NPM：项目综合管理工具，类似于 Java 开发中的 Maven

关于前后端分离

模式也好，技术也罢，没有好坏优劣之分，只有合不合适；

前后端分离的开发思想主要是基于SoC（关注度分离原则），让前后端职责更清晰，分工合作更高效。

三、入门使用

3.1、Hello,Vue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Vue</title>
  </head>
  <body>
    <div id="app">{
  {message}}</div>
    <script src="../js/vue.js"></script>
    <script>
      let app = new Vue({
      el: '#app', data: {
      message: 'Hello, Vue!' } })
    </script>
  </body>
</html>

声明式编程范式！显示与数据分离！

响应式：页面显示会随着数据的改变而改变！

3.2、Mustache 语法

Mustache语法：代码中我们使用{ {message}}，进行元素插值。双大括号就是 Mustache 语法的标志！

大括号内支持使用运算符对数据进行处理后显示！

3.3、插值操作

v-once

只会进行一次渲染，后面数据的更新不会触发页面的刷新，但是对象的数据还是会变化！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>V Once</title>
  </head>
  <body>
    <div id="app"><span v-once>{
  {message}}</span></div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
     
        el: '#app',
        data: {
      message: 'this is a readonly message' },
      })
    </script>
  </body>
</html>

代码效果：

image-20210514214940688

v-html

将数据按照 html 代码做解析，然后渲染。

与之相反的是：v-pre，显示原生的文本内容，不做任何解析！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>V Html</title>
  </head>
  <body>
    <div id="app">
      <h1>v-html:</h1>
      <span v-html="message"></span>
      <h1>v-pre</h1>
      <span v-pre>{
  {message}}</span>
      <h1>Mustache</h1>
      <span>{
  {message}}</span>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
     
        el: '#app',
        data: {
      message: '<a href="https://www.baidu.com/">百度一下</a>' },
      })
    </script>
  </body>
</html>

代码效果：

image-20210514214229424

v-text

其作用与 mustache 相似，接收一个字符串变量，然后渲染，还是利用上面那个例子，效果如图

image-20210514214433630

v-cloak

当 Mustache 语法未被正确解析时，用户可能看到类似{ {message}}的文本元素。

使用 v-cloak，可以判断元素是否渲染成功：{

当数据渲染成功前：v-cloak 作为标签属性存在，

数据渲染成功后：v-cloak 从标签属性清除

}

因此我们可以借助这个特殊属性，使用 css 来装饰对应标签选择不让用户看到原生内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>V-Cloak</title>

    <style>
      [v-cloak] {
     
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h1>Message:</h1>
      <span v-cloak>{
  {message}}</span>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      // 设置延时，2s后创建Vue
      setTimeout(function () {
     
        const app = new Vue({
     
          el: '#app',
          data: {
     
            message: 'Hello World!',
          },
        })
      }, 2000)
    </script>
  </body>
</html>

3.4、属性绑定 v-bind

像控制元素内容一样，动态控制属性值，使用v-bind:xxx="??"将标签内的 xxx 属性绑定到 data 中的??数据上！

<div id="app">
  <a v-for="movie in movies" v-bind:href="movie.src">{
  {movie.name}}<br /></a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      movies: [
        {
      name: '钢铁侠', src: 'xxxx' },
        {
      name: '美国队长', src: 'xxxx' },
        {
      name: '雷神', src: 'xxxx' },
      ],
    },
  })
</script>

可以看到我们的 a 标签的 href 是与 movie 的 src 值绑定的！

v-bind 使用的频率极高，于是官方为其提供了简写版：:xxx=??。就可以完成 xxx 属性与 data 中??的值的绑定！

同时官方文档提到了在 2.6 版本后，还提供了动态参数（v-bind、v-on 是支持接收参数的！其绑定的内容就是参数）

也就是说以后绑定的属性或者行为也不用“写死”了，可以通过 data 中的参数进行指定：

<div id="app">
  <a v-bind:[link.attr]="link.attrValue" v-text="link.linkName"></a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      link: {
     
        linkName: '百度一下',
        attr: 'href',
        attrValue: 'https://www.baidu.com',
      },
    },
  })
</script>

可以看到，我们直接通过数据就为 a 标签动态绑定了 href 属性！

再来看看 v-bind 的高阶使用：结合对象动态修改 class:

<style>
  .red {
    color: red;
  }
  .yello {
    color: yellow;
  }</style
><!--version 1.0-->
<body>
  <div id="app">
    <h1 :class="{
    'red': true, 'yello': false}">Hello, World</h1>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app' })
  </script>
</body>

通过一个:class = {classname: boolean, classname2: boolean},会将 boolean 为 true 的 class 加入 class 列表。这种写法我们称其为对象语法！

<!--version 2.0-->
<div id="app">
  <h1 :class="{
    'red': isRed, 'yello': isYello}">Hello, World</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app', data: {
      isRed: true, isYello: false } })
</script>

这里进行简单优化后，class 的列表的增删与否通过具体的数据isRed、isYello进行控制

<!--version 3.0-->
<div id="app"><h1 :class="getClasses()">Hello, World</h1></div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      isRed: true,
      isYello: false,
    },
    methods: {
     
      getClasses: function () {
     
        this.isRed = false
        this.isYello = true
        return {
      red: this.isRed, yello: this.isYello }
      },
    },
  })
</script>

继续优化后，我们的 class 属性值通过一个方法返回一个 object，然后判断是否加入 class。我们还可以通过 v-on 来通过界面交互改变 isRed、isYello 的数据值，以达到改变界面显示的效果！

这种使用会经常应用在实际开发中，请务必熟悉掌握！

v-bind 动态绑定 style

其使用方式和上面的绑定 class 大同小异，我们通过一个 kv 集合对象来动态为标签添加样式！这种操作在组件化开发中很常见！

<div id="app">
  <span :style="{fontSize: '50px', backgroundColor: 'blue'}">{
  {message}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app', data: {
      message: 'Hello World!' } })
</script>

这样写就感觉很鸡肋，然而其真正的用法应该是利用数据控制样式表的变化，或者使用 method 获取样式表。

<div id="app">
  <span :style="{fontSize: spanFontSize + 'px'}">{
  {message}}</span>
  <span :style="getBgColor()">{
  {message}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
      message: 'Hello World!', spanFontSize: 20, spanBgColor: 'blue' },
    methods: {
     
      getBgColor: function () {
     
        return {
      backgroundColor: this.spanBgColor }
      },
    },
  })
</script>

有几个注意点：

  1. 传统样式表中带-的样式属性（例如font-size等）在进行属性绑定时，属性名作为 key，要使用小驼峰命名法(lower-Camel-Case)。例如fontSize、backgroundColor
  2. k-v 在表示时一定要分清是变量还是字符串！key 作为属性名可以不使用字符串表示，但是 value 如果不加以区分，会导致 vue 解析失败。（例如：:style={fontSize: 50px}，很明显我们希望 50px 作为属性值被解析，但是 vue 会认为 50px 就是一个变量名，所以需要改写成：:style={fontSize: '50px'}）

3.5、条件插值

3.5.1、v-if、v-else、v-else-if

<body>
  <!--根据绑定ViewModel中的数据判断显示哪个标签-->
  <div id="p1">
    <h1 v-if="message==='A'">A</h1>
    <h1 v-else-if="message==='B'">B</h1>
    <h1 v-else>C</h1>
  </div>
  <script src="../vue-js/vue.js"></script>
  <script>
    // vm 绑定 id=p1的Dom元素        
    var vm = new Vue({            
      el: "#p1",            
      data: {                
        message: "A"            
      }       
    });
  </script>
</body>

3.5.2、v-show

v-show 使用效果与 v-if 相同，但是 v-show 是使用 css 的 display 属性来控制元素的显示：(v-show 在 template 中不能使用！)

<div id="app">
  <!-- v-if则是直接通过增删标签来达到显示、隐藏 -->
  <h1 v-if="display">{
  {message}}</h1>
  <!-- v-show会保证标签始终在DOM中，使用css的display属性来控制它的显示与否。不可用于template-->
  <h1 v-show="display">{
  {message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
      message: 'hello world', display: false },
  })
</script>

image-20210515170246161

3.5.3、使用 key 来管理复用元素

Vue 在进行页面渲染时，为了保证效率会最大程度上复用页面元素。

我们修改了数据值导致页面重新渲染时，首先会在内存中创建虚拟 DOM，虚拟 DOM 使用diff算法会将旧页面和新页面都有的元素进行复用，然后将渲染完成的虚拟 DOM 渲染回浏览器上。

我们用一个案例来演示一下：

<div id="app">
  <form v-if='loginType === "username"'>
    <label>Username</label>
    <input type="text" placeholder="Please input your username" />
  </form>
  <form v-else>
    <label>Email</label>
    <input type="text" placeholder="Please input your email" />
  </form>
  <button @click="toggleLoginType">Toggle Login Type</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
      loginType: 'username' },
    methods: {
     
      toggleLoginType() {
     
        if (this.loginType === 'username') {
     
          this.loginType = 'email'
        } else {
     
          this.loginType = 'username'
        }
      },
    },
  })
</script>

image-20210515172836327

即使我们使用按钮进行登录类型的切换，我们输入框中的内容依旧没有消失。这就很好地说明了我们的输入框（即 input 元素）被复用了，那么 label 元素也就必然被复用了。

可是如果我们想要切换了登录类型后，就清除原来输入的内容，简单说就是不复用这个 input 元素。我们就需要为这个元素加上特定的标识，在 Vue 中 元素的 key 属性是用于区分元素的关键。所以我们只需要给 input 元素绑定一个独一无二的 key 属性，告诉 Vue“它们是两个独立的东西，请不要复用！”

<form v-if='loginType === "username"'>
  <label>Username</label>
  <input
    type="text"
    placeholder="Please input your username"
    :key="'usernameInput'"
  />
</form>
<form v-else>
  <label>Email</label>
  <input
    type="text"
    placeholder="Please input your email"
    :key="'email-input'"
  />
</form>
<button @click="toggleLoginType">Toggle Login Type</button>

修改后，去试试效果！

image-20210515173825310

3.6、列表渲染 v-for

3.6.1、遍历数组

遍历时，第二个可选参数 index 表示元素在数组中的下标！

<body>
  <div id="p1">
    <ul v-for="(letter, index) in letters" :key="index">
      <li>{
  {letter.element}}-->{
  {index}}</li>
    </ul>
  </div>
  <script src="../vue-js/vue.js"></script>
  <script>
    // vm 绑定 id=p1的Dom元素
    var vm = new Vue({
      el: '#p1',
      data: {
        letters: [{ element: 'A' }, { element: 'B' }, { element: 'C' }],
      },
    })
  </script>
</body>

image-20200407093233433

v-for 也会监听列表的变化，如果列表发生了变化会触发页面的更新！

v-for 还支持for-of,更接近原生 JavaScript 的遍历。

3.6.2、遍历对象

除了遍历数组，还支持使用 v-for 遍历数组，遍历时有三个参数：{value, name, index}，依次为属性值、属性名、属性下标！后两个参数为可选参数！

遍历的顺序与对象属性声明的顺序相同！

<div v-for="(value, name, index) in object">
  {
  { index }}. {
  { name }}: {
  { value }}
</div>
<script src="../js/vue.js"></script>
<script>
  new Vue({
     
    el: '#v-for-object',
    data: {
     
      object: {
     
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10',
      },
    },
  })
</script>

image-20210515183149969

3.6.3、v-for 添加 key

这是 Vue 推荐我们在使用 v-for 的时候所做的操作。

当我们不为遍历元素绑定 key 的时候（默认），当列表插入值后，导致列表的数据顺序变化后，不会移动 DOM 元素来匹配列表的数据项。即列表的数据与 DOM 中的元素是没有绑定的！它会从发生了变化的位置挨个更新元素的值。

但是当我们使用:key为元素绑定一个 key 以后，并且确保 key 与数据是可以做到一一对应的（index 无效），列表数据就可以与元素进行绑定。可以便于 Vue 追踪这个元素。当列表变化后，Vue 就可以通过元素进行复用和元素重排序来完成更高效的渲染工作。

注意一下，key 尽量不要使用 index，因为 index 无法保证数据变化时与数据保持对应关系！

3.6.4、数组更新检测

并不是所有的数组更新都会触发页面重渲染（例如直接通过下标修改数组）。（响应式更新）

支持更新检测的数组方法有：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

以上的方法属于数组变更方法，即是在原数组的数据上进行变动。当然也有非变更方法：

例如：filter()、concat() 和 slice()。这些方法调用后会返回一个新的数组，当我们将新数组赋值给原数据时，**页面会在保证元素重用最大化下进行重新渲染！**即相同的 DOM 元素会被保留重用！而不是丢弃原有所有 DOM 元素，将新的数组进行渲染到整个列表。

3.7、绑定事件 v-on

<body>
  <div id="p1">
    <!--绑定按钮点击事件-->
    <button v-on:click="showMsg">Click Me</button>
  </div>
  <script src="../vue-js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
     
      el: '#p1',
      data: {
      message: 'hello Vue' },
      methods: {
     
        showMsg: function () {
     
          alert(this.message)
        },
      },
    })
  </script>
</body>

v-on: click=“xxx” 可缩写为 @click="xxx"

我们的事件监听回调函数是可以接收参数的！

如果我们的回调函数是有参数要求的，当你的绑定事件时，省略了函数调用的小括号，那么将默认将触发的事件作为第一个参数传入：

<div id="app">
  <!--这里省略了小括号，当鼠标点击时，会将事件作为首个参数传入-->
  <button @click="showMessage">点我</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    methods: {
     
      showMessage(message) {
     
        console.log(message)
      },
    },
  })
</script>

于是控制台的输出效果就是：

image-20210515160155554

3.7.1、修饰符

一个事件我们也可以分为很多状态，修饰符就用于指出一个指令以特殊的方式进行绑定。通过在事件后加上.xxx来为事件加上修饰符。

@click.stop：停止事件冒泡

<div id="app" @click="clickDiv">
  text-content <button @click="clickBtn">点我</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    methods:
最低0.47元/天 解锁文章
5akura
关注
专栏目录
后端小白程序员的axios学习笔记
5akura's Blog
06-19 1122
文章目录axios写在前面一、入门了解1.1、什么是axios？1.2、为什么学习axios?1.3、前置内容与环境准备1.3.1、json-server安装使用1.3.2、axios安装1.4、入门案例二、axios API2.1、请求方法2.2、并发请求2.3、创建axios实例三、请求配置四、响应结构说明五、默认配置5.1、配置全局默认配置5.2、实例的默认配置5.3、配置的优先级六、拦截器七、错误处理八、取消请求8.1、请求取消原理九、vue-axios axios 写在前面 本博文仅作为个人学习
VUE3（二十）VUE自定义指令v-preventReClick，防止多次点击，重复请求
camellia的博客
03-29 2337
VUE不仅为我们提供了自定义组件，还提供了自定义指令。当然，这个玩意我在VUE2中是没有用到过的。 VUE3中我大概试一下这个自定义指令： 官方文档： https://vue3js.cn/docs/zh/guide/custom-directive.html#动态指令参数 一：注册全局指令 在main.ts中加入如下配置： // ======================================================= // 注册一个全局自定义指令 `v-focus` app.direc
黑马VUE学习笔记（附带项目天气预报和音乐播放器所有源码）
m0_67403076的博客
03-10 1874
文章目录 黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码） 感谢黑马！ 01第一个vue程序 02el挂载点 el是用来设置Vue实例挂载（管理）的元素 1.vue的作用范围 在el命中的元素内部可以被渲染 Vue会管理el选项命中的元素及其内部的后代元素 2.是否可以选用其他的选择器 3.是否可以设置其他的dom元素 03data 数据对象 1.Vue中用到的数据定义在data中 2.data中可以写复杂类型的数据 3.渲染复杂类型数据时，遵循js的语法即
学习笔记：Vue2中级篇
D_boj的博客
04-22 978
通过B站黑马程序员学习，了解Vue2基本概述，以及基本使用。本章节主要了解Vue中的脚手架以及Ajax请求
超级详细的vue2学习笔记
分享学习编程中的遇到的问题,总结平时的笔记
04-29 3988
vue的视频学习笔记详细版
黑马程序员笔记：小白必看——Java学习路线
最新发布
Future_yzx的博客
07-24 513
Java面试宝典（含阿里、腾迅大厂java面试真题，java数据结构，java并发，jvm等java面试真题）以100+企业大厂真实高频Java面试真题为主干，辅以数据结构的可视化展示、算法的可视化展示，窥探底层的工具使用等等可视化手段，用直观、形象的方式展现复杂的知识内容，让学生更清晰、更容易地掌握这些Java面试题与Java知识点。同时在多通道的加持下，通过智能动态的通道评级、选举、降级、热插拔，增强了系统的健壮性，摆脱对单一通道的依赖，并且提供多种对接方式，满足企业内部的各种需求。
学习B站程序员青戈《从0开始带你手撸一套SpringBoot+Vue后台管理系统，让小白能跟着学会的项目实战》第18个视频的笔记（整合Echarts）（未完结篇）
m0_64266348的博客
05-30 272
以上就是我在看青戈第18个视频所做的一些笔记，希望对各位友友有点帮助！我们下期再见！！！
学习B站程序员青戈《从0开始带你手撸一套SpringBoot+Vue后台管理系统，让小白能跟着学会的项目实战》第10个视频的笔记（纯干货!!!）
m0_64266348的博客
04-19 479
解决方法：在@RequestParam后加上(defaultValue = "")如下图所示，图中表示@RequestParam(defaultValue = "")表示如果请求中没有提供对应参数的值，那么就会将参数的默认值设为一个空字符串（""）。，视频中主要讲了用axios进行前后端交互，vue的增加，批量删除，编辑，模糊查询等功能，此视频可谓是教的非常清晰了，对于完全小白的我不要太友好，哈哈哈哈哈。分析原因：批量删除的url地址不一致，后端批量删除接口多了“/”在需要使用的vue页面写引入示例，
学习B站程序员青戈《从0开始带你手撸一套SpringBoot+Vue后台管理系统，让小白能跟着学会的项目实战》第19个视频的笔记（整合Echarts）（完结篇）
m0_64266348的博客
06-01 359
各位友友们好呀，在上期文章中我分享了up主青戈关于整合echarts视频的笔记，现在让我继续给你分享第19个视频的学习笔记，这期笔记是在原先的echarts图表上进一步美化的，如果你感兴趣的话，可以进来看看哦！学了上面的两节视频后，我想将自己的系统的首页也有图表的显示，我的想法是在user表再增加一个creattime字段，图表的内容是显示全年注册此系统的用户有多少人。处理单条数据的渲染之外，视频中还讲了多条数据的渲染，我也学习到了一点知识。②学习多条数据的图表、以及图表的概览。
带大四小白一起做前后端分离的毕设管理系统，技术栈SpringBoot + Vue + ElementUI.zip
08-05
Vue.js是一款轻量级的渐进式JavaScript框架，易于学习且能高效构建用户界面。其核心特性包括： 1. **声明式渲染**: 数据驱动视图，无需手动操作DOM。 2. **虚拟DOM**: 提高性能，减少DOM操作的开销。 3. **组件化**:...
【Vue2.0】黑马课程笔记（四）Vue-router
小女不才
04-07 1481
Vue-router（九）路由的基本概念与原理(1) Vue-router的基本使用1.1 Vue-router简介1.2 Vue Router的使用步骤(★★★)1.3 路由重定向(2) Vue-router的嵌套路由2.1 嵌套路由功能分析(3) Vue-router动态路由匹配3.1 动态匹配路由的基本用法3.2 路由组件传递参数(4) Vue-router命名路由4.1 命名路由的配置规则......
Redis完整笔记——上到主从复制配置分析，下到基本数据类型
5akura's Blog
05-13 4888
文章目录Redis一、Nosql为什么使用Nosql什么是NosqlNosql特点NoSQL的四大分类KV键值对文档型数据库（bson格式）列存储数据库图关系数据库二、Redis入门Redis是什么？Redis能干什么？环境搭建window搭建Linux搭建性能测试工具—redis-benchmark基础知识三、五大数据类型Redis-keyString(字符串)List(列表)Set(集合)HashZset(有序集合)四、三种特殊数据类型Geospatial(地理位置)Hyperloglog(基数统计)B
B站 MySQL学习随手记 全是满满的干货！
5akura's Blog
02-25 3960
业务级别的MySQL学习与使用 1、数据库分类 1. 关系型数据库（SQL） MySQL，Oracle，SQL Server，DB2，SQLlite 通过表和表之间的，行与列之间的关系进行数据的存储。（例如：学生信息表） 2. 非关系型数据库（NoSQL）Not Only SQL Redis，MongDB 对象存储，通过对象的自身的属性来决定 2、MySQL安装与配置 下载压缩文件...
小白的大数据入门路——Hive学习笔记
5akura's Blog
08-04 3339
文章目录一、Hive基本概念1.1、什么是Hive1.2、Hive的优缺点1.3、Hive架构原理1.4、Hive对比数据库二、Hive安装2.1、安装包准备2.2、相关配置和启动2.3、本地文件导入Hive2.3.1、Linux本地文件导入2.3.2、HDFS文件导入2.4、安装MySQL2.5、Hive的JDBC访问（了解）2.6、Hive常用交互命令2.7、Hive常见属性配置2.7.1、常用配置参数2.7.2、修改配置的方式三、Hive数据类型3.1、基本数据类型3.2、集合数据类型3.3、数据类型
菜鸟的Kafka完整入门学习笔记，修订一
5akura's Blog
09-01 3131
文章目录一、Kafka概述1.1、定义1.2、消息队列（MQ）1.2.1、传统应用场景——异步处理1.2.2、使用消息队列的优点1.2.3、消息队列的两种模式1.3、Kafka架构二、快速入门2.1、安装配置与部署2.2、Kafka命令行操作三、Kafka高级—架构深入3.1、Kafka运作流程及消息文件存储3.2、生产者3.2.1、数据分区存放策略3.2.2、数据可靠性保证3.2.3、ACK应答机制3.2.4、面向消费者保持消息一致3.2.5、消息交付语义以及幂等性3.3、消费者3.3.1、两种消费方式3
大数据学习——Flume入门
5akura's Blog
08-06 2302
文章目录一、Flume概述1.1、Flume定义1.2、Flume基础架构二、Flume快速入门2.1、安装Flume部署2.2、入门案例2.2.1、监控端口数据（官方案例）Describe the sinkUse a channel which buffers events in memoryBind the source and sink to the channel2.2.2、实时监控单个追加文件2.2.3、监控文件 升级版2.2.4、监控文件夹变化2.2.5、断点续传——实时监控目录文件追加修改三、
Spark学习笔记——龟速更新。。
5akura's Blog
01-13 2275
文章目录Spark学习笔记第一章、基本认识与快速上手1.1、认识Spark1.2、对比Hadoop1.3、Spark组成基本介绍1.4、快速上手之WorldCount实现1.4.1、方式一（Scala类似集合操作实现）1.4.2、方式二(MR思维实现)1.4.3、方式三(Spark实现)第二章、环境搭建2.1、Local模式2.1.1、SparkShell命令行执行2.1.2、spark-sublime提交任务2.1.3、提交任务的参数说明2.2、Standalone模式2.2.1、配置改动与启动2.2.2
黑马程序员vue学习笔记
09-06
抱歉，我是一个与ChatGPT类似的AI助手，无法提供具体的学习笔记。不过，我可以给你一些建议来学习Vue.js。 1. 官方文档：Vue.js官方文档是最权威的学习资源。你可以从基础概念到高级用法，逐步深入地学习Vue.js。 2. 在线教程：有许多在线教程可以帮助你快速入门Vue.js，如w3schools、Vue Mastery等。这些教程通常提供实例和练习，可以加深你对Vue.js的理解。 3. 实践项目：通过实践项目来巩固知识是非常重要的。尝试构建一些小型的Vue.js项目，如待办事项列表、博客应用等，以便更好地理解Vue.js的各种概念和特性。 4. 社区参与：加入Vue.js社区，与其他开发者交流经验和问题。你可以在社区中提问、阅读他人的问题和解答，这有助于你拓宽视野并深入理解Vue.js。 5. 扩展学习：除了Vue.js本身，你还可以学习相关的技术栈，如Vue Router、Vuex、Element UI等，以提升你的Vue.js开发能力。 记住，学习任何新技术都需要时间和实践。持续学习和实践是掌握Vue.js的关键。祝你学习愉快！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值