vue3

基础功能

• v-bind 绑定属性
• v-on 绑定事件
• v-model 表单输入和应用状态之间的双向绑定
• v-if 控制显示
• v-for 循环列表

根组件

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

生命周期

插值

• 文本 {{ }}
• 原始 HTML v-html
• JavaScript 表达式 {{ number + 1 }}
• 修饰符
  ...
• 缩写

 ... 


 ... 


 ... 

组件的属性

• data(){}
• methods {}
• 计算属性

computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

• 计算属性 vs 方法 计算属性是基于它们的反应依赖关系缓存的. 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
• watch 侦听器 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化
• 计算属性 vs 侦听器 通常更好的做法是使用计算属性而不是命令式的 watch 回调.

条件渲染

• v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

列表渲染

  

    {{ item.message }}
  

绑定事件

• Add 1
• Greet
• Say what
  Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。
• 事件修饰符

...



...

• 按键修饰符

• 系统修饰符

Do something

• .exact 修饰符

A


A


A

• 鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

组件基础

• 组件注册

const app = Vue.createApp({})

app.component('my-component-name', {
  // ... 选项 ...
})

• 通过 Prop 向子组件传递数据
  通过props传递

• 监听子组件事件
  在引用子组件处增加
  子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：

  Enlarge text

我们可以在组件的 emits 选项中列出已抛出的事件：

app.component('blog-post', {
  props: ['title'],
  emits: ['enlargeText']
})

• 通过插槽分发内容

app.component('alert-box', {
  template: `
    

      Error!
      
    
  `
})

• 动态组件
  可以通过 Vue 的 元素加一个特殊的 is attribute 来实现：

• 解析 DOM 模板时的注意事项
  有些 HTML 元素，诸如
  、
  、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
  1. 、
  和 ，只能出现在其它某些特定的元素内部。
  我们可以使用特殊的 v-is 指令作为一个变通的办法：

  v-is 值应为 JavaScript 字符串文本

  • 大小写
    HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值