
Vue 从入门到实践
文章平均质量分 75
Vue从入门到实践,包括Vue基础知识、周边生态及Vue项目实践、原理解析等。
云小遥
P0 | 前端开发工程师, Cornerstone3D医学影像库在学中, Vue/React/可视化/中后台/低代码
展开
-
全面了解Vue基础知识(实例、指令)
一、vue 应用的组成1 - vue 实例一个vue应用由一个根实例及多个嵌套的、可选的组件树构成<div id="app"> {{message}} <todo-list/></div><script> // 组件 Vue.component('todo-list', { data() { return { message: "this is a component" }原创 2021-07-27 17:32:23 · 892 阅读 · 0 评论 -
全面了解Vue内置指令( 从API的角度认识Vue指令)
vue指令文章目录vue指令vue 指令是什么内容输出相关指令01 - v-text02 - v-html03 - v-cloak04 - v-once05 - v-pre逻辑处理相关指令01 - v-show02 - v-if03 - v-else04 - v-else-if循环列表相关指令01 - v-for绑定01 - v-bind02 - v-on03 - v-model其他01 - v...原创 2020-05-05 11:48:30 · 553 阅读 · 0 评论 -
一文全面了解Vue组件
重点说明:当前笔记内容侧重点为各个知识点的应用及需要注意的地方,而不是每个知识点的概念。概念相关请查看官网:https://cn.vuejs.org/v2/guide/installation.html vue入门教程。代码及xmind源文件Gitee:https://gitee.com/zhiyaoyun/vue-project代码下载地址:https://gitee.com/zhiyaoyun/vue-project.git一、计算属性和侦听器1 - 计算属性目的处理模板中需要复杂.原创 2021-07-29 16:28:45 · 649 阅读 · 0 评论 -
一文了解Vue全家桶之Vuex
一、vuex 状态管理模式1 - 普通的数据流管理单项数据流流向2 - vuex 状态管理模式集中式存储管理应用的所有组件的状态以相应的规则保证状态以一种可预测的方式发生变化二、为什么要使用vuex当多个组件共享一个状态时,方便状态的管理当跨层级组件之间通信时,方便数据处理三、核心概念1 - State(1)state 是什么?是项目中唯一的一个状态树包含了项目中所有组件的共享状态值(2)state有哪些特性?一个项目中只有一个store实例和 vue实例原创 2021-08-02 21:17:19 · 295 阅读 · 0 评论 -
一文了解Vue全家桶之Vue-router
一、安装方式一: 通过JavaScript 或者 CDN引入https://unpkg.com/vue-router/dist/vue-router.js方式二: 模块化安装:npm install vue-router注意:如果在模块化工程中使用vue,必须使用Vue.use()来明确的安装路由功能import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)方式三: 基于cli方式原创 2021-08-03 19:26:51 · 1031 阅读 · 0 评论 -
Vue项目最佳实践
Vue项目最佳实践文章目录Vue项目最佳实践项目配置策略1 - 基本配置2 - `webpack`相关配置3 - 环境变量和模式相关配置权限管理1 - 路由级权限管理2 - 细粒度的权限管理导航菜单请求 && 数据1 - 统一配置请求库2 - 请求拦截和响应拦截3 - 数据mock4 - 请求代理参考资料项目配置策略1 - 基本配置配置上下文信息:publicPath部署应用包时的基本 URL。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 ht原创 2020-12-16 17:17:43 · 877 阅读 · 0 评论 -
如何写出更加规范的Vue代码
Vue代码风格指南整理A级:必要的使用以下代码规则会规避一些不必要的错误1、组件名为多个单词好处避免和现有的以及未来的HTML产生冲突,因为html元素名称为单元素举例// 反例1,以todo为组件名Vue.component("todo" , { ...})// 反例2,以todo为组件名export default{ name:"Todo...原创 2020-02-15 11:19:40 · 828 阅读 · 1 评论 -
什么是Vue中的事件总线机制(EventBus)
Vue事件总线机制 - EventBus事件总线产生的背景在vue中最核心的部分就是组件,组件间的通信就是重中之重。通信分为父子组件通信、兄弟组件通信、不相干的组件通信等等多种方式。父级向子级通过props传递数据,子级通过 $emit 向父组件通知事件。但是当两个毫不相关的组件互相通信时应该通过什么来实现呢?EventBus的简介EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以原创 2020-06-06 14:41:24 · 2845 阅读 · 0 评论 -
如何监听路由器变化
监听路由器变化当时使用背景不同的路由对应的header的背景色不同,所以要监听路由实时改变背景色实现方案watch:{ $route(to,from){ console.log(to.path) ; // 输出的是当前路由的根目录下的路由:/detail }}参考资料https://www.cnblogs.com/crazycode2/p/87274...原创 2020-02-15 11:08:14 · 535 阅读 · 1 评论 -
Vue路由在新窗口打开的两种实现方式
Vue路由在新窗口打开文章目录Vue路由在新窗口打开第一种:使用``标签第二种:使用编程式导航使用背景遇到的问题解决方案第一种:使用<router-link>标签第二种:使用编程式导航使用背景在点击事件或函数中实现页面跳转时在新窗口打开界面遇到的问题// 直接使用window.open 跳转无法打开window.open(url , '_blank');解决方案g...原创 2020-02-15 11:11:27 · 4477 阅读 · 2 评论 -
如何在Vue项目中使用百度地图(实践)
百度地图在vue框架中的使用文章目录百度地图在vue框架中的使用安装注册全局注册组件局部注册使用(以局部注册为例)注意事项自己开发中踩到的坑参考链接安装npm install vue-baidu-map --save注册全局注册在main.js中引入百度地图import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap , { a...原创 2020-03-11 10:42:12 · 6715 阅读 · 1 评论