Vue入门（一）

基于Vue官网教程（1-9）的自学笔记，记录自己对概念的粗浅理解。

欢迎交流，如有不对请留言指正~

目录

1、单文件组件

2、选项式API

3、声明式渲染：

4、v-model

5、v-for 渲染列表/数组

6、compute计算属性

计算属性便利在哪？

7、模板引用

---

1、单文件组件

Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

例子：

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

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

<style scoped>
button {
  font-weight: bold;
}
</style>

2、选项式API

选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

3、声明式渲染：

我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      message: 'Hello World!',
      counter: {
        count: 0
      }
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</div>

特指的是mount绑定了id为app的标签后，该标签内可以通过

双层花括号括住键值的方式获取data中定义的数据的值

2、目前的花括号只能对文本插值进行动态变换，现在还可以对标签中的属性进行动态绑定

比如对标签<div>中的属性id\属性class进行动态绑定：

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      titleClass: 'title'
    }
  }
}).mount('#app')
</script>

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

这里就是对h1的class进行动态绑定，class真正的值是data组件中键"titleClass"对应的值——title

3、对DOM事件的绑定

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}).mount('#app')
</script>

<div id="app">
  <!-- 使此按钮生效 -->
  <button @click="add">count is: {{ count }}</button>
</div>

对标签<button>动态绑定函数，用 @DOM=“function”

function放在createApp的methods中

4、v-model

示例：

<script>
export default {
  data() {
    return {
      picked: 'One'
    }
  }
}
</script>

<template>
	<div>Picked: {{ picked }}</div>

	<input type="radio" id="one" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="radio" id="two" value="Two" v-model="picked" />
	<label for="two">Two</label>
</template>

更改 type和v-model所指的对象picked的形式后，又可以构造：

<script>
export default {
  data() {
    return {
      picked: []
    }
  }
}
</script>

<template>
	<div>Picked: {{ picked }}</div>

	<input type="checkbox" id="one" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="checkbox" id="two" value="Two" v-model="picked" />
	<label for="two">Two</label>
</template>

5、v-for 渲染列表/数组

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}
<li v-for="(item,index) in items">
    {{parentMessage}}-{{index}}-{{item.message}}
</li>

1）注意要点 v-for="" 是一个字符串 字符串可以是"item in items"或者是"(item,index) in items“

2）可以用of替代上述in

3）先value后键值再索引【和python不太一样】

4）v-for 中可以直接 in 一个整数值 v-for="n in 10" 范围是[1,10]

不推荐同时使用v-for和v-if 二者的优先级不明确

5）为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 attribute：key

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

简单应用解析 【见注释】

效果：要求输入，然后add todo的时候会增加列表项，点击其中一项的X会删除该项todo

<script type="module">
import { createApp } from 'vue'

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

createApp({
  // 数据部分——存放状态
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
// 方法——改变状态的方式
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}).mount('#app')
</script>

<div id="app">
    <!-- 输入框和按钮形成一个提交的表单-->
  <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>
</div>

新增表项：

 1）input框用到了前文说到的"v-model"，值是"newTodo"，所以这个input的输入值将会被存储到newTodo中

2）button被包在form内部，而form又指定了submit.prevent="addTodo"，表示点击了按钮之后就会执行addTodo的操作

3）之前提到输入框的值已经被存储到newTodo中了，所以addTodo只需要根据形式将id++，然后取newTodo的值，将包装好的对象字面量(就是{id:id++,text:this.newTodo})放大todos列表中去

4）展示部分：<li></li>标签中用到v-for遍历todos列表，每项的显示内容是todo.text，后跟随一个X按钮

<ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>

完成1）-4）就可以实现如下效果

删除功能：

5）查找javascript数组相关的函数  网址：Array.prototype.filter() - JavaScript | MDN (mozilla.org)ilter函数，filter接受一个函数：筛选的对象=> 对象满足的要求，eg： (t)=> t!=todo

6）button X绑定删除函数

完成5)-6)可以实现如下效果

6、compute计算属性

我们可以使用 computed 选项声明一个响应式的属性，它的值由其他属性计算而来

举个实例： 

相关的部分我已经用注释划出

<script type="module">
import { createApp } from 'vue'

let id = 0

createApp({
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },

// 这部分就是计算属性
//
  computed: {
    filteredTodos() {
      return this.hideCompleted
        ? this.todos.filter((t) => !t.done)
        : this.todos
    }
  },

// 计算属性 end--//
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}).mount('#app')
</script>

<div id="app">
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
        <!--这里用到了计算属性filteredTodos-->
    <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>
</div>

计算属性便利在哪？

如果没有计算属性的概念，那么我会对倒数的按钮编写一个hideCompleted函数

函数应该要做的事情有：

1、更换按钮上的文字

2、更换todos的内容（像removeTodo那样）

这里就会发现问题了，因为hideCompleted不是要改变todos的元素，只是屏蔽一些元素的出现，如果像removeTodo那样，那么this.todos就会被重新赋值，filter掉的元素找不回来，无法完成从hide到show all的转变

所以本质上的解决方法是：展示出来的元素用另一个list存储，这个list在数值上(元素上）可以完全拷贝this.todos，也可以只拷贝this.todos的部分，然后展示上的v-for就用这个额外的lsit

计算属性就是这样的思路，只不过它没有在data()中先声明出一个list，而是到需要的时候经fiteredTodos去判断、返回新创的一个list

7、模板引用

个人感觉类似JS中document.getElementById

元素用ref加个标识

在createApp中的mounted(){}进行操作挂载

<script type="module">
import { createApp } from 'vue'

createApp({
  mounted() {
    this.$refs.pElementRef.textContent = 'mounted!'
  }
}).mount('#app')
</script>

<div id="app">
  <p ref="pElementRef">hello</p>
</div>