11.4.1 Vue.js基础用法
在Vue.js的广阔世界中，掌握其基础用法是通往精通之路的基石。本章将深入探讨Vue.js的核心概念，包括实例的创建、模板语法、数据绑定、指令使用以及基本的组件化开发，帮助你从零开始构建Vue应用。
11.4.1.1 初始化Vue实例
Vue.js应用的起点是创建一个新的Vue实例。Vue实例是Vue应用的根，它包含了应用的所有数据、模板、逻辑和生命周期钩子等。通过new Vue()构造函数可以创建一个Vue实例，并传入一个选项对象，该对象定义了Vue实例的行为。
// 引入Vue库（假设已通过<script>标签引入Vue.js）// 创建一个Vue实例new Vue({el: '#app', // 挂载点，Vue实例将管理这个DOM元素及其子元素data: {message: 'Hello Vue!' // 实例的数据对象},methods: {// 实例的方法greet: function () {alert(this.message);}}});
在上述代码中，el属性指定了Vue实例的挂载目标（一个DOM元素），data属性包含了Vue实例的响应式数据，methods属性则定义了实例的方法。通过this关键字，可以在Vue实例的方法中访问到data中定义的属性。
11.4.1.2 模板语法
Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue模板的语法包括插值表达式、指令、过滤器等。
插值表达式：用于在模板中输出数据。使用双大括号
{{ }}包裹的表达式会被Vue替换为相应的数据值。<div id="app"><p>{{ message }}</p></div>
指令：带有
v-前缀的特殊属性，用于在模板中添加响应式逻辑。例如，v-bind用于响应式地更新HTML属性，v-model用于在表单输入和应用状态之间创建双向数据绑定。<input v-model="message" placeholder="edit me">
文本绑定：除了插值表达式外，还可以使用
v-text和v-html指令进行文本和HTML内容的绑定。但注意，v-html存在XSS风险，需谨慎使用。<span v-text="rawHtml"></span><!-- 或 --><div v-html="rawHtml"></div>
11.4.1.3 数据绑定与响应性
Vue.js的核心特性之一是数据的响应性。当Vue实例的数据发生变化时，Vue会自动更新DOM以反映最新的数据状态。这一特性是通过Vue的响应式系统实现的，它基于ES5的Object.defineProperty（或在Vue 3中使用的Proxy）来拦截对象属性的访问和修改，从而触发依赖的更新。
响应式数据：在Vue实例的
data选项中定义的数据都是响应式的。Vue会将这些数据转换为getter/setter，从而能够追踪和响应数据的变化。计算属性：使用
computed选项可以定义计算属性。计算属性是基于它们的依赖进行缓存的，只有当相关依赖发生改变时才会重新求值。computed: {reversedMessage: function () {return this.message.split('').reverse().join('');}}
侦听器：
watch选项允许你响应数据的变化来执行异步操作或开销较大的操作。watch: {message: function (newVal, oldVal) {console.log(`Message changed from ${oldVal} to ${newVal}`);}}
11.4.1.4 指令详解
Vue.js提供了多种内置指令，用于在模板中添加响应式逻辑。这里简要介绍几个常用指令。
v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。<a v-bind:href="url">...</a><!-- 简写 --><a :href="url">...</a>
v-model：在表单输入和应用状态之间创建双向数据绑定。<input v-model="message">
v-on：监听DOM事件，并在触发时执行一些JavaScript代码。<button v-on:click="greet">Greet</button><!-- 简写 --><button @click="greet">Greet</button>
v-if、v-else-if、v-else：根据表达式的真假条件渲染元素。<p v-if="seen">Now you see me</p><p v-else>Now you don't</p>
v-for：基于一个数组来渲染一个列表。<ul><li v-for="(item, index) in items" :key="index">{{ item.text }}</li></ul>
11.4.1.5 组件化开发
Vue.js鼓励组件化开发，即把页面拆分成多个独立的、可复用的组件。每个Vue组件都包含自己的模板、逻辑和样式，通过组件间的组合可以构建出复杂的页面应用。
注册组件：全局注册和局部注册。全局注册的组件可在任何新创建的Vue根实例的子组件的模板中使用，而局部注册的组件只能在注册它的父组件的模板中使用。
// 全局注册Vue.component('my-component', {// 选项...});// 局部注册var App = new Vue({el: '#app',components: {'my-component': {// 选项...}}});
组件间通信：包括父子组件通信（通过props和自定义事件）、兄弟组件通信（通过事件总线或Vuex等状态管理库）等。
props：父组件通过props向子组件传递数据。
自定义事件：子组件通过触发自定义事件向父组件发送消息。
// 子组件this.$emit('update:message', newValue);// 父组件<my-component @update:message="handleMessage"></my-component>
结语
通过本章的学习，你应已掌握了Vue.js的基础用法，包括Vue实例的创建、模板语法、数据绑定与响应性、常用指令的使用以及组件化开发的基本概念。这些是构建Vue.js应用不可或缺的基石。随着你对Vue.js的进一步探索，你将能够利用更高级的功能和技巧来开发复杂、高效且可维护的应用。继续前行，在Vue.js的旅程中发现更多精彩！
