目录

• • 回顾
  • 本章涵盖知识点
  • Vue 实例和选项
  • • 创建 Vue 实例
    • Vue 实例的选项
  • Vue 模板语法
  • • 插值表达式
    • 指令
    • • v-bind
      • v-model
      • v-on
  • 自定义指令
  • • 创建自定义指令
    • 在模板中使用自定义指令
    • 自定义指令的`钩子函数`
    • 自定义指令的实例演示
  • 指令注册
  • • 局部注册指令
    • 过滤器
  • 数据绑定和响应式原理
  • • 响应式数据绑定示例
    • 响应式原理解析
  • v-model 的自定义实现
  • • 自定义`v-model`
    • 扩展知识点
  • 事件处理和表单输入
  • • 事件处理示例
    • 表单输入绑定
  • 深入数据绑定
  • • 对象和数组的更新
    • • 更新对象属性
      • 更新数组
    • 修饰符
    • • 使用修饰符
    • 按键修饰符
    • • 监听特定按键
  • 组件基础
  • • 组件的创建和使用
    • 组件的 props
    • 组件事件
  • 结语

回顾

• 【vue教程】一. 环境搭建与代码规范配置

在上一篇文章中，我们介绍了 Vue.js 的起源、设计理念、核心特性 已经项目规范化配置 。我们学习了如何搭建 Vue 开发环境，并熟悉了一些常用的 Vue 开发工具和插件

本章涵盖知识点

• Vue 实例和选项
• 模板语法：插值、指令、过滤器
• 数据绑定和响应式原理
• 事件处理和表单输入、v-model 原理
• 组件基础

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

Vue 实例和选项

每个 Vue 应用都是从创建一个新的 Vue 实例开始的。Vue 实例是一个包含选项的对象，这些选项包括数据、方法、生命周期钩子等。

创建 Vue 实例

