样式冲突 Vue多组件开发时，组件中的CSS样式默认是全局使用的。例如在A.vue这个组件中定义的样式，也会在B.vue这个组件中生效。 而当项目中使用的组件越来越多时，这种全局通过的CSS样式的方式势必会影响整个项目，导致样式冲突。例如A.vue和B.vue都用了.demo这个样式，那么在引入和使用组件时，会造成样式的冲突。相同选择器的样式，究竟是哪个组件中的样式生效？ Vue在引入组件.vue时，如果存在相同的样式导致的冲突，后引入的组件会覆盖先引入的组件中相同的样式。例如A.vue和B.vue都用了.demo这个样式： 1import A from './components/A.vue' 2import B from...
Roamverse · Lin
Vue插件主要用于增强Vue。 定义插件 在Vue中，插件的本质是一个包含install()方法的对象。 install()方法： 参数1：Vue原型对象. 参数2 ~ n：第二个参数开始之后的参数（包括第二个）是插件使用者传递的数据。 定义一个简单的插件： 1/** 2 * plugins.js 3 * Vue 插件 4 */ 5 6export const myPlugin = { 7 install(Vue) { 8 console.log('Hello my plugin!'); 9 console.log(Vue); // 获取 Vue 原型对象 10 11 /* 12 可以在插件中使用 Vue 原型对象定义一些全局的配置...
混入（mixin）是指将多个组件重复的、可共用的配置选项提取成一个混入对象，然后在这些组件中对这些配置选项进行重用。 局部混入 局部混入是指在组件或特定的Vue实例中引入通用的配置对象。 例如： 1/** 2 * mixin.js 3 * 混入配置对象 4 */ 5 6// 组件中的配置选项基本上都能在 mixin 中使用 7export const mixin1 = { 8 methods: { 9 showName() { 10 alert(this.name) 11 } 12 }, 13 mounted() { 14 console.log('Hello mixin1!'); 15 }, 16} 17 18export...
在Vue中，父组件可以往子组件中传递一些属性值。而子组件需要使用props配置项定义这些要从父组件中获取的数据。 使用props配置项，可以让该组件的标签在被使用时，通过组件标签属性将值传入组件中。 例如： 1<!-- SiteUser.vue --> 2<template> 3 <div> 4 <h2>姓名：{{name}}</h2> 5 <h2>年龄：{{age}}</h2> 6 <h2>性别：{{sex}}</h2> 7 </div> 8</template> 9<script> 10export default { 11 name: 'SiteUser', 12 // 声明需要接收的属性 13 props: [ 14...
ref 属性 在Vue的模板中可以通过为元素或子组件添加ref属性（如ref="elementRefValue"）来告诉Vue实例（或组件实例）要获取该元素。例如： 1<h1 v-text="msg" ref="title"></h1> <!-- 获取Html内置标签元素 --> 2<MySite ref="site"/> <!-- 获取Vue组件 --> 在Vue中，ref属性被用来给元素或子组件注册引用信息。 然后在Vue实例或组件实例中，通过this.$refs.elementRefValue来获取该元素或子组件的对象。例如： 1this.$refs.title // 获取真实DOM元素 2this.$refs.site...
单文件组件 Vue单文件组件是指使用由Vue定义的.vue格式的文件。.vue文件模板如下： 1<!-- Vue 只能包含以下三种标签 --> 2 3<!-- 组件的结构 --> 4<template> 5 <!-- ... --> 6</template> 7 8<!-- 组件交互相关的代码（数据、方法等等） --> 9<script> 10 export default { 11 // ... 12 }; 13</script> 14 15<!-- 组件的样式 --> 16<style> 17 /* ... */ 18</style> 其中： <template>：用于定义组件的结构。相当于组件配置中的template配置项。...
组件是指实现应用中局部功能代码（html、css、js等）和资源（图片、音频、视频等）的集合。 传统的Web应用存在以下缺点： 依赖关系混乱，不易于维护。 代码复用率不高。 CSS文件可以通过外部引入，不存在复用率不高的问题。JS的模块化解决了JS代码复用率不高的问题。而Html想要复用却不是那么容易。 模块化应用：当应用中的JS都以区分模块的形式来编写，那么这个应用就是一个模块化的应用。 组件化应用：当应用中的功能都是以多组件的方式来编写，那么这个应用就是一个组件化的应用。 使用Vue组件可以扩展HTML元素，封装可重用的代码，解决了上述问题。 使用组件系统可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象...
Vue生命周期指的是Vue实例或Vue组件实例在创建时经历的一系列初始化步骤。 在这个过程中Vue为用户提供了一些可供用户自定义的函数，即生命周期回调函数。这些函数又称为生命周期函数或生命周期钩子。 生命周期图示 Vue组件的生命周期图示如下： 下图是尚硅谷天禹所给的有关Vue生命周期的解释： 生命周期函数 生命周期函数本质是Vue在生命周期过程中的某些关键时刻帮用户调用的一些特殊名称的函数。 生命周期函数的名字不可更改，但函数的具体内容由程序员根据需求编写。 生命周期函数中的this指向的是当前的Vue实例或当前组件的实例对象。 下方代码演示了Vue生命周期函数： 1<div id="app"> 2 <!-- <h2...
数据代理是指通过一个对象代理另一个对象中属性的（读/写）操作。 数据代理的原理 数据代理可以通过Object.defineProperty()实现。在Vue中，很多技术的实现都使用到了Object.defineProperty()这个方法。 Object.defineProperty()的用法如下所示： 1let person = { 2 name: '张三', 3 sex: '男', 4 // age: 18, 5} 6 7/** 8 * 使用 Object.defineProperty() 给对象添加属性 9 * 1. 参数1：要添加属性的对象 10 * 2. 参数2：要给对象添加的属性名称 11 * 3. 参数3：要添加的属性...
文本插值 数据绑定最常见的形式就是文本插值。 在HTML标签体中，使用两个花括号{{ }}将JS表达式引起来。文本插值含义是将JS表达式的结果作为文本显示到页面中；并不是指JS表达式的结果为文本。 插值表达式的语法如下： 1{{expression}} 其中，expression将作为JS表达式去解析并执行。示例如下： 1<div id="app"> 2 <h1>Hello, {{name}}<!-- 插值表达式 -->!</h1> 3</div> 4 5<script type="text/javascript"> 6 new Vue({ 7 el: '#app', 8 data: { 9 name: 'Vue.js' 10 }...