首页
技术小册
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从入门到精通(三)
### 14.2.1 基本用法 在Vue.js的广阔世界中，掌握其基础用法是通往精通之路的必经之路。本章将深入解析Vue.js的基本用法，涵盖数据绑定、指令、组件等核心概念，旨在帮助读者构建坚实的基础，为后续的高级特性和最佳实践学习打下良好基础。 #### 14.2.1.1 数据绑定：响应式系统的核心 Vue.js的核心特性之一是其响应式的数据绑定系统。这一系统允许开发者以声明式的方式将数据渲染到DOM上，并且当数据变化时，视图会自动更新，无需手动操作DOM。Vue通过MVVM（Model-View-ViewModel）模式实现这一功能，其中ViewModel是Vue实例，它作为桥梁连接着Model（数据模型）和View（视图）。 **插值表达式** Vue.js使用基于HTML的模板语法，其中最直接的数据绑定方式是使用双大括号`{{ }}`作为插值表达式。这些表达式会被替换为对应数据对象上属性的值，当属性值变化时，插值处的内容也会自动更新。 ```html <div id="app"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` **v-bind 指令** 除了文本插值，Vue还提供了`v-bind`指令用于响应式地更新HTML属性。`v-bind`可以简写为`:`。使用它时，属性值会被当作JavaScript表达式来解析，并且当表达式的值变化时，对应的属性也会更新。 ```html <div id="app"> <a v-bind:href="url">Vue.js</a> <!-- 简写形式 --> <a :href="url">Vue.js</a> </div> <script> var app = new Vue({ el: '#app', data: { url: 'https://vuejs.org' } }) </script> ``` #### 14.2.1.2 指令：Vue的魔法 Vue.js提供了丰富的指令（Directives），它们是带有`v-`前缀的特殊HTML属性，用于在模板中添加响应式行为。这些指令是Vue模板的基石，它们使得开发者能够以声明式的方式将数据绑定到DOM上，同时处理用户输入和监听DOM事件。 **v-model** `v-model`是Vue.js中用于在表单输入和应用状态之间创建双向数据绑定的指令。它根据控件类型自动选取正确的方法来更新元素。对于文本输入框，`v-model`会监听`input`事件以更新数据；对于复选框和单选按钮，它会适当地更新`checked`属性。 ```html <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: '' } }) </script> ``` **v-on 指令** `v-on`用于监听DOM事件，并在触发时执行一些JavaScript代码。它可以简写为`@`。使用`v-on`时，可以传递一个方法名来指定事件处理函数，或者使用内联语句直接编写JavaScript代码。 ```html <div id="app"> <button v-on:click="greet">Greet</button> <!-- 简写形式 --> <button @click="greet">Greet</button> </div> <script> var app = new Vue({ el: '#app', methods: { greet: function () { alert('Hello, Vue!') } } }) </script> ``` **v-if、v-else-if、v-else 指令** 这些指令用于根据表达式的真假值来条件性地渲染元素。`v-if`指令会确保在条件为真时渲染元素，并在条件为假时销毁元素及其所有的子节点。`v-else-if`和`v-else`分别用于处理多个条件和默认情况。 ```html <div id="app"> <p v-if="type === 'A'">Type A</p> <p v-else-if="type === 'B'">Type B</p> <p v-else>Not A/B</p> </div> <script> var app = new Vue({ el: '#app', data: { type: 'A' } }) </script> ``` #### 14.2.1.3 组件：构建大型应用的基石 Vue.js的组件系统是其强大功能之一，它允许开发者将UI拆分成独立、可复用的部分，每个部分都包含自己的模板、逻辑和样式。组件系统是构建大型Vue应用的基础，通过组件，开发者可以高效地组织和管理代码，提高开发效率和可维护性。 **全局注册与局部注册** Vue.js允许通过`Vue.component()`进行全局注册组件，这样注册的组件就可以在Vue实例的模板中直接使用。此外，也可以在Vue实例的选项中通过`components`属性进行局部注册，这种方式注册的组件只能在当前Vue实例的模板中使用。 ```javascript // 全局注册 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 局部注册 var app = new Vue({ el: '#app', components: { 'another-component': { template: '<div>Another custom component!</div>' } } }) ``` **组件的props** props是父组件向子组件传递数据的一种方式。子组件通过定义props来声明它期望从父组件接收的数据。props是单向数据流的一部分，意味着子组件不能直接修改props的值，但可以通过事件向父组件发送信息以请求更新。 ```html <!-- 父组件 --> <div id="app"> <child-component :message="parentMessage"></child-component> </div> <script> Vue.component('child-component', { props: ['message'], template: '<span>{{ message }}</span>' }) var app = new Vue({ el: '#app', data: { parentMessage: 'Hello from parent' } }) </script> ``` #### 总结 通过本章的学习，我们深入了解了Vue.js的基本用法，包括数据绑定、指令以及组件系统等核心概念。这些基础知识是构建Vue.js应用的基石，掌握它们对于后续的深入学习至关重要。希望读者能够通过实践不断加深对这些概念的理解，并在实际项目中灵活运用，从而逐步提高自己的Vue.js开发能力。
上一篇：
14.2 render()函数的使用
下一篇：
14.2.2 h()函数
该分类下的相关小册推荐：
Vue源码完全解析
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(四)
VUE组件基础与实战
TypeScript和Vue从入门到精通(一)
vuejs组件实例与底层原理精讲
TypeScript和Vue从入门到精通(五)
vue项目构建基础入门与实战
Vue原理与源码解析
Vue.js从入门到精通(四)
TypeScript和Vue从入门到精通(三)
Vue面试指南
