vue3嵌入到html中使用 基础（二）

应用 & 组件实例

?

1 2 3 4 5 6 7 8 9 10

//应用实例 const app = Vue.createApp({   data() {     return { count: 4 }   } }) //组件实例 const vm = app.mount('#app')   console.log(vm.count) // => 4

　　

生命周期

 模板语法

插值

Mustache 标签将会被替代为对应组件实例中 msg property 的值。无论何时，绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新。

?

1 2 3 4 5

<!-- 文本 --> <span>Message: {{ msg }}</span> {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{message.split('').reverse().join('') }}

指令

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!--  使用v-once 指令 当数据改变时，插值处的内容不会更新 --> <span>Message: {{ msg }}</span> <span v-once>这个将不会改变: {{ msg }}</span> <!-- 使用v-html 指令,输出真正的 HTML --> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> <!-- HTML attribute  --> <div v-bind:id="dynamicId"></div> <div v-bind:id="'list-' + id"></div> <!-- v-if将根据表达式 seen 的值的真假来插入/移除 <p> 元素  --> <p v-if="seen">现在你看到我了</p> <script></script> <!-- v-on 指令，用于监听 DOM 事件 --> <a v-on:click="doSomething"> ... </a> <!-- attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用 --> <a v-bind:[attributeName]="url"> ... </a> <a v-on:[eventName]="doSomething"> ... </a> <!-- 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() --> <form v-on:submit.prevent="onSubmit">...</form> <!-- v-bind 缩写 --> <a v-bind:href="url"> ... </a> <a :href="url"> ... </a> <a :[key]="url"> ... </a> <!-- v-on 缩写 --> <a v-on:click="doSomething"> ... </a> <a @click="doSomething"> ... </a> <a @[event]="doSomething"> ... </a>

Data Property 和方法

组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

const app = Vue.createApp({   data() {     return { count: 4 }   } })   const vm = app.mount('#app')   console.log(vm.$data.count) // => 4 console.log(vm.count)       // => 4   // 修改 vm.count 的值也会更新 $data.count vm.count = 5 console.log(vm.$data.count) // => 5   // 反之亦然 vm.$data.count = 6 console.log(vm.count) // => 6

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

const app = Vue.createApp({   data() {     return { count: 4 }   },   methods: {     increment() {       // `this` 指向该组件实例       this.count++     }   } })   const vm = app.mount('#app')   console.log(vm.count) // => 4   vm.increment()   console.log(vm.count) // => 5

计算属性和侦听器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Vue.createApp({   data() {     return {       author: {         name: 'John Doe',         books: [           'Vue 2 - Advanced Guide',           'Vue 3 - Basic Guide',           'Vue 4 - The Mystery'         ]       }     }   },   computed: {     // 计算属性的 getter     publishedBooksMessage() {       // `this` 指向 vm 实例       return this.author.books.length > 0 ? 'Yes' : 'No'     }   } }).mount('#computed-basics')

可以像普通属性一样将数据绑定到模板中的计算属性。Vue 知道 vm.publishedBookMessage 依赖于 vm.author.books，因此当 vm.author.books 发生改变时，所有依赖 vm.publishedBookMessage 的绑定也会更新。

我们可以将同样的函数定义为一个方法，而不是一个计算属性。从最终结果来说，这两种实现方式确实是完全相同的。然而，不同的是计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。

 

当需要在数据变化时执行异步或开销较大的操作时，可以自定义一个侦听器来响应数据的变化

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

const watchExampleVM = Vue.createApp({    data() {      return {        question: '',        answer: 'Questions usually contain a question mark. ;-)'      }    },    watch: {      // 每当 question 发生变化时，该函数将会执行      question(newQuestion, oldQuestion) {        if (newQuestion.indexOf('?') > -1) {          this.getAnswer()        }      }    },    methods: {      getAnswer() {        this.answer = 'Thinking...'        axios          .get('https://yesno.wtf/api')          .then(response => {            this.answer = response.data.answer          })          .catch(error => {            this.answer = 'Error! Could not reach the API. ' + error          })      }    }  }).mount('#watch-example')