vue
Ai.ﻮ
这个作者很懒,什么都没留下…
展开
-
vue渐进式框架-脚手架安装及路由
Vue脚手架安装以及路由提示:这里写出了详细步骤,一看就会。环境搭建:第1步:安装Node.js 去node.js官网下载windows对应版本,安装即可。 验证node.js是否安装成功: node -v npm -v第2步:解决npm安装第三方模块很慢问题,建议使用cnpm淘宝镜像官网地址:https://developer.aliyun.com/mirror/NPM?from=tnpm# 全局安装cnpm这个工具# -g 表示全局安装,一次安装,永久使用n原创 2020-09-08 20:25:41 · 277 阅读 · 0 评论 -
vue渐进式框架-路由详解
文章目录一、嵌套路由二、路由重定向三、路由命名与别名四、动态路由与路由传参五、路由懒加载六、两种路由模式的对比七、vue-router提供的内置Api一、嵌套路由{ path: '/film', component: Film, children: [ // 当前这个规则的路由是 /film/hot // 当url=/film/hot时,路由会在Film组件中寻找一个名字叫default的容器来承载HotFilm {原创 2020-09-10 11:02:59 · 167 阅读 · 0 评论 -
vue渐进式框架-事件总线及插槽等
文章目录一、事件总线二、混入Mixin三、动态组件四、异步组件五、Ref六、过渡动画七、插槽提示:以下是本篇文章正文内容,下面案例可供参考一、事件总线事件总线,是为了解决兄弟组件之间的通信问题。 var bus = new Vue() // 事件总线 bus.$on() 用于接收信息 bus.$emit() 用于发送信息 // 订阅发布模式二、混入Mixin作用是:实现组件中选项的复用。<body> <div id="app">原创 2020-09-07 21:23:11 · 106 阅读 · 0 评论 -
vue渐进式框架-自定义button组件
自定义button组件:全局组件:只要编译好,在任意一个vue响应式系统中都会起作用局部组件:只能在当前响应式系统中被使用完成一个小demo,代码如下(示例):css代码:.btn { line-height: 35px; display: inline-block; padding: 0 20px; border-radius: 5px; font-size: 12px; } .btn.plain {原创 2020-09-04 21:42:16 · 847 阅读 · 0 评论 -
vue渐进式框架-组件封装及通信
Vue组件:组件是可复用的 Vue 实例,且带有一个名字。自定义组件的名字,一定要用多个单词(避免未来某天和HTML5新增标签冲突),建议用中划线连接起来。1、封装组件有什么好处?复用、便于维护(一处修改 多处同步变化)、隐藏细节快速开发,使用第三方开源的组件库快速搭建我们自己的产品2.父子组件通信:自定义属性、自定义事件父组件向子组件传值,使用自定义属性,子组件使用props接收子组件向父组件传值,使用自定义事件,子组件this.$emit('事件名','给父组件的数据')实原创 2020-09-04 21:19:43 · 138 阅读 · 0 评论 -
Vue自定义指令实现拖拽功能
效果展示:html代码:<div id="app"><!--v-drag是自定义指令,加上该指令的元素,可以实现拖拽--> <div class="box" v-drag></div></div>css代码:*{ margin: 0; padding: 0;}.box{ width: 200px; height: 200px; background: orange;}Vue代码:<script src=原创 2020-09-04 19:54:47 · 448 阅读 · 0 评论 -
vue渐进式框架-响应式原理及生命周期
vue响应式原理与生命周期文章目录vue响应式原理与生命周期前言一、vue响应式原理二、生命周期前言提示:读完以下的内容,你将可以回答如下问题:响应式原理:如何修改声明式变量?当声明变量发生变化时,在哪个时间节点去更新DOM?如何理解生命周期?提示:以下是本篇文章正文内容,下面案例可供参考一、vue响应式原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-09-02 22:10:03 · 380 阅读 · 0 评论 -
利用VUE制作史上最简单的待办事项表单
项目场景:以下为效果图html代码:提示:其中引入了icon-font:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conten原创 2020-09-02 09:29:20 · 578 阅读 · 0 评论 -
vue渐进式框架-安装及指令
vue渐进式框架学习之路-01 两种安装方式:script标签引入、vue-cli脚手架工程化安装。 <!--使用cdn加速器进行安装--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--生产环境(线上)、开发环境(本地)--> 优势:代码体积小,基于虚拟DOM,数据双向绑定,生态圈繁荣。 在浏览器控制台,app.msg 进行“双向绑定”调试,原创 2020-09-01 15:56:48 · 98 阅读 · 0 评论 -
vue渐进式框架-事件、样式及表单
文章目录前言一、事件详解二、动态样式1.v-bind:class 简写 :class2.v-bind:style 简写 :style做一个小demo三、表单详解1.表单有哪些?input、textarea、select做一个小demo前言事件修饰符:.stop 阻止冒泡.prevent 阻止HTML标签的默认事件和行为事件修饰符可以链式调用@keyup.ctrl.shift.65=“screenCaptrue”当我们在做VUE开发,凡是涉及到事件的功能,都有非常好的事件修饰符可原创 2020-09-02 09:19:55 · 185 阅读 · 0 评论 -
vue渐进式框架-项目部署及上线
前言注:有很多都是面试题哦!文章目录前言一、vue项目打包上线时一般要做什么?二、但多页面应用程序的原理三、vue.config.js的配置一般都做什么?四、项目部署五、浏览器输入url访问一个地址时发生了什么?一、vue项目打包上线时一般要做什么?在vue.config.js中配置一个publicPath字段,给资源路径加上一个前缀。考虑图片是否需要做优化,要是需要就进行图片的模块化,然后向运维要访问的路径,写到baseURL上。考虑api的baseURL,修改为远程服务器的地址。原创 2020-09-19 11:07:05 · 117 阅读 · 0 评论 -
vue渐进式框架-路由守卫及图片模块化处理
一、路由守卫是什么?概念:把原来没有条件限制的路由跳转添加上限制条件。//全局的路由守卫router.beforeEach((to,from,next)=>{})//局部的路由守卫beforeRouteEnter(to,from,next){}二、BSR与SSR视图:view + 模型数据ModelBSR:客户端渲染:视图与数据的组装是在客户端完成的。SSR:服务器渲染:视图与数据的组装是在服务器端完成的。BSR的优势和劣势有哪些?前后端分原创 2020-09-19 10:11:45 · 377 阅读 · 0 评论 -
vue渐进式框架-vuex的写法及跨域处理方法
文章目录一、在组件中使用Vuex的终极写法一、modules三、vue环境下的跨域处理方法四、Sass使用一、在组件中使用Vuex的终极写法被map*系列方法映射进来的,都可以使用this直接访问,使用起来更方便。import { mapState,mapGetters,mapMutations,mapActions } from "vuex"export default{ computed:{ ...mapState("namespaced",["state中的变量"]), ...原创 2020-09-11 21:46:59 · 212 阅读 · 0 评论 -
vue渐进式框架-vuex及axios的封装
文章目录一、Vuex起步二、状态管理三、devTools的安装四、Vuex的核心概念五、封装axios六、Vuex工作流程总结一、Vuex起步首先我们要知道Vue的三驾马车:Vue本身,Vue Router路由,Vuex状态管理工具。状态指的就是数据。以下是一个表示“单向数据流”理念的简单示意(状态管理:可预测的数据流向):二、状态管理作用:1、实现组件之间的数据共享 2、用于实现缓存提示:在vue应用程序中,vuex不是必须的,是可选的1、安装cnpm install v原创 2020-09-10 21:40:08 · 104 阅读 · 0 评论