Vue 学习-基础-EW帮帮网

1 声明式渲染

能在改变时触发更新的状态被称作是响应式的。我们可以使用 Vue 的 reactive() API 来声明响应式状态。reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。
例：

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

const t = ref("")
t.value = hello
</script>

<template>
  <h1>{{t}}</h1>
</template>

2 Attribute 绑定

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

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

但是v-bind可以省略：

<div :id="dynamicId"></div>

例，将一个class动态绑定到一个h1:

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

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

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

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

3 事件监听

可以通过v-on监听事件：

<button v-on:click="increment">{{ count }}</button>
<!-- v-on也可以简略-->
<button @click="increment">{{ count }}</button>

例，监听按钮的点击事件：

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

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

<template>
 <!-- 可以声明为函数-->
  <button @click="add">Count is: {{ count }}</button>
 <!-- 也可以直接声明可执行表达式-->
  <button @click="count++">Count is: {{ count }}</button>
</template>

4 表单绑定

在处理页面和变量双向绑定有两种方式：
方式一，使用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('')
</script>

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

5 条件渲染

我们可以使用 v-if 指令来有条件地渲染元素,当v-if的值为true时，元素才会被渲染。
例：

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

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">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>

这里的 todo 是一个局部变量，表示当前正在迭代的数组元素。它只能在 v-for 所绑定的元素上或是其内部访问，就像函数的作用域一样。
注意，我们还给每个 todo 对象设置了唯一的 id，并且将它作为特殊的 key attribute 绑定到每个

。key 使得 Vue 能够精确的移动每个
，以匹配对应的对象在数组中的位置。
例，实现列表元素的增删：

<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})
}

function removeTodo(todo) {
  todos.value = todos.value.filter(s=>s.id !== todo.id)
}
</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 计算属性

API 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 }
])

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)
}

const completedTodos = computed(()=>{
  if(hideCompleted.value){
    return todos.value.filter((t) => !t.done)
  }else{
    return todos.value
  }
})
  
</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 completedTodos" :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 生命周期和模板引用

需要手动操作 DOM时，可以通过ref attribute来实现。
可以通过onMounted()等生命周期钩子函数来在指定生命周期执行目标代码。
例，在onMounted()修改<p>的值：

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

const pElementRef = ref(null)
onMounted(()=>{
  pElementRef.value.textContent = "hhhh"
})
</script>

<template>
  <p ref="pElementRef">Hello</p>
</template>

9 监听器

watch() 可以直接侦听一个 ref，并且只要这个ref的值改变就会触发回调。
例，当点击按钮式显示新的todo内容：

<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,(newTodoId)=>{
  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 组件

一个vue的应用会使用到多个组件，可以通过 import 的方式引用其他组件。
例，在App.vue中使用ChildComp.vue组件:

ChildComp.vue：

<template>
  <h2>A Child Component!</h2>
</template>

App.vue:

<script setup>
import Child from "./ChildComp.vue"
</script>

<template>
 <Child/>
</template>

11 Props

在子组件中，可能会用到父组件中的变量。在父组件中可以像声明一个attribute一样，向子组件动态传值。子组件需要使用defineProps，生命需要使用父组件的变量。
ChildComp.vue：

<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

App.vue:

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg = "greeting"/>
</template>

12 Emits

除了属性，子组件也会使用到父组件中的事件。子组件需要使用defineEmits声明需要用到的事件，使用emit()调用事件。emit() 的第一个参数是事件的名称，其他所有参数都将传递给事件监听器。父组件可以使用 v-on 监听子组件触发的事件.
ChildComp.vue：

<script setup>
const emit = defineEmits(['response'])

emit('response', 'hello from child')
</script>

<template>
  <h2>Child component</h2>
</template>

App.vue:
一、在v-on中声明函数名

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')

function fuc(msg){
  childMsg.value = msg
}
</script>

<template>
  <ChildComp @response="fuc"/>
  <p>{{ childMsg }}</p>
</template>

二、直接在v-on中声明函数过程

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')
</script>

<template>
  <ChildComp @response="(msg)=>{childMsg = msg}"/>
  <p>{{ childMsg }}</p>
</template>

13 插槽

父组件还可以通过插槽 (slots) 将模板片段传递给子组件。子组件只需要使用<slot>即可获取到父组件传输子组件的代码片段。
例：
ChildComp.vue：

<template>
<!--如果父组件没有传递任何内容，则会显示默认内容：Fallback content-->
  <slot>Fallback content</slot>
</template>

App.vue:

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>{{msg}}</ChildComp>
</template>

Vue 学习-基础

1 声明式渲染

2 Attribute 绑定

3 事件监听

4 表单绑定

5 条件渲染

6 列表渲染

7 计算属性

8 生命周期和模板引用

9 监听器

10 组件

11 Props

12 Emits

13 插槽

网站公告

今日签到

热门文章

最新发布