vue的基本使用

vue的基本使用

1.vue的基本介绍

一个vue文件基本被分为了3个部分

<!-- js部分 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<!-- HTML部分 -->
<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>
<!-- CSS部分 -->
<style scoped>
button {
  font-weight: bold;
}
</style>

编写文件会分成这个3块进行编写

2.变量的定义和使用

(1)reactive()

我们可以使用 Vue 的 reactive() API 来声明响应式状态。

<script setup>
import { reactive } from 'vue'
// 定义变量
const counter=reactive({
  count:0
})
</script>
<template>
<!-- 取变量的值 -->
  <h1>{{counter.count}}</h1>
</template>

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)

(2)ref()

一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

<script setup>
import { ref } from 'vue'
// 定义变量
const count=ref(0)
//修改变量
count.value=1
</script>

<template>
<!-- 输出变量，输出变量的时候，无需再加.value-->
  <h1>{{count}}</h1>
</template>

2动态绑定

<!-- 通过使用v-bind进行动态绑定 -->
<div v-bind:id="dynamicId"></div>
<div v-bind:class="dynamicId"></div>
<!-- 可以简写为 -->
<div :id="dynamicId"></div>
<div :class="dynamicId"></div>

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

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

<template>
<!-- 绑定titleClass这个动态的变量 -->
  <h1 v-bind:class="titleClass">Make me red</h1>
</template>

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

3.事件监听

<!-- 通过v-on实现监听-->
<button v-on:click="increment">{{ count }}</button>
<!-- 可以简写为@click-->
<button @click="increment">{{ count }}</button>

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

const count = ref(0)
function increment(){
  count.value++
}
</script>

<template>

  <button v-on:click="increment">Count is: {{ count }}</button>
</template>

4.表单绑定

v-model 会将被绑定的值与变量的值自动同步

<input v-model="text">

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

const text = ref('')

</script>

<template>
<!-- 绑定变量text -->
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

5.条件渲染

<!-- 通过v-if和v-else进行条件渲染 -->
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

当awesome为true时就会执行v-if的语句

当awesome为false时会执行v-else的语句

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

const awesome = ref(true)

function toggle() {
  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>

6.列表渲染

可以使用 v-for 指令来渲染一个基于源数组的列表

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
<!-- 在源数组上调用变更方法 -->
todos.value.push(newTodo)

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

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

7.计算属性

computed()可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value

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

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])
const filteredTodos=computed(()=>{
  return hideCompleted.value ? todos.value.filter((t)=>t.done==false) : todos.value
})

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

8.生命周期和模板引用

<script setup>
import { ref,onMounted } from 'vue'
// 双向绑定变量
const pElementRef = ref(null)
// 创建生命周期钩子,因为在script setup执行的时候，p这个标签还没有加载
onMounted(() => {
 pElementRef.value.textContent="你好"
})

</script>

<template>
<!-- 双向绑定变量 -->
  <p ref="pElementRef">Hello</p>
</template>

9.侦听器

watch(监听的变量,调用的函数)

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

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()
// 配置监听器
watch(todoId,fetchData)
</script>
<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

10.组件

<script setup>
 // 导入组件
import ChildComp from './ChildComp.vue'
</script>

<template>
<!-- 使用组件 -->
  <ChildComp />
</template>