首页
技术小册
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从入门到精通(三)
### 15.1.2 基本用法 在Vue.js的广袤领域中，掌握其基本用法是每位开发者从入门迈向精通的必经之路。本章“15.1.2 基本用法”将深入剖析Vue.js的核心概念与日常开发中频繁使用的功能，帮助读者构建坚实的Vue应用基础。我们将从Vue实例的创建、模板语法、数据绑定、指令使用、事件处理以及组件的基本概念等方面展开讲解。 #### 1. Vue实例的创建 Vue.js应用的起点是创建一个新的Vue实例。这个实例是Vue应用的根，包含了应用的所有数据和逻辑。Vue实例通过`new Vue({...})`的方式创建，其中传入的对象包含了应用的数据（`data`）、模板（`template`）、挂载点（`el`或`mount`）、方法等选项。 ```javascript // 示例：创建一个简单的Vue实例 new Vue({ el: '#app', // 指定挂载点 data: { message: 'Hello, Vue.js!' // 应用数据 } }); // HTML 部分 <div id="app"> {{ message }} </div> ``` 在这个例子中，Vue实例被挂载到ID为`app`的DOM元素上，`data`属性中的`message`数据被渲染到该元素的模板中。 #### 2. 模板语法 Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。模板语法包括插值（文本插值、原始HTML）、指令（如`v-bind`、`v-model`、`v-on`等）和过滤器。 - **文本插值**：使用双大括号`{{ }}`进行文本插值，可以显示Vue实例中的数据。 - **原始HTML**：使用`v-html`指令可以输出真正的HTML，但需注意防止XSS攻击。 - **指令**：Vue.js的指令以`v-`开头，为模板提供强大的功能。如`v-bind`用于响应式地更新HTML属性，`v-model`在表单输入和应用状态之间创建双向数据绑定。 ```html <div id="app"> <p>{{ message }}</p> <div v-html="rawHtml"></div> <input v-model="inputValue" placeholder="Edit me"> </div> <script> new Vue({ el: '#app', data: { message: 'Vue模板语法', rawHtml: '<span style="color: red">这是红色的文字</span>', inputValue: '' } }); </script> ``` #### 3. 数据绑定 Vue.js的响应式系统允许应用的数据状态与DOM保持同步。当Vue实例的数据变化时，视图会自动更新以反映这些变化，这就是所谓的“数据绑定”。Vue使用Object.defineProperty（在Vue 3中则使用Proxy）来实现这一功能。 ```javascript // 当message变化时，绑定的DOM也会自动更新 new Vue({ el: '#app', data: { message: '初始消息' }, created() { setTimeout(() => { this.message = '更新后的消息'; // 数据变化，视图自动更新 }, 1000); } }); ``` #### 4. 指令的使用 Vue.js提供了丰富的内置指令，用于在模板中执行各种操作。以下是一些常用指令的简介： - **v-bind**：用于动态地更新HTML属性，如`v-bind:href="url"`可以简写为`:href="url"`。 - **v-model**：在表单输入和应用状态之间创建双向数据绑定。 - **v-on**：监听DOM事件，并在触发时执行一些JavaScript代码，可以简写为`@`符号，如`v-on:click="handleClick"`可简写为`@click="handleClick"`。 - **v-if**、**v-else-if**、**v-else**：根据表达式的真假值来条件性地渲染元素。 - **v-show**：根据表达式的真假值来切换元素的CSS属性`display`。 - **v-for**：基于源数据多次渲染元素或模板块。 #### 5. 事件处理 在Vue中，处理用户输入和事件是非常直接的。你可以使用`v-on`指令监听DOM事件，并在触发时执行一些JavaScript代码。`v-on`可以简写为`@`。 ```html <template> <div> <button @click="increment">点击我</button> <p>计数: {{ count }}</p> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } } } </script> ``` #### 6. 组件化开发 Vue.js鼓励使用组件化的方式来构建应用。组件是Vue.js最强大的功能之一，它们允许你将UI分割成可复用的独立、可复用的部分，并具有各自的逻辑和样式。 - **注册组件**：全局注册和局部注册。 - **组件选项**：包括`data`、`computed`、`methods`、`watch`、`props`等，用于定义组件的状态、计算属性、方法、监听器以及外部传入的属性。 - **父子组件通信**：通过`props`向下传递数据，通过自定义事件`$emit`向上通信，以及使用Vuex或Provide/Inject进行跨层级通信。 ```vue <!-- ChildComponent.vue --> <template> <div>{{ msg }}</div> </template> <script> export default { props: ['msg'] } </script> <!-- ParentComponent.vue --> <template> <div> <child-component :msg="parentMessage" @custom-event="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: '来自父组件的消息' }; }, methods: { handleCustomEvent() { console.log('子组件触发了自定义事件'); } } } </script> ``` ### 结语 通过本章“15.1.2 基本用法”的学习，我们掌握了Vue.js的核心概念和基本用法，包括Vue实例的创建、模板语法的使用、数据绑定、指令的灵活应用、事件处理以及组件化开发的基础。这些是构建任何Vue.js应用所必需的基础知识，为后续深入学习Vue.js的高级特性和最佳实践打下了坚实的基础。随着实践的深入，你将逐渐体会到Vue.js带来的开发效率和乐趣，成为Vue.js领域的精通者。
上一篇：
15.1.1 引入Vue Router
下一篇：
15.1.3 动态路由匹配
该分类下的相关小册推荐：
Vue3技术解密
Vue原理与源码解析
TypeScript和Vue从入门到精通(二)
TypeScript和Vue从入门到精通(三)
Vue源码完全解析
vue项目构建基础入门与实战
TypeScript和Vue从入门到精通(五)
移动端开发指南
Vue面试指南
TypeScript和Vue从入门到精通(一)
Vue.js从入门到精通(一)
Vue.js从入门到精通(四)
