首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
10.1 注册自定义指令
10.1.1 全局自定义指令
10.1.2 局部自定义指令
10.2 钩子函数
10.3 绑定值的类型
10.3.1 绑定数值
10.3.2 绑定字符串
10.3.3 绑定对象字面量
11.1 注册组件
11.1.1 注册全局组件
11.1.2 注册局部组件
11.2 向子组件传递数据
11.2.1 Prop基本用法
11.2.2 数据验证
11.3 监听子组件事件
11.3.1 监听自定义事件
11.3.2 监听原生事件
11.4 插槽的使用
11.4.1 基础用法
11.4.2 编译作用域
11.4.3 默认内容
11.4.4 命名插槽
11.4.5 作用域插槽
11.5 混入
11.5.1 基础用法
11.5.2 选项合并
11.6 动态组件
11.6.1 动态组件的用法
11.6.2 缓存效果
12.1 什么是组合API
12.2 setup()函数
12.3 响应式API
12.3.1 reactive()方法
12.3.2 watchEffect()方法
12.3.3 ref()方法
12.3.4 computed()方法
12.3.5 watch()方法
12.4 生命周期钩子函数
12.5 使用ref获取DOM元素
13.1 单元素过渡
13.1.1 CSS过渡
13.1.2 过渡的类名
13.1.3 自定义过渡的类名
13.1.4 CSS动画
13.1.5 使用JavaScript钩子函数实现动画
13.2 多元素过渡
13.2.1 多元素过渡的用法
13.2.2 设置元素的key属性
13.2.3 过渡模式的设置
13.3 多组件过渡
13.4 列表过渡
14.1 什么是虚拟DOM
14.2 render()函数的使用
14.2.1 基本用法
14.2.2 h()函数
14.3 使用JavaScript代替模板功能
15.1 路由基础
15.1.1 引入Vue Router
15.1.2 基本用法
15.1.3 动态路由匹配
15.1.4 命名路由
15.2 编程式导航
15.3 嵌套路由
15.4 命名视图
15.5 高级用法
15.5.1 beforeEach钩子函数
15.5.2 scrollBehavior方法
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(三)
小册名称：Vue.js从入门到精通(三)
### 11.5.1 基础用法 在Vue.js的广阔世界中，掌握其基础用法是迈向精通之路不可或缺的一步。本章“基础用法”将深入浅出地介绍Vue.js的核心概念、基本语法以及如何在项目中应用这些基础知识来构建响应式的用户界面。通过本节的学习，你将能够利用Vue.js快速搭建起项目的基本框架，并理解其背后的工作原理。 #### 1. Vue.js简介 Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它设计之初就考虑到了易用性、灵活性和性能，使得开发者能够高效地开发出单页应用（SPA）。Vue.js的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。此外，Vue.js的生态系统还提供了丰富的官方路由、状态管理以及构建工具，帮助开发者构建复杂的应用。 #### 2. 安装与设置 ##### 2.1 直接在HTML中引入 对于小型项目或学习目的，你可以直接在HTML文件中通过`<script>`标签引入Vue.js。Vue.js的官方网站提供了不同版本的下载链接，包括开发版和生产版，你可以根据需要选择。 ```html <!-- 引入Vue.js --> <script src="https://unpkg.com/vue@next"></script> ``` 注意：随着Vue.js版本的更新，上述URL中的版本号可能需要调整以匹配最新的稳定版本。 ##### 2.2 使用npm或yarn安装 对于复杂的项目，推荐使用npm或yarn这样的包管理器来安装Vue.js及其相关依赖。这不仅可以方便地管理项目依赖，还能利用现代JavaScript的模块化特性。 ```bash # 使用npm安装 npm install vue@next # 或者使用yarn安装 yarn add vue@next ``` #### 3. 第一个Vue应用 接下来，我们将通过一个简单的例子来展示如何创建一个Vue应用。 ##### 3.1 HTML结构 首先，你需要在HTML文件中定义一个根元素，Vue将会挂载到这个元素上。 ```html <div id="app"> {{ message }} </div> ``` ##### 3.2 创建Vue实例 然后，使用Vue构造函数创建一个新的Vue实例，并通过`el`选项指定要挂载的元素，通过`data`选项定义实例的数据。 ```html <script> const app = Vue.createApp({ data() { return { message: 'Hello Vue!' } } }) app.mount('#app') </script> ``` 在这个例子中，Vue会渲染`{{ message }}`为`Hello Vue!`，并将其显示在浏览器中。 #### 4. 模板语法 Vue.js使用基于HTML的模板语法，允许你声明式地将DOM绑定至底层Vue实例的数据。 ##### 4.1 插值 - **文本插值**：使用`{{ }}`进行文本插值，数据会转换为纯文本。 - **原始HTML**：使用`v-html`指令来输出真正的HTML。注意：由于安全原因，仅当内容可信时才应使用。 ##### 4.2 指令 Vue.js中的指令（Directives）是带有`v-`前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（除了`v-for`）。 - **`v-bind`**：用于响应式地更新HTML属性。简写为`:`。 - **`v-model`**：在表单输入和应用状态之间创建双向数据绑定。 - **`v-on`**：用于监听DOM事件，并在触发时执行一些JavaScript。简写为`@`。 - **`v-if`、`v-else-if`、`v-else`**：根据表达式的真假值来条件性地渲染元素。 - **`v-for`**：基于一个数组来渲染一个列表。 #### 5. 计算属性和侦听器 ##### 5.1 计算属性 计算属性是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，才会重新求值。这使得它们非常适合用于执行复杂逻辑，同时保持模板的清晰和简洁。 ```javascript computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } ``` ##### 5.2 侦听器 侦听器允许你对数据的变化作出响应。当需要在数据变化时执行异步操作或开销较大的操作时，侦听器非常有用。 ```javascript watch: { // 侦听message属性的变化 message(newValue, oldValue) { console.log(`Message changed from ${oldValue} to ${newValue}`); } } ``` #### 6. 组件化开发 Vue.js鼓励通过可复用的组件来构建用户界面。每个Vue组件都包含了自己的模板、逻辑和样式，它们是Vue应用的基本构建块。 ##### 6.1 全局注册与局部注册 - **全局注册**：通过`Vue.component`方法创建的组件可以在任何新创建的Vue根实例的子组件的模板中使用。 - **局部注册**：组件也可以在实例/组件的`components`选项中局部注册，这样它们就只能在这个实例/组件的模板中使用。 ##### 6.2 组件间的通信 Vue.js提供了多种组件间通信的方式，包括props、自定义事件、插槽（slot）、Vuex等。 - **Props**：父组件向子组件传递数据。 - **自定义事件**：子组件向父组件发送消息。 - **插槽**：让父组件能够向子组件的模板中插入HTML结构，这是一种内容分发API。 - **Vuex**：对于复杂应用中的全局状态管理，Vuex是一个官方推荐的状态管理模式和库。 #### 7. 总结 通过本章的学习，你应该已经掌握了Vue.js的基础用法，包括如何安装与设置Vue项目、创建第一个Vue应用、使用模板语法进行数据绑定和事件处理、利用计算属性和侦听器处理复杂逻辑、以及组件化开发的基本概念。这些基础知识是进一步深入Vue.js学习的重要基石，也是构建高效、可维护Vue应用的关键。随着你对Vue.js理解的加深，你将能够利用更多高级特性和最佳实践来优化你的应用，提升用户体验。
上一篇：
11.5 混入
下一篇：
11.5.2 选项合并
该分类下的相关小册推荐：
Vue源码完全解析
TypeScript和Vue从入门到精通(三)
Vue3技术解密
Vue.js从入门到精通(四)
Vue.js从入门到精通(二)
TypeScript和Vue从入门到精通(四)
Vue面试指南
TypeScript和Vue从入门到精通(一)
VUE组件基础与实战
移动端开发指南
vuejs组件实例与底层原理精讲
TypeScript和Vue从入门到精通(二)
