首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
4.1 v-if指令
4.1.1 基本用法
4.1.2 判断一组元素
4.2 v-else指令
4.3 v-else-if指令
4.4 v-show指令
4.5 如何选择v-if和v-show
5.1 遍历数组
5.1.1 基本用法
5.1.2 循环一组元素
5.1.3 更新数组
5.2 遍历对象
5.2.1 基本用法
5.2.2 向对象中添加响应式属性
5.3 遍历整数
5.4 key属性
6.1 计算属性
6.1.1 计算属性简介
6.1.2 计算属性的应用
6.1.3 计算属性的getter和setter
6.1.4 计算属性的缓存
6.2 监听属性
6.2.1 监听属性简介
6.2.2 监听属性的应用
6.2.3 监听对象
6.3 计算属性和监听属性的比较
7.1 class绑定
7.1.1 对象语法
7.1.2 数组语法
7.2 style绑定
7.2.1 对象语法
7.2.2 数组语法
8.1 监听事件
8.2 事件处理方法
8.2.1 绑定方法
8.2.2 使用事件对象
8.2.3 使用内联语句
8.3 修饰符的使用
8.3.1 事件修饰符
8.3.2 按键修饰符
9.1 文本框绑定
9.1.1 单行文本框
9.1.2 多行文本框
9.2 复选框绑定
9.2.1 单个复选框
9.2.2 多个复选框
9.3 单选按钮绑定
9.4 下拉列表框绑定
9.4.1 单选列表框
9.4.2 多选列表框
9.5 值绑定
9.5.1 单选按钮
9.5.2 复选框
9.5.3 下拉列表框
9.6 修饰符的使用
9.6.1 lazy
9.6.2 number
9.6.3 trim
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(二)
小册名称:Vue.js从入门到精通(二)
### 5.2.1 基本用法 在Vue.js的广阔世界里,掌握其基础用法是通往精通之路的第一步。本章“5.2.1 基本用法”将带你深入了解Vue.js的核心概念与基本构建块,包括Vue实例的创建、模板语法、数据绑定、指令、事件处理以及生命周期钩子等。通过这一章的学习,你将能够构建简单的Vue应用,并理解Vue.js是如何工作的。 #### 5.2.1.1 Vue实例的创建 Vue.js应用是通过创建Vue实例来启动的。每个Vue实例都会管理一个DOM区域,我们称之为“挂载点”。Vue实例包含了应用的所有数据、模板、逻辑等。 ```javascript // 引入Vue库 import Vue from 'vue'; // 创建一个Vue实例 new Vue({ el: '#app', // 指定挂载点,这里是id为app的DOM元素 data: { message: 'Hello Vue!' // 定义数据 } }); ``` 在上述代码中,`el`属性指定了Vue实例将要管理的DOM元素的ID,而`data`属性则包含了Vue实例的响应式数据。Vue.js的响应式系统能够自动追踪数据的变化,并在数据改变时更新DOM。 #### 5.2.1.2 模板语法 Vue.js使用基于HTML的模板语法,允许你声明式地将DOM绑定到底层Vue实例的数据上。模板语法包括插值表达式(用于文本内容)、指令(用于添加特殊的HTML属性)等。 - **插值表达式**:使用双大括号`{{ }}`包裹的表达式会被替换为数据对象的属性值。 ```html <div id="app"> <!-- 插值表达式 --> <p>{{ message }}</p> </div> ``` - **指令**:Vue.js提供了一系列内置指令,用于在模板中声明式地绑定和监听DOM。最常用的是`v-bind`和`v-model`,分别用于响应式地更新HTML属性以及创建双向数据绑定。 ```html <div id="app"> <!-- 使用v-bind指令绑定属性 --> <a v-bind:href="url">链接</a> <!-- 简写形式 --> <a :href="url">链接</a> <!-- 使用v-model创建双向数据绑定(常用于表单元素) --> <input v-model="inputValue" placeholder="输入内容"> </div> ``` #### 5.2.1.3 数据绑定 Vue.js的核心特性之一是数据绑定,它允许我们声明式地将数据渲染进DOM的模板中。Vue.js通过其响应式系统实现数据的双向绑定,这意味着当数据变化时,视图会自动更新;同时,视图的变化也可以反映回数据。 除了上述的插值表达式和`v-model`指令外,Vue还提供了`v-bind`用于单向数据绑定(从数据到DOM),以及通过`.sync`修饰符(在某些组件属性上)实现伪双向绑定。 #### 5.2.1.4 指令 Vue.js的指令(Directives)是带有`v-`前缀的特殊属性。指令属性的值预期是单个JavaScript表达式(`v-for`是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM上。 - **v-if**、**v-else-if**、**v-else**:用于条件性地渲染元素。 - **v-for**:基于一个数组来渲染一个列表。 - **v-show**:根据表达式之真假值,切换元素的`display` CSS属性。 - **v-on**:监听DOM事件,并在触发时执行一些JavaScript代码。简写为`@`。 - **v-pre**:跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。 - **v-cloak**:这个指令保持在元素上直到关联实例结束编译。和CSS规则如`[v-cloak] { display: none }`一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。 #### 5.2.1.5 事件处理 Vue.js允许你监听DOM事件,并在触发时执行JavaScript代码。监听事件可以使用`v-on`指令或`@`符号简写。 ```html <div id="app"> <!-- 使用v-on监听点击事件 --> <button v-on:click="greet">点击我</button> <!-- 简写形式 --> <button @click="greet">点击我</button> </div> <script> new Vue({ el: '#app', methods: { greet: function () { alert('Hello!'); } } }); </script> ``` 在Vue实例的`methods`选项中定义了`greet`方法,当按钮被点击时,该方法会被调用。 #### 5.2.1.6 生命周期钩子 Vue实例从创建到销毁的过程中,会触发一系列的生命周期钩子(也称为生命周期事件或生命周期回调)。这些钩子提供了在不同阶段执行代码的机会。 - **beforeCreate**:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 - **created**:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 - **beforeMount**:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。 - **mounted**:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。 - **...**(省略了其他生命周期钩子,如`beforeUpdate`、`updated`、`beforeDestroy`、`destroyed`等) 这些钩子允许我们在Vue实例的不同阶段执行自定义逻辑,比如数据加载、DOM操作等。 ### 结语 通过本章“5.2.1 基本用法”的学习,你应该已经对Vue.js的核心概念和基本用法有了深入的理解。从Vue实例的创建到模板语法的使用,再到数据绑定、指令、事件处理以及生命周期钩子的掌握,这些基础知识将为你后续学习更高级的Vue.js特性打下坚实的基础。记住,实践是检验真理的唯一标准,不妨动手尝试编写一些简单的Vue.js应用,以加深对这些概念的理解。
上一篇:
5.2 遍历对象
下一篇:
5.2.2 向对象中添加响应式属性
该分类下的相关小册推荐:
TypeScript和Vue从入门到精通(四)
VUE组件基础与实战
Vue源码完全解析
Vue3技术解密
Vue原理与源码解析
TypeScript和Vue从入门到精通(二)
TypeScript和Vue从入门到精通(一)
Vue.js从入门到精通(三)
移动端开发指南
Vue面试指南
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(五)