首页
技术小册
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.4.1 Vue.js基础用法 在Vue.js的广阔世界中，掌握其基础用法是通往精通之路的基石。本章将深入探讨Vue.js的核心概念，包括实例的创建、模板语法、数据绑定、指令使用以及基本的组件化开发，帮助你从零开始构建Vue应用。 #### 11.4.1.1 初始化Vue实例 Vue.js应用的起点是创建一个新的Vue实例。Vue实例是Vue应用的根，它包含了应用的所有数据、模板、逻辑和生命周期钩子等。通过`new Vue()`构造函数可以创建一个Vue实例，并传入一个选项对象，该对象定义了Vue实例的行为。 ```javascript // 引入Vue库（假设已通过<script>标签引入Vue.js） // 创建一个Vue实例 new Vue({ el: '#app', // 挂载点，Vue实例将管理这个DOM元素及其子元素 data: { message: 'Hello Vue!' // 实例的数据对象 }, methods: { // 实例的方法 greet: function () { alert(this.message); } } }); ``` 在上述代码中，`el`属性指定了Vue实例的挂载目标（一个DOM元素），`data`属性包含了Vue实例的响应式数据，`methods`属性则定义了实例的方法。通过`this`关键字，可以在Vue实例的方法中访问到`data`中定义的属性。 #### 11.4.1.2 模板语法 Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue模板的语法包括插值表达式、指令、过滤器等。 - **插值表达式**：用于在模板中输出数据。使用双大括号`{{ }}`包裹的表达式会被Vue替换为相应的数据值。 ```html <div id="app"> <p>{{ message }}</p> </div> ``` - **指令**：带有`v-`前缀的特殊属性，用于在模板中添加响应式逻辑。例如，`v-bind`用于响应式地更新HTML属性，`v-model`用于在表单输入和应用状态之间创建双向数据绑定。 ```html <input v-model="message" placeholder="edit me"> ``` - **文本绑定**：除了插值表达式外，还可以使用`v-text`和`v-html`指令进行文本和HTML内容的绑定。但注意，`v-html`存在XSS风险，需谨慎使用。 ```html <span v-text="rawHtml"></span> <!-- 或 --> <div v-html="rawHtml"></div> ``` #### 11.4.1.3 数据绑定与响应性 Vue.js的核心特性之一是数据的响应性。当Vue实例的数据发生变化时，Vue会自动更新DOM以反映最新的数据状态。这一特性是通过Vue的响应式系统实现的，它基于ES5的`Object.defineProperty`（或在Vue 3中使用的Proxy）来拦截对象属性的访问和修改，从而触发依赖的更新。 - **响应式数据**：在Vue实例的`data`选项中定义的数据都是响应式的。Vue会将这些数据转换为getter/setter，从而能够追踪和响应数据的变化。 - **计算属性**：使用`computed`选项可以定义计算属性。计算属性是基于它们的依赖进行缓存的，只有当相关依赖发生改变时才会重新求值。 ```javascript computed: { reversedMessage: function () { return this.message.split('').reverse().join(''); } } ``` - **侦听器**：`watch`选项允许你响应数据的变化来执行异步操作或开销较大的操作。 ```javascript watch: { message: function (newVal, oldVal) { console.log(`Message changed from ${oldVal} to ${newVal}`); } } ``` #### 11.4.1.4 指令详解 Vue.js提供了多种内置指令，用于在模板中添加响应式逻辑。这里简要介绍几个常用指令。 - **`v-bind`**：动态地绑定一个或多个特性，或一个组件prop到表达式。 ```html <a v-bind:href="url">...</a> <!-- 简写 --> <a :href="url">...</a> ``` - **`v-model`**：在表单输入和应用状态之间创建双向数据绑定。 ```html <input v-model="message"> ``` - **`v-on`**：监听DOM事件，并在触发时执行一些JavaScript代码。 ```html <button v-on:click="greet">Greet</button> <!-- 简写 --> <button @click="greet">Greet</button> ``` - **`v-if`、`v-else-if`、`v-else`**：根据表达式的真假条件渲染元素。 ```html <p v-if="seen">Now you see me</p> <p v-else>Now you don't</p> ``` - **`v-for`**：基于一个数组来渲染一个列表。 ```html <ul> <li v-for="(item, index) in items" :key="index"> {{ item.text }} </li> </ul> ``` #### 11.4.1.5 组件化开发 Vue.js鼓励组件化开发，即把页面拆分成多个独立的、可复用的组件。每个Vue组件都包含自己的模板、逻辑和样式，通过组件间的组合可以构建出复杂的页面应用。 - **注册组件**：全局注册和局部注册。全局注册的组件可在任何新创建的Vue根实例的子组件的模板中使用，而局部注册的组件只能在注册它的父组件的模板中使用。 ```javascript // 全局注册 Vue.component('my-component', { // 选项... }); // 局部注册 var App = new Vue({ el: '#app', components: { 'my-component': { // 选项... } } }); ``` - **组件间通信**：包括父子组件通信（通过props和自定义事件）、兄弟组件通信（通过事件总线或Vuex等状态管理库）等。 - **props**：父组件通过props向子组件传递数据。 - **自定义事件**：子组件通过触发自定义事件向父组件发送消息。 ```javascript // 子组件 this.$emit('update:message', newValue); // 父组件 <my-component @update:message="handleMessage"></my-component> ``` #### 结语 通过本章的学习，你应已掌握了Vue.js的基础用法，包括Vue实例的创建、模板语法、数据绑定与响应性、常用指令的使用以及组件化开发的基本概念。这些是构建Vue.js应用不可或缺的基石。随着你对Vue.js的进一步探索，你将能够利用更高级的功能和技巧来开发复杂、高效且可维护的应用。继续前行，在Vue.js的旅程中发现更多精彩！
上一篇：
11.4 插槽的使用
下一篇：
11.4.2 编译作用域
该分类下的相关小册推荐：
TypeScript和Vue从入门到精通(五)
Vue3技术解密
TypeScript和Vue从入门到精通(三)
vue项目构建基础入门与实战
Vue面试指南
TypeScript和Vue从入门到精通(二)
TypeScript和Vue从入门到精通(一)
Vue.js从入门到精通(二)
Vue.js从入门到精通(四)
移动端开发指南
Vue.js从入门到精通(一)
VUE组件基础与实战
