河南金建建设集团网站,桂林建设银行招聘网站,复刻手表网站,摄影网站的建设的论文一#xff1a;Vue 初阶
1.1 组件自定义事件
在 Vue 中#xff0c;组件间通过自定义事件进行通信是一种常见的模式。自定义事件允许子组件向父组件发送消息#xff0c;也可以在组件内部进行事件的绑定、触发和解绑。让我们详细讲解这些知识点。
1.1.1 组件自定义事件
在 …一Vue 初阶
1.1 组件自定义事件
在 Vue 中组件间通过自定义事件进行通信是一种常见的模式。自定义事件允许子组件向父组件发送消息也可以在组件内部进行事件的绑定、触发和解绑。让我们详细讲解这些知识点。
1.1.1 组件自定义事件
在 Vue 中自定义事件是指子组件通过 $emit 方法触发父组件通过 v-on 监听并响应的一种事件机制一种组件间通信的方式适用于子组件 父组件 (传递数据)
1.1.1.1触发自定义事件
在子组件中使用 $emit 方法来触发自定义事件。例如Student 组件中的 sendStudentlName 方法通过 $emit 触发了一个名为 atguigu 的自定义事件并传递了一些参数。
sendStudentlName(){this.$emit(atguigu, this.name, 666, 888, 900)
}1.1.1.2. 监听自定义事件
在父组件中通过 v-on 或简写 来监听子组件触发的自定义事件。例如假设 App 父组件包含了一个 Student 子组件并监听了子组的 atguigu 事件。
templatedivStudent atguiguhandleAtguiguEvent ///触发了名为 atguigu 的自定义事件时父组件将调用名为 handleAtguiguEvent 的方法来处理该事件。/div
/templatescript
export default {methods: {handleAtguiguEvent(name, num1, num2, num3) {console.log(Received event from Student component:, name, num1, num2, num3);}}
}
/script组件上也可以绑定原生DOM事件需要使用.native修饰符
1.1.1.3. 解绑自定义事件
Vue 提供了 $off 方法用于解绑自定义事件。 解绑特定的事件 在子组件中可以使用 this.$off(event-name) 解绑特定的事件。 unbind(){this.$off(atguigu); // 解绑单个事件
}解绑多个事件 unbind(){this.$off([atguigu, demo]); // 解绑多个事件
}解绑所有事件 unbind(){this.$off(); // 如果不传入参数则会解绑所有自定义事件。
}1.1.2 组件销毁与事件失效
Vue 组件销毁时其所有自定义事件也会失效。在 Student 组件中使用 this.$destroy() 方法可以销毁当前组件实例这将导致该组件的所有自定义事件失效即无法再触发和响应。
death(){this.$destroy(); // 销毁当前Student组件的实例销毁后所有自定义事件失效。
}1.2 全局事件总线
全局事件总线是 一种组件间通信的方式适用于任意组件间通信 在Vue中事件总线是一种通信机制允许不同组件之间进行通信。Vue实例提供了一个事件系统可以通过$on方法监听事件通过$emit方法触发事件通过$off方法解绑事件监听器。
首先在Vue实例上创建一个事件总线
const bus new Vue();// 将事件总线挂载到Vue原型上这样所有组件都可以访问到它
Vue.prototype.$bus bus;然后在任何组件中你可以通过$bus.$on来监听事件通过$bus.$emit来触发事件
// 在组件A中监听事件
this.$bus.$on(my-event, (data) {console.log(Received data:, data);
});// 在组件B中触发事件
this.$bus.$emit(my-event, { message: Hello world! });在以上示例中组件A监听了my-event事件组件B触发了my-event事件并传递了一个包含消息的对象。当事件被触发时组件A中的回调函数会被调用打印出接收到的数据。
要解绑事件监听器可以使用$off方法。在组件销毁或不需要监听事件时最好手动解绑事件以避免内存泄漏。
// 在组件销毁时解绑事件监听器
beforeDestroy() {this.$bus.$off(my-event);
}通过以上方式你可以在Vue中实现事件总线的功能并且可以确保在不需要时正确地解绑事件监听器。
1.3 消息订阅与发布
消息订阅与发布Publish/SubscribePub/Sub是一种常用的软件架构模式用于组件间通信
在消息订阅与发布模式中有以下几个重要的角色和概念
发布者Publisher负责发送消息。订阅者Subscriber接收和处理特定类型的消息。主题Topic用于定义消息的类型或名称订阅者可以根据主题进行订阅。消息Message发布者发送的数据或事件。
1.3.1 详细步骤
安装 pubsub-js
首先通过 npm i pubsub-js 安装 PubSub.js这是一个常用的 JavaScript 发布/订阅库。
引入并使用
在需要使用的文件中通过 import pubsub from pubsub-js 导入 PubSub.js。
消息订阅
订阅者例如组件 A可以通过 pubsub.subscribe(topicName, callback) 来订阅特定的主题topic。当发布者发布与该主题相关的消息时订阅者的回调函数callback将被调用并接收到消息。
示例代码
methods: {demo(data) {// 处理接收到的数据console.log(Received data:, data);}
},
mounted() {// 订阅主题 xxx并指定回调函数为 this.demothis.pid pubsub.subscribe(xxx, this.demo);
}消息发布
发布者可以通过 pubsub.publish(topicName, data) 来发布特定主题的消息并将数据data传递给所有订阅了该主题的订阅者。
示例代码
// 在某处发布名为 xxx 的主题并发送数据
pubsub.publish(xxx, { message: Hello! });取消订阅
为了避免内存泄漏或意外的消息处理建议在组件销毁前取消订阅。通过 pubsub.unsubscribe(pid) 取消之前设置的订阅。
示例代码
beforeDestroy() {// 在组件销毁前取消订阅pubsub.unsubscribe(this.pid);
}示例解释
以上示例展示了如何在 Vue.js 组件中使用 PubSub.js 实现消息订阅与发布
当组件 A 的 mounted 钩子函数执行时它订阅了名为 ‘xxx’ 的主题并指定了 this.demo 作为回调函数。在其他任何地方可能是另一个组件或模块通过 pubsub.publish(xxx, data) 发布 ‘xxx’ 主题的消息并传递数据 data。一旦消息发布订阅者即组件 A的 demo 方法将被调用接收并处理消息中的数据。在组件 A 销毁之前通过 beforeDestroy 钩子取消订阅以确保在组件销毁后不再接收或处理来自该主题的消息。
这种模式的优势在于它使不同模块之间的通信更加松散耦合模块间不直接依赖于彼此而是通过订阅和发布消息进行通信从而提高了系统的可扩展性和灵活性。
1.4 nextTick
在 Vue.js 中this.$nextTick 是一个异步方法它接收一个回调函数作为参数。它的作用是在下一次 DOM 更新周期结束后执行指定的回调函数。
通常情况下Vue 在更新 DOM 时是异步执行的也就是说当你修改了数据后Vue 并不会立即更新 DOM而是将更新放入一个队列中在适当的时机统一进行 DOM 的更新。而this.$nextTick 就提供了一种方式让你能够在 Vue 完成 DOM 更新后执行一些操作。
举个例子在你修改了某个数据后可能需要获取到更新后的 DOM 元素的一些信息或者一些 DOM 操作但是直接在数据修改后获取可能会得到更新前的 DOM 状态这时候就可以利用this.$nextTick 来确保你的操作在下一次 DOM 更新后执行。
下面是一个示例代码
// 在某个方法中修改数据
changeData() {this.message Updated message; // 修改数据this.$nextTick(() {// 在下一次 DOM 更新后执行的操作const element document.getElementById(someElement);console.log(Updated DOM:, element.innerText);});
}在上面的代码中changeData 方法中先修改了 message 的值然后在this.$nextTick 方法中传入了一个回调函数。这个回调函数会在下一次 DOM 更新后被调用在这个时候你可以放心地获取到更新后的 DOM 状态。
需要注意的是this.$nextTick 方法是异步执行的所以不能保证回调函数的执行顺序。如果需要确保多个回调函数的执行顺序可以在每个回调函数中再次使用 this.$nextTick。
1.5 Vue封装的过度与动画
过渡与动画的作用是让元素在插入、更新或移除时能够以平滑的动画效果呈现出来增强用户体验。通过 Vue 提供的 transition 组件你可以轻松地实现元素的渡效果和动画效果。
1.5.1 详细步骤
准备样式
首先你需要准备好过渡或动画效果所需的样式其中包括
元素进入时的样式类名 v-enter表示元素进入时的起点状态。v-enter-active表示元素进入过程中的状态。v-enter-to表示元素进入时的终点状态。 元素离开时的样式类名 v-leave表示元素离开时的起点状态。v-leave-active表示元素离开过程中的状态。v-leave-to表示元素离开时的终点状态。
使用 transition
将需要过渡或动画的元素使用 transition 包裹起来并配置 name 属性来指定样式类名的前缀。
transition namehelloh1 v-showisShow你好啊/h1
/transition在上面的例子中namehello 表示过渡或动画效果所需的样式类名的前缀为 hello。 备注 如果需要对多个元素同时进行过渡或动画可以使用 transition-group并为每个元素指定唯一的 key 值。每个过渡或动画效果都会在适当的时机自动添加和移除对应的样式类名从而实现动态的过渡效果。
示例代码
假设我们要实现一个元素在显示和隐藏时的淡入淡出效果
templatedivbutton clicktoggle切换显示/buttontransition namefadeh1 v-showisShow你好啊/h1/transition/div
/templatescript
export default {data() {return {isShow: false};},methods: {toggle() {this.isShow !this.isShow;}}
};
/scriptstyle
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
/style在上面的例子中当点击按钮时isShow 的值会切换从而触发元素的显示和隐藏。同时transition 标签中的 namefade 属性表示使用了名为 fade 的样式类名前缀。在样式部分定义了 .fade-enter-active、.fade-leave-active、.fade-enter 和 .fade-leave-to 这几个类来实现淡入淡出的过渡效果。
1.6 插槽
在 Vue 中插槽是一种组件间通信的机制允许父组件向子组件传递 HTML 结构或数据并在子组件中进行展示或处理。Vue 中的插槽分为默认插槽、具名插槽和作用域插槽三种类型用于不同的场景。
默认插槽
默认插槽是最简单的一种插槽形式。父组件可以在子组件的标签中插入 HTML 结构或文内容而子组件通过 slot 标签定义插槽的位置用来展示父组件传递过来的内容。
示例代码
!-- 父组件 --
CategorydivHTML 结构1/div
/Category!-- 子组件 --
templatedivslot插槽默认内容.../slot/div
/template具名插槽
具名插槽允许父组件将内容传递给子组件的指定位置可以同时存在多个具名插槽。在父组件中通过 slot 属性指定插槽的名称在子组件中通过 slot 标签的 name 属性匹配对应的插槽名称。
示例代码
!-- 父组件 --
Categorytemplate slotcenterdivHTML 结构1/div/templatetemplate v-slot:footerdivHTML 结构2/div/template
/Category!-- 子组件 --
templatedivslot namecenter插槽默认内容.../slotslot namefooter插槽默认内容.../slot/div
/template作用域插槽
作用域插槽允许父组件向子组件传递数据但根据数据生成的结构由子组件的使用者父组件决定。在父组件中通过 template 标签的 scope 或 slot-scope 属性声明作用域变量在子组件中通过 slot 标签的 name 属性接收作用域变量并根据数据结构进行渲染。
示例代码
!-- 父组件 --
Categorytemplate scopescopeDataulli v-forg in scopeData.games :keyg{{ g }}/li/ul/template
/Category!-- 子组件 --
templatedivslot :gamesgames/slot/div
/templatescript
export default {name: Category,data() {return {games: [红色警戒, 穿越火线, 劲舞团, 超级玛丽]}},
}
/script通过插槽机制父组件和子组件之间可以实现更灵活的交互使得组件的复用性和扩展性得到了增强。
二 Vuex
Vuex 是一种集中式状态管理工具用于管理应用中的共享状态。它适用于需要多个组件共享数据的场景可以让组件之间更方便地进行通信和状态管理。
2.1 Vuex 基础
Vuex 将应用的共享状态抽取出来以一个全局单例模式管理。它包含了以下几个核心概念 State状态即应用中需要共享的数据存储在 Vuex 的状态树中可以通过 $store.state 访问。 Getters获取器用于从状态树中派生出一些状态类似于计算属性可以通过 $store.getters 访问。 Mutations变更提交 mutation 是唯一改变状态的方式每个 mutation 都有一个字符串类型的事件类型和一个回调函数通过 $store.commit 提交。 Actions动作类似于 mutations但是可以提交异步操作通过 $store.dispatch 分发。 Modules模块允许将 store 分割成模块每个模块拥有自己的 state、getters、mutations、actions。 何时使用
当应用中存在多个组件需要共享状态时可以考虑使用 Vuex。它可以帮助管理这些共享状态使得组件之间的通信更加简单明了。
搭建 Vuex 环境
创建文件src/store/index.js // 引入 Vue 核心库import Vue from vue// 引入 Vueximport Vuex from vuex// 应用 Vuex 插件Vue.use(Vuex)// 准备 actions 对象——响应组件中用户的动作const actions {}// 准备 mutations 对象——修改 state 中的数据const mutations {}// 准备 state 对象——保存具体的数据const state {}// 创建并暴露 storeexport default new Vuex.Store({actions,mutations,state})在 main.js 中创建 Vue 实例时传入 store 配置项 // 引入 storeimport store from ./store// 创建 Vue 实例new Vue({el: #app,render: h h(App),store})基本使用
初始化数据、配置 actions、配置 mutations操作文件 store.js // 引入 Vue 核心库import Vue from vue// 引入 Vueximport Vuex from vuex// 引用 VuexVue.use(Vuex)const actions {// 响应组件中加的动作jia(context, value) {context.commit(JIA, value)},}const mutations {// 执行加JIA(state, value) {state.sum value}}// 初始化数据const state {sum: 0}// 创建并暴露 storeexport default new Vuex.Store({actions,mutations,state,})组件中读取 Vuex 中的数据$store.state.sum 组件中修改 Vuex 中的数据$store.dispatch(action中的方法名, 数据) 或 $store.commit(mutations中的方法名, 数据) 备注若没有网络请求或其他业务逻辑组件中也可以越过 actions即不写 dispatch直接编写 commit。 2.2 Getter 和 4 个 Map方法
2.2.1 Getter 方法
在 Vuex 中Getter 方法用于从 store 中获取状态并可以对获取的进行一些加工处理。Getter 方法可以看作 store 的计算属性当需要从 store 中派生出一些状态时可以使用 Getter。
使用方式
在 Vuex 的 store 中通过配置 getters 对象来定义 Getter 方法。Getter 方法收 state 作为第一个参数可以通过 $store.getters 访问。
示例代码
// store.jsimport Vue from vue
import Vuex from vuexVue.use(Vuex)const state {sum: 0
}const getters {// Getter 方法计算 sum 的十倍bigSum(state) {return state.sum * 10}
}export default new Vuex.Store({state,getters
})接着在组件中可以通过 $store.getters.bigSum 来获取并使用这个 Getter 方法返回的值。
!-- MyComponent.vue --templatedivpSum: {{ $store.state.sum }}/ppBig Sum: {{ $store.getters.bigSum }}/p/div
/templatescript
export {// ...
}
/script2.2.2 mapState、mapGetters、mapActions、mapMutations 方法
这些方法是 Vuex 提供的辅助函数可以简化在组件中与 Vuex 进行交互的代码。它们可以帮助将 Vuex 中的 state、getters、actions 和 mutations 映射到组件的计算属性或方法中。
2.2.2.1 mapState 方法
用于帮助我们将 Vuex 中的 state 映射为组件的计算属性。
import { mapState } from vuexexport default {computed: {// 将 state 中的 sum 映射为计算属性 sum...mapState([sum])}
}2.2.2.2 mapGetters 方法
用于帮助我们将 Vuex 中的 getters 映射为组件的计算属性。
import { mapGetters } from vuexexport default {computed: {// 将 getters 中的 bigSum 映射为计算属性 bigSum...mapGetters([bigSum])}
}2.2.2.3 mapActions 方法
用于帮助我们将 Vuex 中的 actions 映射为组件的方法。
import { mapActions } from vuexexport default {methods: {// 将 actions 中的 increment 映射为组件的方法 increment...mapActions([increment])}
}2.2.2.4 mapMutations 方法
用于帮助我们将 Vuex 中的 mutations 映射为组件的方法。
import { mapMutations } from vuexexport default {methods: {// 将 mutations 中的 increment 映射为组件的方法 increment...mapMutations([increment])}
}这些辅助函数使得在组件中使用 Vuex 更加简洁和便捷可以直接通过映射后的计算属性或方法访问 Vuex 中的状态和操作。
2.3 模块化命名空间
在 Vue 中模块化和命名空间是为了更好地组织和管理 Vuex 中的状态、操作和数据而引入的概念。
2.3.1 模块化
模块化是指将 Vuex 的 store 拆为多个模块每个模块可以包含自己的 state、getters、mutations 和 actions。
这样做的目的是将大型的 Vuex 应用拆分为更小、更易于维护的模块每个模块可以专注于处理特定领域的状态和操作提高代码的可读性和可维护性。
在 Vuex 中可以通过在 store 的 modules 选项中注册模块来实现模块化示例代码
const moduleA {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const store new Vuex.Store({modules: {moduleA,moduleB}
})在组件中使用模化后的 Vuex需要在读取 state、getters、dispatch actions 和 commit mutations 时指定所属的模块。
2.3.2 命名空间
命名空间是模块化之后的一个概念它用于区分不同模块中的 state、getters、mutations 和 actions避免命名冲突。在使用命名空间之前Vuex 中的所有模块都是在全局命名空间下的容易造成命名冲突和混乱。
开启命名空间后每个模块的 state、getters、mutations 和 actions 将只能在自己的命名空间下访问需要通过模块名来访问在 Vuex 中可以通过在模块配置中设置 namespaced: true 来开启命名空间。
示例代码
const moduleA {namespaced: true,state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const store new Vuex.Store({modules: {moduleA}
})在组件中访问命名空间模块的 state、getters、dispatch actions 和 commit mutations 时需要在调用时指定所属的模块。
// 访问 state
this.$store.state.moduleA.stateName// 访问 getters
this.$store.getters[moduleA/getterName]// 调用 actions
this.$store.dispatch(moduleA/actionName, payload)// 提交 mutations
this.$store.commit(moduleA/mutationName, payload)通过模块化和命名空间可以更好地组织和管理 Vuex 中的状态和操作提高代码的可维护性和可读性同时避免了命名冲突和混乱。
2.4 路由
在Vue中路由route是指将不同的路径映射到相应的组件上的一种机制。它的作用是实现单页应用SPA的页面跳转和管理使得在页面切换时不需要重新加载整个页面而是通过动态加载组件来实现页面的更新。
2.4.1 基本使用
安装vue-router首先需要安装 Vue Router 插件可以通过 npm 命令进行安装
npm install vue-router应用插件在 Vue 项目中需要在入口文件通常是 main.js中使用 Vue.use() 来应用 Vue Router 插件
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)编写路由配置项创建一个Router 实例并配置路由规则其中每个路由规则由路径path和对应组件component组成
import VueRouter from vue-router
import About from ../components/About
import Home from ../components/Homeconst router new VueRouter({routes: [{path: /about,component: About},{path: /home,component: Home}]
})export default router实现页面切换在页面中使用 router-link 组件来实现页面切换其中 to 属性指定目标路径 divrouter-link to/aboutAbout/router-linkrouter-link to/homeHome/router-link/div
/template指定展示位置使用 router-view 组件来指定路由组件渲染的位置
templatedivrouter-view/router-view/div
/template注意点
组件存放位置通常将路由组件存放在 pages 文件夹一般组件存放在 components 文件夹。路由组件销毁通过页面切换隐藏的路由组件默认是被销毁的需要时再挂载。 r o u t e 属性每个组件都有自己的 ‘ route 属性每个组件都有自己的 route属性每个组件都有自己的‘route 属性存储着自己的路由信息。 r o u t e r 属性整个应用只有一个 r o u t e r 可以通过组件的 ‘ router 属性整个应用只有一个 router可以通过组件的 router属性整个应用只有一个router可以通过组件的‘router 属性获取到。
2.4.2 多级路由
配置多级路由规则使用 children 配置项来实现多级路由
const router new VueRouter({routes: [{path: /home,component: Home,children: [{path: news,component: News},{path: message,component: Message}]}]
})跳转在 router-link 中指定完整路径进行跳转
router-link to/home/newsNews/router-link2.4.3 路由的 query 参数
传递参数通过 router-link 的 to 属性传递参数可以使用字符串或对象写法
router-link :to/home/message/detail?id666title你好跳转/router-link接收参数在目标组件中通过 $route.query 获取传递的参数
$route.query.id
$route.query.title2.4.4 命名路由Named Routes
通过给路由命名可以在路由跳转时使用这个名字来简化跳转路径。具体来说就是在路由配置中给每个路由项添加一个名字name然后在跳转时可以直接使用这个名字来指定跳转目标。
{name: hello,path: /welcome,component: Hello
}2.4.5 路由的params参数
路由的params参数允许在路由之间传递数据通常用于传递动态的路径参数。我们可以在路由配置中使用占位符来声明接收params参数然后在跳转时传递参数。
{name: xiangqing,path: detail/:id/:title,component: Detail
}2.4.6 路由的props配置
路由的props配置用于让路由组件更方便地接收参数。我们可以通过props配置项将路由收到的params参数传递给组件以便组件直接使用而无需在组件中通过$route来获取。
{name: xiangqing,path: detail/:id,component: Detail,props: true // 将路由收到的所有params参数传递给Detail组件
}2.4.7 router-link的replace属性
router-link是Vue Router提供的用于生成路由链接的组件它可以方便地生成带有正确路径的链接。replace属性用于控制路由跳转时操作浏览器历史记录的模式可以选择替换当前记录而不是追加历史记录。
router-link replace to/newsNews/router-link2.4.8 编程式路由导航
除了通过router-link实现路由跳转外还可以使用编程式路由导航来实现这样可以在代码中更灵活地控制路由的跳转。
// 使用 $router.push() 方法进行路由跳转
this.$router.push({name: xiangqing,params: {id: xxx,title: xxx}
})2.4.9 缓存路由组件
有时候我们希望某些路由组件在切换时不被销毁而是保持挂载状态以便在切换回来时能够保留之前的状态。这时可以使用keep-alive组件来包裹router-view并通过include属性指定需要缓存的组件。
keep-alive includeNewsrouter-view/router-view
/keep-alive通过以上路由的用法我们可以更灵活地管理应用的页面跳转和参数传递实现更加丰富的单页面应用功能。
2.4.10 路由两个新的生命周期钩子
在Vue Router中有两个新的生命周期钩子别是activated和deactivated。它们是路由组件所独有的钩子用于捕获路由组件的激活状态。 activated: 当路由组件被激活时触发。你可以在这个钩子中执行特定的操作例如数据加载或组件初始化。 deactivated: 当路由组件失活时触发。你可以在这个钩子中执行清理操作或者取消订阅。
export default {() {// 路由组件被激活时执行的操作},deactivated() {// 路由组件失活时执行的清理操作}
}2.4.11 路由守卫
路由守卫用于对路由进行权限控制和导航控制。在Vue Router中路由守卫分为全局守卫、独享守卫和组件内守卫。 全局守卫 全局前置守卫 (beforeEach)在每次路由切换前执行的操作用于进行全局的权限控制或导航控制。 全局后置守卫 (afterEach)在每次路由切换后执行的操作通常用于修改页面的标题或执行一些全局的清理操作。
router.beforeEach((to, from, next) {// 在路由切换前执行的权限控制或导航控制
});router.afterEach((to, from) {// 在路由切换后执行的操作例如修改页面标题
});独享守卫
独享守卫是直接在路由配置中定义的守卫针对特定的路由进行权限控制或导航控制。
const router new VueRouter({routes: [{path: /profile,component: Profile,beforeEnter(to, from, next) {// 在进入特定路由前执行的权限控制或导航控制}}]
});组件内守卫
组件内守卫是直接在组件内部定义的守卫用于特定组件的进入和离开时执行的操作。
export default {beforeRouteEnter(to, from, next) {// 在进入组件前执行的操作},beforeRouteLeave(to, from, next) {// 在离开组件前执行的操作}
}2.4.12 路由器的两种工作模式
在Vue Router中有两种常见的路由器工作模式hash模式和history模式。 hash模式 地址中永远带着#号不够美观。不会将hash值包含在HTTP请求中因此不会影响到服务器端。兼容性较好但在某些第三方应用中可能会被标记为不合法。
const router new VueRouter({mode: hash,routes: [...]
});history模式 地址干净美观不含#号。需要后端服务器支持以解决刷新页面服务端404的问题。兼容性较hash模式略差但在现代浏览器中已得到广泛支持。
const router new VueRouter({mode: history,routes: [...]
});这些路由概念和功能在Vue.js应用中起着重要作用可以帮助你管理应用的导航、权限控制和页面展示。
三 Vue UI 组件库
Vue UI 组件库是为了方便开发者在Vue.js项目中使用的一套UI组件集合包括Element UI和Vant。这些组件库提供了丰富的UI组件可以帮助开发者快速搭建用户界面提升开发效率。
3.1 Element UI PC端
Element UI是一个基于Vue.js 2.0的组件库提供了一系列的UI组件包括按钮、表单、弹窗、导航等等覆盖了大部分常用的UI组件。使用Element UI可以快速搭建出美观、易用的用户界面。
基本使用
安装Element UI可以通过npm或者yarn进行安装。 npm install element-ui或者
yarn add element-ui在项目中使用Element UI在Vue项目的入口文件如main.js中引入Element UI的样式和组件。 import Vue from vue;import ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);在Vue组件中使用Element UI组件直接在组件的模板中使用Element UI提供的组件即可。 templateel-button按钮/el-button/templatescriptexport default {name: MyComponent};/script按需引入 如果你只想使用部分Element UI组件而不是全部引入可以使用babel-plugin-component这个babel插件来按需引入。
安装babel-plugin-component npm install babel-plugin-component -D修改.babelrc文件在plugins中添加babel-plugin-component配置 {plugins: [[component, {libraryName: element-ui,styleLibraryName: theme-chalk}]]}在组件中按需引入需要的Element UI组件 import { Button } from element-ui;export default {components: {el-button: Button}};3.2 Vant 移动端
Vant是有赞开源的一个移动端Vue组件库提供了一系列的移动端UI组件包括按钮、表单、弹窗、导航等等能够帮助开发者快速搭建移动端应用。
基本使用
安装Vant可以通过npm或者yarn进行安装。 npm install vant或者 yarn add vant在项目中使用Vant在Vue项目的入口文件如main.js中引入Vant的样式和组件。 import Vue from vue;import Vant from vant;import vant/lib/index.css;Vue.use(Vant);在Vue组件中使用Vant组件直接在组件的模板中使用Vant提供的组件即可。 templatevan-button按钮/van-button/templatescriptexport default {name: MyComponent};/script按需引入 如果你只想使用部分Vant组件而不是全部引入可以使用babel-plugin-import这个babel插件来按需引入。
安装babel-plugin-import npm install babel-plugin-import -D修改.babelrc文件在plugins中添加babel-plugin-import配置 {plugins: [[import, {libraryName: vant,libraryDirectory: es,style: true}]]}在组件中按需引入需要的Vant组件 import { Button } from vant;export default {components: {van-button: Button}};
