vue3 基础

基础
应用程序和组件实例

//创建一个应用程序实例
const app = Vue.createApp({
    /* options */ })

const app = Vue.createApp({
   })
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

//链式调用
Vue.createApp({
   })
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

const app = Vue.createApp({
   
  data() {
   
    return {
    count: 4 }
  }
})
const vm = app.mount('#app')

复制代码

生命周期

数据属性和方法

const app = Vue.createApp({
   
  data() {
   
    return {
    count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// Assigning a value to vm.count will also update $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

// ... and vice-versa
vm.$data.count = 6
console.log(vm.count) // => 6	
复制代码

Class 与 Style 绑定

//对象
<div :class="{ active: isActive }"></div>

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

data() {
   
  return {
   
    isActive: true,
    hasError: false
  }
}

//数组
<