![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
肖ZE
这个作者很懒,什么都没留下…
展开
-
vue——draggable 实现
export default { name: 'draggable', data() { return { dragging: false, // 是否激活拖拽状态 windowFrom: {}, // x、y 偏移量 isClick: true, // 是否点击事件,还是移动事件 }; }, created() { window.document.addEventListener('mouseup', this.onMouseUp原创 2020-08-14 17:16:35 · 613 阅读 · 0 评论 -
vue 引入 svg(定义公共组件)
安装yarn add svg-sprite-loader使用index.jsimport Vue from 'vue'import SvgIcon from '@/components/SvgIcon' // svg组件// register globallyVue.component('svg-icon', SvgIcon);//自动引入 @/src/iconscons...原创 2020-04-21 17:35:17 · 1483 阅读 · 0 评论 -
vue——自动化组件
<!-- 不同条件,使用不同的组件 --><component v-bind:is="markTool"></component>const toolMapper = { 0: ImageClassify, 1: ImageDraw, 2: VoiceLabel, 4: VideoClassify, 7: TextClassify}...原创 2019-12-12 16:29:46 · 292 阅读 · 0 评论 -
vue——利用 router 配置权限管理 及 resetRouter
router.jsexport const constantRoutes = [ { path: '/redirect', component: () => import('@/layout'), hidden: true, children: [ { path: '/redirect/:path*', com...原创 2019-10-14 15:04:08 · 9279 阅读 · 1 评论 -
vue——init
创建项目vue create myItem安装依赖cnpm i vuex vue-router axios -Scnpm i node-sass sass-loader -D配置router.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)let router = ...原创 2019-06-12 17:35:04 · 1166 阅读 · 0 评论 -
vue——49-Vuex
Vuex 是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到 Vuex 中,而不必通过父子组件之间传值了,如果组件之间的数据不需要,这些不需要共享的私有数据,没有必要放到 Vuex 中注意:只有共享的数据,才有权利放到 Vuex 中;组件内部私有的数据,只要放到组件的 data 中即可;props 、 data 和 vuex 的区别:props 是父组件向子组...原创 2018-11-03 08:48:31 · 238 阅读 · 0 评论 -
vue——48-router 路由跳转
标签跳转:使用 a标签 的形式编程式导航:使用 window.location.href 的形式原创 2018-11-01 19:51:09 · 530 阅读 · 0 评论 -
vue——组件通信
组件:&amp;amp;amp;lt;el-tabs v-model=&amp;amp;quot;active&amp;amp;quot; @tab-click=&amp;amp;quot;tabClick&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;el-tab-pane v-for=&amp;amp;quot;key原创 2019-01-30 14:24:46 · 442 阅读 · 0 评论 -
vue——自定义创建公共方法或变量、混入(mixins)方法
官方文档:Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全...原创 2019-01-31 11:23:15 · 2946 阅读 · 0 评论 -
vue——QRCode 生成二维码
安装npm install qrcodejs2 引包import QRCode from 'qrcodejs2'使用&lt;div ref="qrCode"&gt;&lt;/div&gt;creatQrCode() { var qrcode = new QRCode(this.$refs.qrCode, { text: '二维码的 url', widt...原创 2019-03-01 19:37:19 · 571 阅读 · 0 评论 -
vue——47-评论的公共路由模板组件 放入 路由组件
1.建立一个公共路由模板组件(评论)comments.vue&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;hello world!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt;&amp原创 2018-10-29 19:58:03 · 246 阅读 · 0 评论 -
vue——46-webpack打包vue-路由、嵌套路由、样式设置、独立路由 router.js
关于 webpack 打包教程请看:webpack 打包文件一、路由main.js 中1.引入 vue-router 包安装命名:cnpm i vue-router -simport Vue from 'vue';import app from './app.vue';import VueRouter from 'vue-router';2.手动安装 VueRouterV...原创 2018-10-23 19:56:58 · 1064 阅读 · 0 评论 -
vue——45-webpack打包vue-向模块传递参数( export )
在模板(login.vue)的业务逻辑块向外暴露成员模板块:&lt;template&gt; &lt;!--模板块--&gt; &lt;div&gt; &lt;h1&gt;这是登录组件,使用 .vue 文件定义出来的 --- {{msg}}&lt;/h1&gt; &lt;butto原创 2018-10-23 18:38:17 · 2787 阅读 · 0 评论 -
vue——42-render 函数渲染组件
html<div id="app"> 阿斯顿发生的发生</div>js var login = { template: '<h1>登录组件</h1>' }; // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app'...原创 2018-10-21 20:44:49 · 307 阅读 · 0 评论 -
vue——44-webpack打包vue-阉割版
1原创 2018-10-22 15:38:32 · 251 阅读 · 0 评论 -
vue——43-webpack打包vue
首先,普通网页中使用vue:使用 script 标签,引入 vue 的包在 index 页面中,创建一个 id 为 app div 容器通过 new Vue 得到一个 vm 的实例1.先将该配置的属性都配置好webpack如何使用以及配置2.局部引入 vue 的项目文件包命令:cnpm i vue -s3.在入口文件(main.js)中引入 vue注意:在 webpack...原创 2018-10-22 15:26:38 · 402 阅读 · 0 评论 -
vue——38-路由命名视图实现经典布局
css h1, body { margin: 0; padding: 0; } .header { background-color: orange; height: 80px; } .container { ...原创 2018-10-17 15:59:40 · 529 阅读 · 0 评论 -
vue——37-路由-路由的嵌套(children)及 v-for 绑定的 li 的 id 路由地址
html&amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;app&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;router-link to=&amp;amp;amp;quot;/account&amp;amp;amp;quot;&amp;amp;amp;amp原创 2018-10-17 15:35:56 · 1618 阅读 · 0 评论 -
vue——36-路由-传入参数
方法一(query):css .router-link-active { font-size: 20px; color: skyblue; font-weight: 800; font-style: italic; margin: 0 10px 0 10px;...原创 2018-10-17 11:21:34 · 123 阅读 · 0 评论 -
vue——监听滚动事件
注意第三个参数选择 true ,是因为滚动事件是捕获事件而不是冒泡事件监听滚动事件 mounted () { window.addEventListener('scroll', this.scroll, true) },所触发的事件 methods: { scroll () { // 获取元素对屏幕上边的距离 ...原创 2019-03-14 13:14:33 · 501 阅读 · 0 评论 -
vue——组件间(兄弟组件间)事件派发与接收
main.js在初始化vue之前,给 data 添加一个名为 event 的空vue对象new Vue({ render: h => h(App), router, store, data: { event: new Vue() }}).$mount('#app')组件一:methods: { addCart (e) { l...原创 2019-04-13 11:39:56 · 2232 阅读 · 0 评论 -
vue——父子组件互调用方法方法
子组件:food.vue<div class="food" v-show="showFlag">food</div>export default { name: 'food', data () { return { showFlag: false } }, methods: { sh...原创 2019-04-13 21:47:17 · 223 阅读 · 0 评论 -
js/vue/jq——事件委托
事件委托好处: 1,性能好 2,新添加的元素还会有之前的事件js事件委托window.onload = function(){ var Ul = document.getElementById(&quot;ul&quot;); var Li = oUl.getElementsByTagName(&quot;li&quot;);/*event:事件源,在哪个事件中,操作的那个元素就是事件源ie浏览器:windo...原创 2018-08-26 09:32:20 · 818 阅读 · 0 评论 -
mint-ui(基于 Vue.js 的移动端组件库)
1.引入文件引入全部组件import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'Vue.use(MintUI)new Vue({ el: '#app', components: { App }})按需引入部分组件...原创 2018-10-25 20:46:16 · 8825 阅读 · 0 评论 -
Mint-UI中按需导入配置方式-MUI
使用 MUI 代码片段注意:MUI 不同于 Mint-UI,MUI 只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的 HTML 代码片段,类似于 bootstrap;而 Mint-UI,是真正的组件库,是使用 Vue 技术封装出来的成套组件,可以无缝的和 VUE 项目进行集成开发;因此,从体验上来说,Mint-UI 体验更好,因为这是别人帮我们开发好的现成的 Vue 组件;从...原创 2018-10-27 09:52:16 · 2864 阅读 · 0 评论 -
vue-preview 缩略图横向滑动插件
注意:This plugin currently support vue2.5 and above安装包:npm i vue-preview -S安装插件:import VuePreview from 'vue-preview' // defalut installVue.use(VuePreview) // with parameters installVue.use(pr...原创 2018-10-31 17:22:02 · 3064 阅读 · 0 评论 -
vue 的 UI 框架
VuetifyStar 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 个 vue-cli 模板。地址: https://github.com/vuetifyjs/vuetifyQuasarSt...原创 2018-11-21 14:13:34 · 312 阅读 · 0 评论 -
vue 的 router-link 添加点击事件
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。所以如果在想要在router-link上添加事件的话需要@click.native这样写...原创 2018-11-21 21:48:29 · 3298 阅读 · 0 评论 -
vue 的 router-link 清除历史记录的方法
通过 replace 达到清除历史记录的目的<router-link to="/home" replace> <h1>content</h1></router-link>原创 2018-11-23 14:02:37 · 20026 阅读 · 2 评论 -
vue——刷新页面回首页(包括一些滚动同理)
mounted() { window.addEventListener('load', () => { // 滚动事件变为 scroll if (this.$route.path !== '/print') { // /print 表示首页 this.$router.replace('/print') // 切换到首页 ...原创 2018-12-06 21:53:58 · 6438 阅读 · 0 评论 -
Vue axios 发 post 请求后台接收不到参数的两种种解决方案:
最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况:代码:后来仔细对比ajax发现axios传值是这样的:而ajax传值是这样的:一个Request Payload,一个Form Data。将Request Payload 转为Form Data格式就可以了,有三种方式:一、使用qs(推荐)首先在你的项目里安装qs模块:npm install...原创 2018-12-07 16:32:50 · 9145 阅读 · 0 评论 -
vue-quill-editor 富文本编辑器 及其图片上传至服务器
安装:cnpm i -S vue-quill-editor quill引入:import {quillEditor} from &amp;amp;amp;amp;amp;quot;vue-quill-editor&amp;amp;amp;amp;amp;quot;; //调用编辑器import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/qui原创 2019-03-06 20:46:11 · 374 阅读 · 0 评论 -
vue 的一些 ui 框架样式设置无效
法一:全局 APP.vue 下修改框架样式(或是去除 scope 局部样式属性)法二:利用 /deep/ 深度修改框架样式 /deep/ .class { top: 60px !important; }原创 2019-07-17 16:49:03 · 836 阅读 · 0 评论 -
vue——vue-i18n
vue 项目中如何实现国际化 vue-i18n安装npm install vue-i18n引入import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识 //this.$i18n.locale //...原创 2019-06-13 21:28:22 · 4804 阅读 · 0 评论 -
vue——导航守卫
导航就是我们说的路由,当路由发生变化的时候,我们想要做的事情,这就是导航守卫的重点。路由改变的函数我们写到项目的哪个位置,代码写哪个地方,这个就是官网上说的(全局守卫,路由独享的守卫,组件内的守卫),下面一一介绍:(一)全局守卫:用来监测所有的路由,代码写在路由页面(router.js)方法有:router.beforeEach((to, from) => { // ......原创 2019-06-07 11:28:56 · 1677 阅读 · 0 评论 -
vue——自定义组件(模仿 vuetify 表单)
定义组件:允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。更多关于 model 的解释请看:https://cn.v...原创 2019-04-30 21:57:20 · 1920 阅读 · 0 评论 -
vue——35-路由的基本使用
引用 &amp;amp;lt;!-- 1.安装 vue-router 路由模块 --&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;../frame/vue-router.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;html&amp;原创 2018-10-16 21:23:45 · 150 阅读 · 0 评论 -
vue——34- ref 获取DOM元素和组件
html<div id="app"> <login ref="mylogin"></login> <input type="button" value="获取元素" @click="getElement" ref="mybtn"> <h3原创 2018-10-16 20:37:34 · 546 阅读 · 0 评论 -
vue——33-父子组件传方法(发表评论) 及 localStorage 的应用
引入文件:bootstrap.csshtml&amp;amp;amp;lt;div id=&amp;amp;quot;app&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;cmt-box @func=&amp;amp;quot;loadComments&amp;amp;quot;&amp;amp;amp;gt;&a原创 2018-10-16 20:15:41 · 612 阅读 · 0 评论 -
vue——18-事件修饰符
<div id="enjoy"> <!-- 使用.stop 阻止冒泡(阻止上级所有层的事件) 仅son --> <div class="father" @click="father"> <div class="son" @click.stop="son"&a原创 2018-09-23 18:52:42 · 113 阅读 · 0 评论