2. 基础语法

组件实例

const app = Vue.createApp({
  data(){
    return {
      message: 'hello'
    }
  },
  methods:{},
  created(){},
  template: '<div>{{message}}</div>'
  })
const vm = app.mount('#app')

每个Vue应用通过createApp函数创建应用实例，
app.mount返回的是根组件实例
每个组件都有一个组件实例
通过vm.$data可以访问组件的data

Vue借鉴了MVVM模型，M(model)代表数据，V(view)代表视图，VM(viewmodel)是数据视图连接层

生命周期

Vue生命周期函数是在某一特定时间自动执行的函数

• beforeCreate 实例生成前
• created 实例生成后
• beforeMount 组件内容渲染到页面前
• Mounted 组件内容渲染到页面后
• beforeUpdate 数据发生变化时立即执行
• updated 数据发生变化页面重新渲染之后
• beforeUnmount Vue应用失效时 app.unmount()
• unmounted Vue应用失效，dom完全销毁之后

生命周期图示

常用模板语法

v-html

内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

<div v-html="html"></div>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>

绑定动态属性

<!-- 动态 attribute 名缩写 -->
<button :[key]="value"></button>

computed与methods

计算属性只有当依赖的内容发生变化时才重新执行计算
而methods中的方法，只要页面重新渲染，就会重新计算

$attrs

$attrs 包含了所有的 attribute

v-if和v-show

v-if操作dom，消耗资源
v-show操作css的display属性，适合频繁切换

v-for循环

数组 (item, index)
对象 (value, key, index)
循环要加key， 以减少渲染时的对比开销，提高性能，不建议用index当key，例如unshift时，会认为整个数组都变了

vue3中直接修改数组或对象的值也会重新渲染,vue2中感知不到变化
arr[2] = 'hello'

使用template标签可以减少不必要的div, template相当于占位符

<div>
  // ...
  <template v-for="item of array">
    <div>{{item}}<div>
  </template>
<div>

事件处理

文档

1. 不传参数，默认传event

   methods: {
   handleBtnClick(e) {
   console.log(e.target.innerHTML)
   }
   },
   template: `
   <button @click="handleBtnClick">修改</button>
   `

2. 用$event显式地传递事件

   methods: {
   handleBtnClick(value, e) {
    console.log(value)
    console.log(e.target.innerHTML)
   }
   },
   template: `
   <button @click="handleBtnClick(1,$event)">修改</button>
   `

3. 绑定多个事件处理方法

   <button @click="one($event), two($event)">
   Submit
   </button>

4. 事件修饰符，按键修饰符，系统修饰符，精确修饰符

   处理事件时，原生JS需要通过判断event的属性来做相应的处理，vue提供了相应的修饰符，参考官方文档即可

   v-model表单输入绑定

   官方文档