vue官方文档笔记

1.响应式

<script setup>
import { ref,reactive } from 'vue'
//ref任何类型，value暴露内部值
//template中不需要value
let counter=reactive({count:0})
let message=ref('hello')
</script>

<template>
  <h1>{{counter.count}}</h1>
  <h1>{{message}}</h1>
</template>

2.v-bind:class简写成:class

<script setup>
import { ref } from 'vue'
  
const titleClass = ref('title')
</script>

<template>
  <!-- 将元素的class和组件的titleClass属性保持一致 -->
  <h1 :class='titleClass'>Make me red</h1> 
</template>

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

3.事件监听，v-on:缩写成@

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

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

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

点击+1

4.表单绑定

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

const text = ref('')
</script>

<template>
  <input v-model='text'>
  <p>{{ text }}</p>
</template>

5.条件渲染

<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列表渲染

<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(x=>x!==todo)
}
</script>

<template>
  <!-- 修饰符，prevent阻止默认程序的运行 -->
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul> 
    <li v-for="todo in todos" :key="todo.id">
		<!-- todo是局部变量 -->
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

7.computed计算

<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)
}
  
//computed动态根据其他响应式数据，计算value 
let filt=computed(()=>{
  return hideCompleted.value
  ? todos.value.filter(x=>!x.done)
  : todos.value
})
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
	<!-- 渲染filt列表 -->
    <li v-for="todo in filt" :key="todo.id">
	  <!-- 复选框，每一个todo对象添加done属性 -->
      <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.组件

App.vue

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

ChildComp.vue

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