文本

Message: {{ msg }}
只要绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新
这个将不会改变: {{ msg }}
只作用一次

指令

指令(Directives)是带有 v- 前缀的特殊 attribute
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

现在你看到我了


根据表达式 seen 的值来插入/移除元素
…
… 缩写
参数值绑定
…
… 缩写
监听事件名绑定
…

修饰符(modifier)以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
如 .prevent 指定 v-on 对于出发的事件调用 event.preventDefault()
… 动态参数
应避免使用大写字符，因为浏览器会把 attribute 名全部强制转为小写
动态参数会预期求出一个字符串，null 除外。null 值可以用于显示的移除绑定。任何其他非字符串类型的值都会出发一个警告

Data Property

组件的 data 选项是一个函数，Vue 会在创建新组件实例的过程中调用此函数
预期返回一个对象，Vue 会通过响应式系统将其包裹起来，并以 $data 的形式存储在组件实例中
为方便起见，该对象的任何顶级property也会直接通过组件实例暴露出来

直接将不包含在 data 中的新property添加到组件实例中是可行的
但由于该 property 不在响应式 $data 对象内，所以 Vue 的响应式系统不会自动跟踪它

Vue 使用 $ 前缀通过组件实例暴露自己的内置 API
它还为内部 property 保留 _ 前缀
应该避免使用这两个字符开头的顶级 data property 名称

  1. const app = Vue.createApp({
  2.   data() {
  3.     return { count: 4 }
  4.   }
  5. })
  7. const vm = app.mount('#app')
  9. console.log(vm.$data.count) // => 4
  10. console.log(vm.count)       // => 4
  12. // 修改 vm.count 的值也会更新 $data.count
  13. vm.count = 5
  14. console.log(vm.$data.count) // => 5
  16. // 反之亦然
  17. vm.$data.count = 6
  18. console.log(vm.count) // => 6

方法

使用 methods 选项向组件实例添加方法，应该是一个包含所需方法的对象
方法应只有纯粹的数据逻辑，而不去处理 DOM 事件细节

  1. const app = Vue.createApp({
  2.   data() {
  3.     return { count: 4 }
  4.   },
  5.   methods: {
  6.     increment() {
  7.       // `this` 指向该组件实例
  8.       this.count++
  9.     }
  10.   }
  11. })
  13. const vm = app.mount('#app')
  15. console.log(vm.count) // => 4
  17. vm.increment()
  19. console.log(vm.count) // => 5

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例
在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向


在组件的模板中被访问
{{ formatDate(date) }}
直接从模板中调用方法，前提是在 计算属性 不可行的情况下
从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。此时应使用 生命周期钩子

计算属性

对于任何包含响应式数据的复杂逻辑，都应该使用计算属性
计算属性的 getter 函数没有副作用
计算属性基于它们的响应依赖关系缓存，只会在相关响应式依赖发生改变时重新求值。只要相关依赖没有发生改变，多次访问时计算属性会立即返回之前的计算结果，而不必再次执行函数

  1. Vue.createApp({
  2.   data() {
  3.     return {
  4.       author: {
  5.         books: [
  6.           'Vue 2 - Advanced Guide'
  7.         ]
  8.       }
  9.     }
  10.   },
  11.   computed: {
  12.     // 计算属性的 getter
  13.     publishedBooksMessage() {
  14.       // `this` 指向 vm 实例
  15.       return this.author.books.length > 0 ? 'Yes' : 'No'
  16.     }
  17.   }
  18. }).mount('#computed-basics')

侦听器

当需要在数据变化时执行异步或开销较大的操作时，建议使用侦听器

  1. <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
  2. <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
  3. <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
  4. <script>
  5.   const watchExampleVM = Vue.createApp({
  6.     data() {
  7.       return {
  8.         question: '',
  9.         answer: 'Questions usually contain a question mark. ;-)'
  10.       }
  11.     },
  12.     watch: {
  13.       // 每当 question 发生变化时，该函数将会执行
  14.       question(newQuestion, oldQuestion) {
  15.         if (newQuestion.indexOf('?') > -1) {
  16.           this.getAnswer()
  17.         }
  18.       }
  19.     },
  20.     methods: {
  21.       getAnswer() {
  22.         this.answer = 'Thinking...'
  23.         axios
  24.           .get('https://yesno.wtf/api')
  25.           .then(response => {
  26.             this.answer = response.data.answer
  27.           })
  28.           .catch(error => {
  29.             this.answer = 'Error! Could not reach the API. ' + error
  30.           })
  31.       }
  32.     }
  33.   }).mount('#watch-example')
  34. </script>

Class与Style绑定


active 这个 class 存在与否将取决于 data property isActive 的 值

需要在data property中创建对象 classObject
也可以绑定一个返回对象的计算属性，使用 data property + computed 的形式

## 条件渲染

Vue is awesome!


Vue is awesome!


Oh no 😢

Hello!

## 列表渲染


  • {{ item.message }}


items为一个数组
index为item的索引

  • {{ name }}: {{ value }}

    • myObject为一个对象
    name:value 是一个键值对
    在遍历对象时，会按 object.keys() 的结果遍历，所以不保证在不同的 JavaScript 引擎下的结果都一致

    为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的 key attribute ## 事件处理 若需要在内联语句处理器中访问原生的 DOM 事件，可以用特殊变量 $event 把它传入方法
    可以绑定多个事件，用逗号分隔
    事件修饰符 ```html
    …
    …

    …

    Do something
    ```

    表单输入绑定

    v-model
    忽略所有表单元素的 value、checked、selected attribute的初始值
    始终将当前活动实例的数据作为数据来源，应该通过 JavaScript在组件的 data 选项中声明初始值

    组件基础

    组件是可复用的实例，所以与根实例接收相同的选项，如 data、computed、watch、methods 以及生命周期钩子