Vue3.x 快速入门基础
应用实例
每个 Vue 应用都是通过用
createApp函数创建一个新的应用实例开始的：
const app = Vue.createApp({
/* 选项 */
})
一个Vue应用需要被挂载到一个 DOM 元素中,对DOM进行渲染
const RootComponent = {
/* 选项 */
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。
property
data()
data是一个函数，该函数需要返回一个对象，并储存在组件实例中。
{{message}}
使用{{}}文本插值将会被替换为message中的，并且绑定的组件实例上message发生了改变，插值处的内容都会更新。
methods
我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
name: {{name}}
age: {{age}}
{{hello()}}
vue实例中还有其他的property
模板语法
模板语法基础
{{}}
前面提到 使用{{}}文本插值将会被替换为message中的，并且绑定的组件实例上message发生了改变，插值处的内容都会更新。
但{{}}只能接受文本参数，不能转义。就比如传递html，并不会将html进行转义。
- 可以使用
v-html传递html文本
- 可以使用
v-bind指令绑定html中的属性值
鼠标悬停
v-bind 可以缩写为 :
鼠标悬停
- 可以使用
v-on指令监听DOM事件 (...)
v-on可以缩写为@
...
- 可以使用
v-model指令实现数据的双向绑定。
{{message}}
条件循环渲染
条件
v-if: 对应java if
v-else-if：对应java else if
v-else: 对应java else
如果放回true则渲染，否则不渲染
A
B
C
循环
v-for 指令来实现循环
语法 : v-for="obj in objs"
姓名
年龄
性别
{{student.name}}
{{student.age}}
{{student.gender}}
使用v-for直接遍历对象
-
{{ value }}
v-if 与 v-for 一起使用 （不推荐使用）
{{ todo }}
上面的代码表示将只渲染未完成的 todo。