vue.js前端应用开发实战课后题

1. Vue.js 中的 v-bind 和 v-model 分别是什么作用？

- v-bind：绑定数据到 HTML 元素的属性上，可以简写为 “:” ，例如：`:src="imageUrl"`。
- v-model：双向绑定表单元素和数据，例如：`<input type="text" v-model="message">`。

2. 如何在 Vue.js 中监听 DOM 事件？

可以通过 v-on 指令在 Vue.js 中监听 DOM 事件，例如：`<button v-on:click="handleClick">Click me</button>`，可以简写为 `<button @click="handleClick">Click me</button>`。

3. Vue.js 中的 computed 和 watch 分别是什么作用？

- computed：计算属性，根据已有的数据计算出新的数据，例如：`computed: { fullName() { return `${this.firstName} ${this.lastName}` } }`。
- watch：监听数据的变化并执行相应的操作，例如：`watch: { firstName(newValue, oldValue) { console.log(`firstName changed from ${oldValue} to ${newValue}`) } }`。

4. Vue.js 中的生命周期函数有哪些？

- beforeCreate: 实例刚被创建，数据观测和事件配置之前调用。
- created: 实例已经创建完成，数据观测和事件配置完成之后调用。
- beforeMount: 模板编译/挂载之前调用。
- mounted: 模板编译/挂载完成之后调用。
- beforeUpdate: 数据更新时调用，但是此时虚拟 DOM 中的内容还没有更新。
- updated: 数据更新完成后调用。
- beforeDestroy: 实例销毁之前调用。
- destroyed: 实例销毁之后调用。

5. 如何在 Vue.js 中发送 Ajax 请求？

可以使用 Vue.js 中的 axios 插件发送 Ajax 请求，例如：

axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })