### Vue笔记
#### 模板部分
- **v-html**：用于动态渲染HTML内容
- **v-text**：用于动态渲染文本内容【纯文本】
- **v-bind**：用于动态绑定属性
```html
<!-- `url`是一个变量，它将被绑定到`href`属性上 -->
<div v-bind:href="url">uu</div>
```
#### 脚本部分
- **选项式写法**：传统的Vue写法，使用`data`函数返回一个对象，包含组件所需的数据。例如：
```javascript
export default {
data() {
return {
msg: "哈哈哈哈哈哈"
};
}
};
```
- **组合式写法**：使用`script setup`语法，结合`ref`函数定义响应式数据。例如：
```javascript
import { ref } from 'vue';
let msg = ref('<a href="http://baidu.com">背对背拥抱</a>');
let url = ref('http://baidu.com');
```
#### 组件部分
- **注册组件**：可以使用选项式或组合式写法来注册组件。例如：
- 选项式：
```javascript
import Blog from './components/Blog.vue';
export default {
components: {
Blog
}
};
```
- 组合式：
```javascript
import Blog from './components/Blog.vue';
```
- **使用组件**
```html
<template>
<Blog></Blog>
</template>
```
### **Vue 的组合式写法与选项式写法**
1. 选项式写法
- **代码组织方式**：通过 `data`、`methods`、`computed` 等选项来组织代码。
- **响应式数据**：在 `data` 函数中定义响应式数据。
2.
```javascript
export default {
data() {
return {
msg: "哈哈哈哈哈哈"
};
},
methods: {
handleClick() {
console.log("按钮被点击了");
}
},
computed: {
reversedMsg() {
return this.msg.split("").reverse().join("");
}
}
};
```
3. 组合式写法：通过 `script setup` 和 `ref`、`reactive` 等 API 来组织代码
- **代码组织方式**：通过函数组合逻辑，将相关的逻辑封装在一起。
- **响应式数据**：使用 `ref` 或 `reactive` 定义响应式数据。
- **逻辑复用**：通过组合式函数实现逻辑复用，避免命名冲突。
4.
```javascript
import { ref, computed } from 'vue';
export default {
setup() {
// 定义响应式数据
const msg = ref("哈哈哈哈哈哈");
// 定义方法
const handleClick = () => {
console.log("按钮被点击了");
};
// 定义计算属性
const reversedMsg = computed(() => {
return msg.value.split("").reverse().join("");
});
return {
msg,
handleClick,
reversedMsg
};
}
};
```
