7 从零到上手学习 Vue.js 框架教程

小节 1: Vue.js 的简介

1.1 什么是 Vue.js？

Vue.js 是一个用于构建用户界面的渐进式框架。它的核心库关注于视图层，适合用于单页应用程序（SPA）的开发。

1.2 Vue.js 的特点

• 响应式: 使用 数据绑定 和 组件 的方式，使得数据与视图的同步变得简单。
• 组件化: Vue.js 鼓励使用组件来构建应用程序，提升代码的复用性。
• 灵活性: Vue 可以作为 库 或 框架 使用，集成简单。

小节 2: Vue.js 的模板语法

2.1 模板语法概述

Vue 的模板语法允许我们使用类似 HTML 的语法来声明性地将 DOM 绑定到底层 Vue 实例的数据。

2.2 基本指令

• v-bind: 动态绑定属性。

  <img v-bind:src="imageSrc" alt="Dynamic Image">

• v-model: 实现双向数据绑定。

  <input v-model="inputText" placeholder="Type something...">

• v-if: 条件渲染。

  <p v-if="isVisible">这个段落只有在 isVisible 为 true 的时候才显示。</p>

• v-for: 列表渲染。

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

2.3 绑定样式和类

• 动态类: 使用对象语法。

  <div :class="{ active: isActive, 'text-danger': hasError }"></div>

• 动态样式: 使用计算属性。

  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2.4 事件处理

• 使用 v-on 指令来处理事件。

  <button v-on:click="handleClick">Click me</button>

2.5 小例子 - 创建一个简单的 Vue 应用

<div id="app">
  <h1>{{ title }}</h1>
  <input v-model="message" placeholder="Edit me">
  <p>输入的内容是: {{ message }}</p>
  <button v-on:click="toggleVisibility">Toggle Paragraph</button>
  <p v-if="isVisible">这个段落可以被切换显示。</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      title: 'Hello Vue!',
      message: '',
      isVisible: true
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

小节 3: Vue.js 的响应性系统

3.1 响应性原理

Vue.js 的响应性使用了 Object.defineProperty，在数据属性被访问或更改时，Vue 会触发视图更新。

3.2 数据变更的触发

• 新增属性: 使用 Vue.set 方法。

  Vue.set(this.someObject, 'newProp', 'newValue');

• 删除属性: 使用 Vue.delete 方法。

  Vue.delete(this.someObject, 'oldProp');

3.3 计算属性 (Computed Properties)

计算属性是依赖于其他数据的属性，它们会自动更新。

<p>反转的文本是: {{ reversedMessage }}</p>

<script>
  new Vue({
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

3.4 侦听器 (Watchers)

侦听器允许我们响应数据变化进行一些副作用处理。

watch: {
  message(newValue, oldValue) {
    console.log(`Message changed from ${oldValue} to ${newValue}`);
  }
}

以上内容希望能够帮助你更好地理解 Vue.js 的模板语法和响应性系统，接下来你可以尝试更复杂的应用和功能实现！