小节 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: 动态绑定属性。

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

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

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

• v-if: 条件渲染。

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

• v-for: 列表渲染。

  1 2 3

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

2.3 绑定样式和类

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

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

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

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

2.4 事件处理

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

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

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

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

<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 方法。

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

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

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

3.3 计算属性 (Computed Properties)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

3.4 侦听器 (Watchers)

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

1
2
3
4
5

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

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

在 Vue.js 中，组件是构建应用的基本单元。一个应用通常由多个组件组成，通过组件化可以提高代码的复用性和可维护性。本节将详细讲解如何创建和使用 Vue.js 组件。

1. Vue.js 组件概述

组件是一个包含 HTML、CSS 和 JavaScript 的独立单元。每个组件都有自己的视图和逻辑，通常用于实现应用的某一部分功能。组件的开发可以极大提升代码的组织性。

1.1 组件的基本结构

一个 Vue.js 组件通常包含以下几个部分：

• 模板：定义组件的 HTML 结构。
• 脚本：定义组件的 JavaScript 逻辑，包括数据、计算属性和方法。
• 样式：定义组件的 CSS 样式。

2. 创建 Vue.js 组件

2.1 使用 Vue.extend 创建组件

最基础的方式是使用 Vue.extend() 方法来创建一个组件。例如，创建一个简单的计数器组件：

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

// 创建一个计数器组件
const Counter = Vue.extend({
  template: `<div>
               <p>当前计数：{{ count }}</p>
               <button @click="increment">增加</button>
             </div>`,
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

2.2 使用 Vue 组件实例化

创建完组件后，需要通过 new 关键字来实例化它并挂载到 DOM 上。例如：

1
2

// 实例化并挂载计数器组件
new Counter().$mount('#app');

在 HTML 中，需要有一个与其对应的节点：

1

<div id="app"></div>

3. 组件的注册与使用

3.1 全局注册组件

使用 Vue.component 方法可以全局注册一个组件，使其在任何 Vue 实例中可用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vue.component('my-counter', {
  template: `<div>
               <p>当前计数：{{ count }}</p>
               <button @click="increment">增加</button>
             </div>`,
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

使用全局注册的组件：

1
2
3

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

3.2 局部注册组件

在 Vue 实例或其他组件中，可以局部注册组件。这样，在两个组件之间就可以进行引用。

1
2
3
4
5
6
7
8
9

const App = {
  template: `<div>
               <h1>欢迎来到 Vue 应用</h1>
               <my-counter></my-counter>
             </div>`,
  components: {
    'my-counter': Counter // 此处引用之前定义的组件
  }
};

4. 组件的通信

组件之间需要进行通信时，通常使用 props 和事件。

4.1 使用 Props 接收数据

父组件可以通过 props 向子组件传递数据：

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

const ChildComponent = {
  props: ['message'],
  template: `<div>{{ message }}</div>`,
};

// 在父组件中使用
const ParentComponent = {
  template: `<child-component :message="parentMsg"></child-component>`,
  data() {
    return {
      parentMsg: 'Hello from Parent!'
    };
  },
  components: {
    'child-component': ChildComponent,
  }
};

4.2 使用自定义事件

子组件可以通过 $emit 方法向父组件发送事件：

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

const ChildComponent = {
  template: `<button @click="notifyParent">通知父组件</button>`,
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello Parent!');
    }
  },
};

// 在父组件中监听事件
const ParentComponent = {
  template: `<child-component @notify="handleNotification"></child-component>`,
  methods: {
    handleNotification(message) {
      console.log(message); // 输出: Hello Parent!
    }
  },
  components: {
    'child-component': ChildComponent,
  }
};

5. 小结

在本节中，我们介绍了 Vue.js 组件的创建与使用，了解了组件的注册方式，以及如何进行组件之间的通信。掌握组件的基本概念和使用方法是深入学习 Vue.js 的关键，后续你可以通过创建更复杂的组件来提升你的开发技能。

通过实践案例，你能更好地理解组件的各种特性和用法。希望这些内容能帮助你快速上手 Vue.js 组件开发！

在 Vue.js 中，组件是构建用户界面的基础。想要有效地传递数据和响应事件，props 和自定义事件是不可或缺的工具。本节将详细探讨如何使用组件的 props 和事件。

1. 什么是 Props？

props（属性的缩写）允许父组件向子组件传递数据。这种数据传递是单向的：父组件可以向子组件传递数据，但子组件不能直接修改这些数据。

1.1 定义 Props

在组件中定义 props 很简单，可以在组件的选项中添加一个 props 数组或对象。例如：

1
2
3
4

Vue.component('my-component', {
  props: ['title', 'count'],
  template: '<h1>{{ title }}: {{ count }}</h1>'
});

在上面的例子中，my-component 接受两个 props：title 和 count。

1.2 使用 Prop

在父组件中使用子组件，并传递props，示例如下：

1

<my-component title="Hello Vue" :count="10"></my-component>

在这一行中，title 是一个字符串，而 count 是一个动态的 JavaScript 表达式。

1.3 Prop 的类型验证

为了确保传递到子组件的数据类型正确，可以在 props 中定义类型。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13

Vue.component('my-component', {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  template: '<h1>{{ title }}: {{ count }}</h1>'
});

在这里，title 是必需的且必须是字符串，count 是可选的，默认为 0。

2. 事件处理

在 Vue.js 中，父组件可以通过子组件的自定义事件来接收子组件的消息和操作。

2.1 触发自定义事件

在子组件中使用 $emit 方法触发事件。例如：

1
2
3
4
5
6
7
8

Vue.component('my-button', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      this.$emit('button-clicked', 'Hello from child!');
    }
  }
});

在这个例子中，点击按钮时会触发名为 button-clicked 的事件，并将字符串 'Hello from child!' 作为参数传递。

2.2 监听自定义事件

在父组件中，可以使用 v-on 指令或 @ 别名来监听子组件触发的事件:

1

<my-button @button-clicked="handleChildClick"></my-button>

1
2
3
4
5
6
7
8

new Vue({
  el: '#app',
  methods: {
    handleChildClick(message) {
      console.log(message); // 输出：Hello from child!
    }
  }
});

2.3 组合使用 Props 与事件

通常情况下，父组件通过 props 传递数据给子组件，同时通过事件接收子组件的消息。例如：

1
2
3

<div id="app">
  <my-component :title="message" :count="count" @update-count="updateCount"></my-component>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue',
    count: 0
  },
  methods: {
    updateCount(newCount) {
      this.count = newCount;
    }
  }
});

在这个综合示例中，my-component 通过 props 接收 title 和 count，同时通过 update-count 事件向父组件发送更新后的计数。

3. 小结

在 Vue.js 中，props 和自定义事件是实现组件间通信的主要方式。

• Props：用于父组件向子组件传递数据，具有单向数据流的特性。
• 自定义事件：允许子组件向父组件发送消息，通常用于通知父组件发生了某些事件或改变。

通过理解和灵活使用 props 和事件，可以构建出更加复杂和灵活的 Vue.js 应用。