Vue3学习笔记：Day2 应用和

发表于2022-01-16字数统计846阅读时长6分

🙂创建Vue应用，了解Vue组件的生命周期，Vue3模板语法 : ) 🎇

Vue应用

每一个Vue应用都是用createApp函数创建一个实例开始的，在创建时可以向其中传入根组件

1
2
3
4
5
6
7
8
const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
               .component('SearchInput', SearchInputComponent)
               .directive('focus', FocusDirective)
               .use(LocalePlugin)
const vm = app.mount('#app')

大多数方法都会返回应用的实例，所以可以使用链式编写代码，但mount函数返回的是根节点的实例，我认为根节点是使用RootComponent从应用中创建模板实例，RootComponent是创建根节点的一些属性。–（此处也不太清楚）–

组件

大多数应用的组件都嵌套成树的结构

1
2
3
4
5
6
7
8
Root Component
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

组件属性

组件属性定义在data()中，可以在组件实例中直接访问

1
2
3
4
5
6
7
const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})
const vm = app.mount('#app')
console.log(vm.count) // => 4

Vue内置的属性通过使用$前缀区分用户定义的属性

生命周期

生命周期

图中的方法为生命周期钩子，即某个动作前后的回调函数

模板

所有的模板都是合法的HTML，可以被浏览器所解析。模板在运行时会被编译成DOM渲染函数，所以也可以直接写DOM渲染函数

文本

使用v-once指令表示此处绑定的属性不会更新

1
<span v-once>这个将不会改变: {{ msg }}</span>

使用v-html指令表示后面插入的属性会被当作HTML文本

1
2
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意Vue并不是基于字符串的引擎，用字符串当模板效率低而且不安全，应使用组件来表示重复调用的HTML代码

属性

属性使用v-bind指令，前面已经演示

如果属性值绑定的property是truthy，将会出现在HTML中，如果是falsy（除空字符串外），此属性将会省略不出现在HTML文本中

Truthy

1
2
3
4
5
6
7
8
9
10
11
>if (true)
>if ({})
>if ([])
>if (42)
>if ("foo")
>if (new Date())
>if (-42)
>if (3.14)
>if (-3.14)
>if (Infinity)
>if (-Infinity)

Falsy

1
2
3
4
5
6
7
8
9
10
>if (false)
>if (null)
>if (undefined)
>if (0)
>if (0n)
>if (NaN)
>if ('')
>if ("")
>if (``)
>if (document.all)

指令

动态参数

1
<a v-on:[eventName]="doSomething"> ... </a>

使用中括号表示指令参数eventName和property绑定

修饰符

使用.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

1
<form v-on:submit.prevent="onSubmit">...</form>

缩写

v-bind和v-on是最常用的两个属性，缩写形式为

v-bind

1
2
3
4
5
6
7
8
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on

1
2
3
4
5
6
7
8
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

缩写可以被正确的解析，且不会出现在最终的渲染标记中