Vue学习笔记

天生不爱笑

已于 2024-09-12 10:56:22 修改

阅读量808

点赞数 21

文章标签： vue.js 学习笔记

于 2024-09-06 23:21:51 首次发布

本文链接：https://blog.csdn.net/weixin_51621120/article/details/141973866

版权

一、文档学习记录

学习内容：

Vue官方文档：https://cn.vuejs.org/guide/introductionhttps://cn.vuejs.org/guide/introduction

1、什么是Vue？

Vue 是一款用于构建用户界面的 JavaScript 框架。基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，高效地开发用户界面。

2、Vue的两个核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

3、渐进式框架

Vue是一个框架，也是生态。功能覆盖大部分前端开发常见的需求。Vue的设计非常注重灵活性和“可以被逐步集成”这个特点。根据需求，可以以不同的方式使用Vue：

无需构建步骤，渐进式增强静态的HTML

在任何页面中作为Web Components嵌入（组件嵌入）

单页应用（SPA）

全栈/服务端渲染（SSR）

Jamstack/静态站点生成（SSG）

开发桌面端、移动端、WebGL，甚至是命令行终端中的界面。

4、单文件组件

5、API风格

Vue的组件可以分为两种不同的风格书写：选项式API 和 组合式API

选项式API（Options API）：

使用选项式API，可以用包含多个选项的对象来描述组件的逻辑，选项所定义的属性都会暴露在函数内部的this上，指向当前组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>


/*

我的代码理解（个人浅薄理解，仅供参考）：

<script></script>标签中写的是js，定义元素，
在methods:{}中写函数，可以与事件处理器绑定，
<template></template>中写具体页面，给<button></button>按钮绑定点击事件。

*/

组合式API（Composition API）：

组合式API，使用导入的API函数描述组件逻辑，在单文件组件中，组合式API通常与

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>


/*

个人理解（浅薄认知，欢迎指正）：

<script setup>标签中可以使用导入（import）
const count = ref(0)声明变量，赋初值。
编写函数： function 函数名(){}
onMounted(() => {})生命周期钩子
为button按钮绑定点击事件

*/

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用

选项式API以”组件实例“的概念为中心（如上述中的this）将响应性相关的细节抽象出来，强制按照选项来组织代码。

组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种方式更自由，这种方式的灵活性使得组织和重用逻辑的模式更加强大。

6、声明式渲染

Vue单文件组件（Single-File Component，缩写SFC）。SFC是一种可复用的代码组织形式，可以将从属于同一个组件的HTML、CSS和JavaScript封装在使用.vue后缀的文件中。

Vue的核心功能是声明式渲染：通过扩展于标准HTML的模板语法，可以根据JavaScript的状态来描述HTML应该是什么样的。当状态改变时，HTML就会自动更新。

响应式：在改变时触发更新的状态。在Vue中，响应式状态被保存在组件中。

选项式API风格

<script>
export default {
  // 组件选项
  // 此处声明一些响应式状态
  data(){
    return {
      message:"学习前端，准备考公（o.O）！！！"
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
</template>



/*

使用data组件选项声明响应式状态，该选项是一个返回对象的函数
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

message属性可以在模板中使用，使用双花括号法，根据message的值来渲染动态文本
<h1>{{ message }}</h1>

花括号中的内容并不只限于标识符或路径——可以使用任何有效的JavaScript表达式
<h1>{{ message.split('').reverse().join('') }}</h1>

*/

具体效果如下：

组合式API风格

在改变时触发更新的状态被称为是响应式的。使用Vue的 reactive() API来声明响应式状态。

由 reactive() 创建的对象都是JavaScript Proxy，其行为与普通对象是一致的。

import { reactive } from 'vue'

const counter = reactive({
    count: 0
})

console.log(counter.count)        // 0 
counter.counter++

reactive() 只适用于对象（包含数组和内置类型，如Map和Set），另一个API ref() 可以接受任何值类型。ref会返回一个包裹对象，在 .value 属性下暴露内部值。

在组件<script setup>块中声明的响应式状态，可以在模板中使用。

<script setup>
import { ref } from 'vue'
import { reactive } from 'vue'
  
const message = ref('学习新思想，争当新青年！！！')
const counter = ({
  count: 0
})
</script>

<template>
  <h1>{{ message }}</h1>
  <button>当前按钮数量：{{ counter.count }}</button>
</template>

效果如下：

7、Attribute绑定

在Vue中，mustache语法（即双大括号）只能用于文本插值，为了给attribute绑定一个动态值，需要使用v-bind指令

// 全写v-bind
<div v-bind:id="dynamicId"></div>

// 简写v-bind
<div :id="dynamicId"></div>

// 选项式API风格，写attribute
<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 :class='titleClass'>Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>

<style>
.title {
  color: red;
}
</style>

// 组合式API风格写 Attribute

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

效果如下：

8、事件监听

使用 v-on 指令监听DOM事件

// v-on监听按钮点击事件
<button v-on:click="increment">{{ count }}</button>

// v-on 有一个简写语法
<button @click="increment">{{ count }}</button>

选项式API

increment 引用一个使用methods选项声明的函数

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
   methods: {
    increment(){
      this.count++
    }
  }
}
</script>

<template>
  <!-- 使此按钮生效 -->
  <button v-on:click="increment">Count is: {{ count }}</button>
</template>

组合式API

<script setup>
import { ref } from 'vue'

const count = ref(665)

// 更新组件状态函数
function increment(){
  count.value++
}
</script>

<template>
  <!-- 使此按钮生效 -->
  <button @click="increment">Count is: {{ count }}</button>
</template>

/*

定义count是一个初值为665的数、组件更新函数increment
给按钮绑定监听事件，点击按钮，更新组件状态

*/

效果如下：

9、表单绑定

可以同时使用v-bind、v-on 在表单的输入元素上创建双向绑定：

// 使用v-bind 、 v-on实现表单的输入元素的双向绑定
<input :value="text" @input="onInput">

// 使用 v-model 指令简化双向绑定，实际上v-model是上述操作的语法糖
<input v-model="text">

选项式API风格

// v-bind、v-on实现双向绑定
<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>


// v-model 改写
<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

组合式API风格

// v-bind 、 v-on双向绑定
<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

// v-model 绑定
<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

10、条件渲染

使用v-if指令进行有条件的渲染元素：

<h1 v-if="awesome">Vue is awesome!</h1>

此时，<h1>标签只会在awesome为真值时进行渲染，若awesome更改为假值，它将从DOM中移除。

可以使用v-else、v-else-if表示其他的条件分支

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

//选项式API风格
<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome
    }
  }
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>



// 组合式API风格
<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  // 点击按钮触发Toggle函数，更改awesome的值
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

效果如下：