var vm = new Vue({   el: "#app", // 指定Vue应该绑定到的DOM元素   data: {     message: "Hello Vue!", // 响应式数据   },   methods: {     sayHello: function () {       alert(this.message);     },   }, }); 

在这个实例中，el属性指定了 Vue 将接管哪个 DOM 元素，data属性包含了 Vue 实例的数据对象，methods属性包含了 Vue 实例可以调用的方法。

Vue 实例的选项

Vue 实例有多种选项，以下是一些常用的选项：

• data: 组件的数据对象。
• methods: 定义组件的方法。
• computed: 定义计算属性。
• watch: 定义侦听器。
• props: 子组件的外部数据。
• el: 指定 Vue 应该绑定到的 DOM 元素。

Vue 模板语法

Vue 的模板语法让我们能够声明式地将数据渲染进 DOM。

插值表达式

插值表达式允许我们把数据插到模板中。

Message: {{ message }} 

当message数据变化时，页面上对应的文本也会更新。

指令

指令是 Vue 模板中的特殊标记，带有前缀v-，用于告诉 Vue 框架需要对 DOM 元素进行一些特殊的处理。

v-bind

用于动态地绑定一个或多个属性，或一个组件 prop。

v-model

在表单输入和应用状态之间创建双向数据绑定。

v-on

监听 DOM 事件。

Say Hello 

自定义指令

Vue 允许我们通过自定义指令向元素添加自己的功能。自定义指令 可以钩入到 Vue 的编译过程中，允许我们对元素进行低层次操作。

创建自定义指令

// 注册一个全局自定义指令 `v-focus` Vue.directive("focus", {   // 当被绑定的元素插入到DOM时……   inserted: function (el) {     // 聚焦元素     el.focus();   }, }); 

在模板中使用自定义指令

自定义指令的钩子函数

自定义指令有以下几个钩子：

• bind: 只调用一次，指令第一次绑定到元素时调用。
• inserted: 被绑定元素插入父组件时调用。
• update: 所在组件的 VNode 更新时调用。
• componentUpdated: 父组件更新，该钩子被调用。
• unbind: 只调用一次，指令与元素解绑时调用。

自定义指令的实例演示

假设我们需要一个指令来控制元素的尺寸，根据数据属性调整大小：

Vue.directive("resize", {   bind(el, binding) {     el.style.width = binding.value.width + "px";     el.style.height = binding.value.height + "px";   },   update(el, binding) {     if (binding.oldValue !== binding.value) {       el.style.width = binding.value.width + "px";       el.style.height = binding.value.height + "px";     }   }, }); 

在模板中使用：

其中resizeObj是 Vue 实例的数据对象，包含width和height属性。

指令注册

指令不仅可以全局注册，还可以局部注册到单个 Vue 实例。

局部注册指令

new Vue({   directives: {     focus: {       // 指令定义       inserted: function (el) {         el.focus();       },     },   }, }); 

在实例的模板中使用：

过滤器

过滤器用于在插值表达式中转换输出文本。

{{ message | capitalize }}
 

filters: {   capitalize: function (value) {     if (!value) return '';     value = value.toString();     return value.charAt(0).toUpperCase() + value.slice(1);   } } 

数据绑定和响应式原理

Vue 的数据绑定是通过响应式系统实现的，该系统确保数据变化时视图能自动更新。

响应式数据绑定示例

data: {   firstName: 'John',   lastName: 'Doe' } 

在模板中：

{{ firstName }} {{ lastName }}
 

当firstName或lastName变化时，视图会自动更新。

响应式原理解析

Vue 使用Object.defineProperty来劫持数据对象的属性，当属性值变化时，视图会自动更新。

v-model 的自定义实现

v-model在 Vue 中通常用于创建数据双向绑定，它主要是语法糖，背后是:value和@input的结合。在组件中，我们可以自定义v-model的行为。

自定义v-model

在组件中，我们可以通过model选项来自定义v-model：

Vue.component("child-component", {   model: {     prop: "customValue", // 指定prop的名称     event: "change", // 指定事件的名称   },   props: ["customValue"],   methods: {     updateValue: function (event) {       this.$emit("change", event.target.value); // 触发事件，并传入新值     },   },   template: `        `, }); 

使用自定义v-model的组件：

在这个示例中，parentValue是父组件中的数据，通过v-model与child-component组件绑定。组件内部，我们监听input事件，并在事件发生时，通过$emit触发一个change事件，并传递新的值。

扩展知识点

• 修饰符：v-model可以与修饰符一起使用，如.lazy、.number和.trim，以控制输入的更新时机和行为。
• 不同类型的输入处理：对于radio、checkbox和select等不同类型的表单元素，Vue 提供了不同的处理方式来确保v-model的双向绑定能正常工作。

事件处理和表单输入

Vue 允许我们在模板中直接监听 DOM 事件，并在 Vue 实例的方法中处理这些事件。

事件处理示例

methods: {   sayHello: function () {     alert('Hello ' + this.username);   } } 

在模板中：

Say Hello 

表单输入绑定

当用户在输入框中输入时，username的值将自动更新，并且如果username在数据对象中变化，输入框的内容也会同步更新。

深入数据绑定

Vue 的数据绑定不仅限于简单的文本展示和表单输入，它还包括更复杂的场景。

对象和数组的更新

Vue 可以响应式地更新对象和数组，但需要注意使用Vue.set来保持响应性。

更新对象属性

// 对于新属性 Vue.set(vm.someObject, "newProperty", 123); 

更新数组

// 添加元素 vm.someArray.push(123); // 删除元素 vm.someArray.splice(index, 1); 

修饰符

Vue 提供了事件处理的修饰符，如.stop、.prevent、.capture等，来简化事件处理。

使用修饰符

Say Hello 

按键修饰符

Vue 允许你监听特定的按键，如.enter、.tab等。

监听特定按键

组件基础

Vue 组件系统是构建大型应用程序的关键。组件允许我们通过组合较小的、可复用的部件来构建大型应用程序。

组件的创建和使用

Vue.component("my-component", {   template: "
A custom component!
", }); 

在模板中使用：

组件的 props

组件可以接受外部传入的数据，这些数据被称为 props。

Vue.component("child-component", {   props: ["greeting"],   template: "
{{ greeting }}
", }); 

使用：

组件事件

组件可以触发事件，这些事件可以被父组件监听。

Vue.component("child-component", {   template: `     Click me   `,   methods: {     notifyParent() {       this.$emit("notify", "Message from child");     },   }, }); 

父组件监听事件：

methods: {   handleNotification: function (message) {     alert(message);   } } 

结语

通过本篇文章，我们全面学习了 Vue 的基础语法，包括 Vue 实例和选项、模板语法、数据绑定、事件处理、组件系统的基础，以及过滤器。这些知识点构成了 Vue 应用开发的基础。在接下来的专栏文章中，我们将继续深入探索 Vue 的高级特性和最佳实践。

欢迎在文章下方留言，分享学习 Vue 基础语法的心得体会，或提出在学习过程中遇到的问题。我将在后续的文章中提供解答和指导。