基于Vue官网教程（1-9）的自学笔记，记录自己对概念的粗浅理解。
欢迎交流，如有不对请留言指正~
目录
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>