寒假前端学习Day2(Vue)

列表渲染（v-for）

基础操作就是先创建一个源数据的数组叫items，而item是迭代项的别名是在v-for中。

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="item in items">
  {{ item.message }}
</li>

如果要使用v-for的index就要在v-for中说明

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

v-for和对象

用v-for来遍历一个对象所有的属性值。

<script setup>

import { reactive } from 'vue'

  

const myObject = reactive({

  title: 'How to do lists in Vue',

  author: 'Jane Doe',

  publishedAt: '2016-04-10'

})

</script>

  

<template>

  <ul>

    <li v-for="(value, key, index) in myObject">

      {{ index }}. {{ key }}: {{ value }}

    </li>

  </ul>

</template>

显示

• 0. title: How to do lists in Vue
• 1. author: Jane Doe
• 2. publishedAt: 2016-04-10

如果在v-for中使用范围值， 初值是从1开始而且不是0

一个比较完全的例子

<script setup>

import { ref } from 'vue'

import TodoItem from './TodoItem.vue'

const newTodoText = ref('')

const todos = ref([

  {

    id: 1,

    title: 'Do the dishes'

  },

  {

    id: 2,

    title: 'Take out the trash'

  },

  {

    id: 3,

    title: 'Mow the lawn'

  }

])

  

let nextTodoId = 4

  

function addNewTodo() {

  todos.value.push({

    id: nextTodoId++,

    title: newTodoText.value

  })

  newTodoText.value = ''

}

</script>

  

<template>

  <form v-on:submit.prevent="addNewTodo">

    <label for="new-todo">Add a todo</label>

    <input

      v-model="newTodoText"

      id="new-todo"

      placeholder="E.g. Feed the cat"

    />

    <button>Add</button>

  </form>

  <ul>

    <todo-item

      v-for="(todo, index) in todos"

      :key="todo.id"

      :title="todo.title"

      @remove="todos.splice(index, 1)"

    ></todo-item>

  </ul>

</template>

注意add按钮并没有与form表单中submit进行绑定，因为prevent方法阻止了默认的表单提交行为，就会执行submitForm方法。而且button的默认方法在form里面就是submit

<script setup>

defineProps(['title'])

defineEmits(['remove'])

</script>

  

<template>

  <li>

    {{ title }}

    <button @click="$emit('remove')">Remove</button>

  </li>

</template>

在代码中可以看出添加函数和删除函数的简单框架

<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">
    <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>

计算属性

<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)
    : 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">
    <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>

filter()这个函数的作用是创建里面符合里面函数的数组。而且用与计算属性就是computed()这是一个新的API。

一些小东西的用处

todos.value.filter((t) => t !== todo)

(t) => t !== todo实际上就是 
function(t){ return t !==todo }

而!=号在比较到两者不同的值时候，如果遇到类型不同的时候，会尝试进行转换和!== 号就是如果不相同就不会比较。

对于filter()来说

// 举例说明
let arr = [1, 2, 3, 4, 5];
let arr_new 
let remove = 3;
arr_new = arr.filter((item) => item !== remove);
console.log(arr); // 输出 [1, 2, 3, 4, 5]
console.log(arr_new); // 输出 [1, 2, 4, 5]

let arr2 = [1, 2, 3, 4, 5];
let remove2 = [1, 2, 3];
arr2 = arr2.filter((item) => !remove2.includes(item));
console.log(arr2); // 输出：[4,5]

对于computed()就是用于需要重新定义计算属性。所有如果是true就是第一个，就是所有未完成的项目，如果是第二个就是包含所有的代办选项。