{{ message }}
``` > [template标签](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template) > 其实不仅可以用 template，还可以使用其他任何标签，主要是 template 不会被渲染。因为本质来说都是使用 `document.querySelector` 来查找对象 ------------------------ 通过前面的例子，可以知道传入 `Vue.createApp` 的对象的 `data` 属性的作用，该属性在 Vue3 中必须是一个函数，否则**报错** data 中返回的对象会被 Vue 的响应式系统劫持，只会对该对象的修改或者访问都会在劫持中被处理 这就是为什么 `{{message}}` 可以显示 `message` 的数据，以及为什么修改 `message` 的值其显示内容也会改变 ------------------------ 通过前面的例子，可以知道传入 `Vue.createApp` 的对象的 `methods` 属性用于定义系列功能函数，这些方法可以绑定到 `template` 模板中，同时这些方法可以通过 `this` 关键字来直接访问到 `data` 中返回的对象的属性 ----------------------- 除了前面几个属性之外，还有可以定义很多其他的属性，比如：`props`、`computed`、`watch`、`emits`、`setup` 和 **声明周期函数**等 ### 源码查看 [Github仓库](https://github.com/vuejs/core) 在 `dev` 中开启 `sourcemap` 源码映射，然后示例项目进行测试即可 ### methods 中禁止使用箭头函数 ```html{{ message }}
``` 首先 `methods` 中定义的函数通常要通过 `this` 来访问 `data` 的属性，如果 `methods` 里面定义箭头函数，函数中使用的 `this` 其实是 `Window` 对象，也就是浏览器窗口对象 在 `Window` 对象中肯定是没有名为 `message` 的属性的，所以使用 `this.message` 会直接报错 在箭头函数中是不绑定 `this` 的 ```html ``` 普通函数执行时都会进行 `this` 的绑定，也就是说 `foo()` 其实是 `Window.foo()` 进行了隐式绑定 ```html ``` 箭头函数不会绑定 `this`，所以此时无论是 `foo()` 还是 `obj.bar()` 输出的都是 `Window` 为什么都是都是 `Window` 是因为箭头函数中的 this 并没有进行任何绑定，所以找不到 `this` 对象，于是就会像上层作用域查找 `this` 对象，最后找到 `Window` 对象 ```html ``` 这里 `btnClick` 的上层作用域并不是 `methods`，`methods` 只是在定义对象，`obj` 也只是定义对象，所以 `btnClick` 上层作用域其实是 ` ``` 注意 `Mustache` 只支持表达式，并不支持语句，下面都是错误写法 ```htmllet name = "abc"
if(message === undefined) { return "true" }
``` > 赋值语句、条件判断语句 #### v-once 指令 `v-once` 用于指定元素或者组件只渲染一次，当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过，该指令可以用于**性能优化** ```html{{ count }}
{{ message }}
{{ count }}
{{ message }}
```  在 `template` 中使用 `v-once` 标记的 `tag` 只会在一开始计算、渲染，再之后不会更新渲染 `v-once` 标记的 `tag` 及其子 `tag` 都不会更新渲染，从上述代码上看就知道 #### v-text 指令 用于更新元素的 textContent 用 `` 和 `{{ count }}
` 的表现和作用相同都是用来显示内容 ```html{{ count }}
{{ message }}
```  > 一般来说直接 `{{}}` 就行了 #### v-html 指令 默认情况下，如果展示的内容本身是 html 的， vue 并不会对其进行特殊的解析。如果希望这个内容被解析出来，可以使用 `v-html` ```html{{ message }}
```  > `{{}}` 不会解析 html，所以会显示 ``；`v-html` 会解析 html #### v-pre 指令 `v-pre` 用于跳过元素和它的子元素的编译过程，显示原始的 Mustache 标签 一般用于跳过不需要编译的节点，加快编译的速度 ```html{{ message }}
{{ message }}
```  #### v-cloak 这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 `[v-cloak]{ display: none }` 一起用时，这个指令可以隐藏未编译的 `Mustache` 标签直到组件实例准备完毕 ```html{{ message }}
``` 通过 `CSS` 设置，如果存在 `v-cloak` 则不会显示 `h2` 极其内容。当组件实例编译完毕之后，`v-cloak` 标签被删除，`h2` 内容就又会出现 > Vue3 一般用不到 #### v-bind 绑定属性 除了内容需要动态决定外，某些属性也希望动态绑定，比如动态绑定 `` 的 `href` 属性、动态绑定 `{{ message }}
` 如上述代码所示，绑定了一个对象，其有两个属性：`active` 和 `disabled`，这就是 `class` 的值，通过 `true`、`false` 来决定是否需要启用这个 `class` ```html{{ message }}
```  > 可以看到值为 `false` 的 `class` 不会添加到标签上 通过下面这种写法，可以将确定的 class 和动态的 class 结合起来，前面没有 `v-bind` 就是确定需要的 class ```html{{ message }}
```  除了将对象写在标签的属性上之外，还可以直接绑定 `data` 中的一个对象，或者 `methods` 中方法的返回值 ```html{{ message }}
{{ message }}
``` 什么是**数组语法**，如题所示，就是 class 属性绑定的其实是一个数组，这个数组中所有的 class 都会被添加 **数组语法**的用法跟对象语法类似，除此之外，**数组语法**的数组中还可以嵌套对象语法和三元运算 ```html{{ message }}
{{ message }}
{{ message }}
{{ message }}
{{ message }}
``` #### v-bind 绑定 style 可以使用 `v-bind:style` 来绑定 css 内联样式。因为某些样式需要根据数据动态决定，比如颜色、字体大小等 > CSS Property 名可以用 **驼峰式** 或 **短横线分隔符** 来命名 style 的绑定方法也是两种：**对象语法**和**数组语法** style 的对象语法与 class 的对象语法相似 ```html {{ message }} {{ message }} {{ message }} {{ message }} {{ message }} ```  style 的数组语法与 class 的数组语法类型，都支持数组嵌套数组对象 #### v-bind 动态绑定属性 标签的一些属性可能会动态改变，比如 `
{{message}}
```
#### v-on 绑定事件
[官方文档-事件处理](https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers)
比如点击、拖拽、键盘事件等
`v-on` 的缩写是 `@`，比如之前的 `@click`
```html
{{message}}
{{message}}
```
当鼠标点击、移动、拖拽时，浏览器在触发事件时会携带一个 event 对象，想通过 `v-on` 得到 event 对象有两种方式
1. Vue 会在执行事件触发函数时，自动将 event 传递给绑定的函数
```js
Vue.createApp({
template: '#template1',
data() {
return {
message: '打开百度',
}
},
methods: {
changeHref(event) {
console.log(event);
}
}
}).mount('#app1');
```
2. 如果事件绑定函数携带参数，那么不会自动传递 `event`，需要通过 `$event` 获得事件发生时的事件对象，函数的其他参数正常传递即可
```html
```
#### v-on 修饰符
[v-on事件处理-修饰符](https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers)
| 修饰符 | 作用 |
| --- | --- |
| .stop | 调用 event.stopPropagation() |
| .prevent | 调用 event.preventDefault() |
| .capture | 添加事件侦听器时使用 capture 模式 |
| .self | 只有当事件是从侦听器绑定的元素本身触发时才会触发回调 |
| .{keyAlias} | 仅当事件是从特定键触发时才触发回调 |
| .once | 只触发一次回调 |
| .left | 只当点击鼠标左键时触发 |
| .right | 只当点击鼠标右键时触发 |
| .middle | 只当点击鼠标中键时触发 |
| .passive | {passive: true} 模式添加侦听器 |
```html
Vue is awesome!
Oh no 😢
Vue is awesome!
Oh no 😢
```  通过 F12 查看源码 - v-if 为 false 时，其标签会直接从 dom 树中移除 - v-show 为 false 时，标签依然存在在 dom 树中，只是不显示 - 如果元素需要在显示和隐藏之间频繁的切换，那么使用 v-show，因为不用操作 dom - 如果不会频繁的发生切换，那么使用 v-if > v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费 #### v-for 列表渲染 [vue列表渲染](https://cn.vuejs.org/guide/essentials/list.html) `v-for` 的基本格式是 `item in Array`，数组通常来自 data 或者 prop，可以是其他方式，item 是给每项元素起的别名 ```html- {{ movie }}
- {{ index }} : {{ key }} : {{ value }}
- {{ key }}: {{ info[key] }}
- {{ num }}
- {{ num }}
- {{ key }}
- {{ value }}
- {{ key }}
- {{ value }}
- {{movie}}
3333
```
`Vue` 会先将上述 `template` 中 `div` 内容转换成 `VNode` 对象，再转换成真实的 `Dom`
```js
const vnode = {
type: "div",
props: {
class: "title",
style: {
"font-size": "30px",
color: "red"
}
},
children: "3333"
}
```
> 上述 div 会转换为上述的 vnode
使用 `VNode` 可以方便的进行多平台适配，移动端、浏览器等
如果是一大堆元素，最后会形成一个 `VNode Tree`
```html
- {{ movie }}