阅读量:1
目录
回顾
在上一篇文章中，我们介绍了 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。
插值表达式
插值表达式允许我们把数据插到模板中。
<span>Message: {{ message }}</span> 当message数据变化时，页面上对应的文本也会更新。
指令
指令是 Vue 模板中的特殊标记，带有前缀v-，用于告诉 Vue 框架需要对 DOM 元素进行一些特殊的处理。
v-bind
用于动态地绑定一个或多个属性，或一个组件 prop。
<img :src="imageUrl" :alt="imageDescription" /> v-model
在表单输入和应用状态之间创建双向数据绑定。
<input v-model="username" placeholder="Enter your name" /> v-on
监听 DOM 事件。
<button @click="sayHello">Say Hello</button> 自定义指令
Vue 允许我们通过自定义指令向元素添加自己的功能。自定义指令 可以钩入到 Vue 的编译过程中，允许我们对元素进行低层次操作。
创建自定义指令
// 注册一个全局自定义指令 `v-focus` Vue.directive("focus", { // 当被绑定的元素插入到DOM时…… inserted: function (el) { // 聚焦元素 el.focus(); }, }); 在模板中使用自定义指令
<input v-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"; } }, }); 在模板中使用：
<div v-resize="resizeObj"></div> 其中resizeObj是 Vue 实例的数据对象，包含width和height属性。
指令注册
指令不仅可以全局注册，还可以局部注册到单个 Vue 实例。
局部注册指令
new Vue({ directives: { focus: { // 指令定义 inserted: function (el) { el.focus(); }, }, }, }); 在实例的模板中使用：
<input v-focus /> 过滤器
过滤器用于在插值表达式中转换输出文本。
<p>{{ message | capitalize }}</p> filters: { capitalize: function (value) { if (!value) return ''; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); } } 数据绑定和响应式原理
Vue 的数据绑定是通过响应式系统实现的，该系统确保数据变化时视图能自动更新。
响应式数据绑定示例
data: { firstName: 'John', lastName: 'Doe' } 在模板中：
<p>{{ firstName }} {{ lastName }}</p> 当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: ` <input type="text" :value="customValue" @input="updateValue"> `, }); 使用自定义v-model的组件：
<child-component v-model="parentValue"></child-component> 在这个示例中，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); } } 在模板中：
<button @click="sayHello">Say Hello</button> 表单输入绑定
<input v-model="username" placeholder="Enter your name" /> 当用户在输入框中输入时，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等，来简化事件处理。
使用修饰符
<button @click.stop="sayHello">Say Hello</button> 按键修饰符
Vue 允许你监听特定的按键，如.enter、.tab等。
监听特定按键
<input @keyup.enter="onEnter" /> 组件基础
Vue 组件系统是构建大型应用程序的关键。组件允许我们通过组合较小的、可复用的部件来构建大型应用程序。
组件的创建和使用
Vue.component("my-component", { template: "<div>A custom component!</div>", }); 在模板中使用：
<my-component></my-component> 组件的 props
组件可以接受外部传入的数据，这些数据被称为 props。
Vue.component("child-component", { props: ["greeting"], template: "<p>{{ greeting }}</p>", }); 使用：
<child-component :greeting="'Hello from parent!'"></child-component> 组件事件
组件可以触发事件，这些事件可以被父组件监听。
Vue.component("child-component", { template: ` <button @click="notifyParent">Click me</button> `, methods: { notifyParent() { this.$emit("notify", "Message from child"); }, }, }); 父组件监听事件：
<child-component @notify="handleNotification"></child-component> methods: { handleNotification: function (message) { alert(message); } } 结语
通过本篇文章，我们全面学习了 Vue 的基础语法，包括 Vue 实例和选项、模板语法、数据绑定、事件处理、组件系统的基础，以及过滤器。这些知识点构成了 Vue 应用开发的基础。在接下来的专栏文章中，我们将继续深入探索 Vue 的高级特性和最佳实践。
欢迎在文章下方留言，分享学习 Vue 基础语法的心得体会，或提出在学习过程中遇到的问题。我将在后续的文章中提供解答和指导。
