第21章_Vue3基础

授课语音

掌握Vue.js的基础语法与常见API

Vue.js是一款渐进式JavaScript框架，用于构建用户界面。它具有轻量、高效、易学的特点，并且与现代前端开发生态系统兼容。本课将介绍Vue.js的基础语法和常见API，帮助学员快速上手并应用到实际开发中。

1. Vue.js基础语法

Vue.js的核心是通过声明式的语法来构建界面，以下是Vue.js的基础语法：

1.1 创建Vue实例

Vue实例是每个Vue应用的核心。可以通过new Vue()来创建Vue实例。

// 创建Vue实例
const app = new Vue({
  el: '#app',  // 指定挂载点
  data: {
    message: 'Hello Vue!'  // 数据绑定
  }
});

代码解读：

el：指定Vue实例挂载的DOM元素。
data：定义Vue实例的数据，这些数据将自动绑定到DOM中。

1.2 模板语法

Vue.js提供了简洁的模板语法，用于将数据绑定到视图中。

<div id="app">
  <p>{{ message }}</p>  <!-- 使用双大括号绑定数据 -->
</div>

代码解读：

{{ message }}：这是Vue.js的插值语法，表示将message数据绑定到HTML中。

1.3 事件处理

Vue.js提供了v-on指令用于绑定事件。

<button v-on:click="showMessage">点击我</button>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    showMessage: function() {
      alert(this.message);  // 弹出消息
    }
  }
});

代码解读：

v-on:click：使用v-on指令绑定点击事件。
showMessage()：定义了一个方法，点击按钮时会弹出消息。

2. Vue.js常见API

2.1 `v-bind`指令

v-bind指令用于绑定HTML元素的属性。

<a v-bind:href="url">点击链接</a>

const app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org'
  }
});

代码解读：

v-bind:href：将url数据绑定到a标签的href属性。

2.2 `v-if`条件渲染

v-if指令用于根据条件动态渲染DOM元素。

<div v-if="isVisible">这是一个条件渲染的元素</div>

const app = new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});

代码解读：

v-if="isVisible"：如果isVisible为true，则渲染该元素。

2.3 `v-for`列表渲染

v-for指令用于渲染一个数组或对象的列表。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

const app = new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '橙子' }
    ]
  }
});

代码解读：

v-for="item in items"：遍历items数组，并渲染每个item。
:key="item.id"：为每个列表项提供一个唯一的键，帮助Vue进行高效的DOM更新。

2.4 计算属性

计算属性用于依赖数据变化时自动重新计算。

<p>{{ reversedMessage }}</p>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

代码解读：

computed：定义计算属性reversedMessage，它将返回message的反转字符串。
this.message：在计算属性中访问数据并进行处理。

3. Vue.js组件化

Vue.js允许通过组件化的方式组织代码，组件是Vue应用的基本构建块。

3.1 创建Vue组件

Vue组件可以通过Vue.component()方法或.vue文件创建。

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
});

代码解读：

Vue.component()：注册一个全局组件my-component，它的模板为<div>这是一个组件</div>。

3.2 组件使用

<div id="app">
  <my-component></my-component>
</div>

const app = new Vue({
  el: '#app'
});

代码解读：

<my-component></my-component>：在HTML中使用注册的组件。

3.3 组件传递数据（Props）

组件之间可以通过props传递数据。

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

<child-component :message="parentMessage"></child-component>

const app = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello from parent!'
  }
});

代码解读：

props: ['message']：定义组件的props，接收父组件传递的数据。
:message="parentMessage"：在父组件中传递数据。

4. Vue实例生命周期

Vue实例从创建到销毁的过程中，会经历一系列生命周期钩子。

4.1 生命周期钩子函数

Vue实例会在不同的阶段调用不同的生命周期钩子。

const app = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  created() {
    console.log('Vue实例已创建');
  },
  mounted() {
    console.log('Vue实例已挂载到DOM');
  }
});