vue
文章平均质量分 52
xiaoxiao无脸男
这个作者很懒,什么都没留下…
展开
-
Vue2.0+Vue3.0复习
最近开始复习vue,在某b站看到一个不错视频,跟着撸一遍。原创 2022-11-24 21:06:45 · 227 阅读 · 0 评论 -
vue directives自定义指令的使用
directiveCom.vue:<template> <div> 数量: <input :value="myNum" v-check-num="{key:'myNum',maxval:'1000',minval:'100'}" /> <div v-show="show">测试指令</div> <button @click="toggle">切换一下show</button> &原创 2022-03-10 13:01:15 · 5358 阅读 · 0 评论 -
Vue的$emit传值
$emit,父组件传data给子组件,子组件通过$emit来触发父组件中绑定在子组件身上的事件,达到改变父组件中的data的方法。下面介绍$emit传值的几种方法:一:$emit传递单值子组件Test.vue:<template><div><div>子组件</div><button @click="changeFather">点击我向父组件传递参数</button></div></tem原创 2022-03-08 15:22:09 · 17385 阅读 · 2 评论 -
Vue原理
在 new Vue() 时, 内部会执行一个this._init() 方法, 这个方法是在initMixin(Vue) 内定义的:export function initMixin(Vue) { Vue.prototype._init = function(options) { ... }}12345当执行new Vue() 后, 触发的一系列初始化都在==_init== 方法中启动, 它的实现如下:let uid = 0Vue.prototype._init = ...原创 2022-02-22 12:25:15 · 276 阅读 · 0 评论 -
vue中的mixin的使用
mixin是用来分发Vue组件中的可复用功能。一.选项合并,也是局部混入局部混入,如果在组件中需要用到混入对象,则需要在组件中导入混入对象。使用步骤:1.定义混合对象的文件mixin.js并导出myMixin。2.在组件中导入myMixin对象,并在组件中将myMixin混入到mixins属性中。3.在组件中使用myMixin对象的属性和方法。定义mixin.js文件并...原创 2020-01-18 18:56:47 · 741 阅读 · 0 评论 -
vue.config.js解释
此配置文件的要求是:Vue CLI 3.3起。'use strict'const path = require('path')const defaultSettings = require('./src/settings.js')//将路径片段使用\连接起来形成路径,并规范化生成的路径function resolve(dir) { return path.join(__dirn...原创 2020-01-06 18:51:53 · 2463 阅读 · 0 评论 -
webpack.prod.conf.js解释
//此文件是生产环境下webpack相关配置'use strict'//导入pathconst path = require('path')//导入utilsconst utils = require('./utils')//导入webpackconst webpack = require('webpack')//导入config文件夹下的index.jsconst confi...原创 2019-01-12 19:13:04 · 2844 阅读 · 0 评论 -
webpack.dev.conf.js解释
//此文件是开发环境下webpack相关配置'use strict'//导入utils.jsconst utils = require('./utils')//导入webpackconst webpack = require('webpack')//导入config文件夹下的index.jsconst config = require('../config')//导入webpac...原创 2019-01-12 19:13:17 · 1480 阅读 · 0 评论 -
weback.base.conf解释
//此文件是webpack的基本项目配置文件'use strict'//导入pathconst path = require('path')//导入utils.jsconst utils = require('./utils')//导入config文件夹的index.jsconst config = require('../config')//导入vue-loader.conf...原创 2019-01-12 19:13:30 · 266 阅读 · 1 评论 -
vue-element-admin基础学习
本文是作者参考vue-element-admin,一步一步学习如何搭建vue-element-admin.上图是Vue Admin Template的整体效果图,分析:左侧侧边栏和头部面包屑是一个公用模块,左侧使用的是layout组件,我们也是从最简单的开始着手,第一步,是完善侧边栏layout第一阶段:搭建项目。项目使用的是layout+iframe布局.1.使用vue in...原创 2019-08-18 21:19:32 · 1432 阅读 · 2 评论 -
Slot的使用
Slot的使用Slot有具名插槽和无名插槽。主要作用是占位子,达到在子组件中显示父组件自定义的内容。无名插槽的使用:定义子组件<template> <div> <p>我是子组件</p> <slot>我是子组件自定义的内容</slot></div><...原创 2019-09-18 09:59:39 · 628 阅读 · 0 评论 -
render的使用
Render是使用js的完全编程能力来渲染页面,即用js来构建DOM.说明:render是一个方法,自带一个形参createElement,这个参数也是一个方法,是用来创建vue 节点的,也就是html模板的,然后渲染(render)到指定的节点上。render函数的目的是创建dom节点。因为createElement是个形参,所以这个形参可以用任何字符替换,比如h。createEleme...原创 2019-09-18 09:59:30 · 15409 阅读 · 1 评论 -
component使用
Component内置组件的使用:用于动态切换组件一:局部注册组件对于引入的子组件:定义组件1:<template> <div>这是one组件</div></template><script>export default { name:'One'}</script>...原创 2019-09-18 09:59:13 · 5808 阅读 · 1 评论 -
vue递归写树形控件
需求:有个树形结构的数据,需要渲染定义子组件TreeItem.vue:<template> <div> <ul> <li v-for="(item,index) in list" :key="index">{{item.name}} <t...原创 2019-09-18 09:59:00 · 1118 阅读 · 0 评论 -
vue-loader.conf.js解释
//此文件是处理.vue文件的配置文件'use strict'//导入utils.js工具const utils = require('./utils')//导入config文件夹下的index.jsconst config = require('../config')//判断是不是生产环境const isProduction = process.env.NODE_ENV === ...原创 2019-01-12 19:12:51 · 2054 阅读 · 1 评论 -
utils.js解释
//此文件用来配置assetsPath css-loader和vue-style-loader createNotifierCallback'use strict'//导入pathconst path = require('path')//导入config文件下的index.jsconst config = require('../config')//导入extract-text-w...原创 2019-01-12 19:12:25 · 2649 阅读 · 0 评论 -
vue-router设置默认路由
vue-router的使用原创 2018-02-26 23:10:06 · 28802 阅读 · 2 评论 -
vue引用静态资源需要注意的事项
项目结构如下:想在icon.styl文件夹里面引用字体图标,使用相对路径,但是报错浏览器报错如下:解决方案有两种:方案1.使用根目录路径方案2:将要引用的静态资源fonts文件夹放在static文件夹下icon.styl文件下面的代码如下:问题就解决了。建议:静态资源统一管理在static文件夹下。...原创 2018-03-01 22:57:47 · 12319 阅读 · 0 评论 -
vue父子之间传值
1.父组件向子组件传值定义父子组件 并在父组件中引入注册子组件<template> <div> <child v-bind:greetMsg="name"></child> </div></template><script> import Child from '../compone原创 2018-03-16 18:06:07 · 3734 阅读 · 0 评论 -
音乐播放器
github地址:git@github.com:xiaoli0510/music.git此项目是用vue写的一个音乐播放器,断断续续花了半个月的时间,刚开始是懵的,写着写着就顺了。利用脚手架构建项目后,src文件夹的结构如下使用的技术上拉加载、下拉刷新使用的是better-scroll 直接npm instsll better-scroll -save请求数据,首页的recommend和歌词2个地...原创 2018-03-16 19:23:38 · 279 阅读 · 0 评论 -
vue项目中使用vuex,store文件详解
store文件夹一般有以下6个文件。原创 2018-03-16 20:00:19 · 10611 阅读 · 0 评论 -
star评星 点亮星星 原生js评星 vue评星
类似于淘宝订单交易成功后,会进行评价。项目结构如下:一:原生js进行评星<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-原创 2018-12-31 23:02:17 · 763 阅读 · 0 评论 -
build文件下的build.js解释
//bulid.js是webpack的打包文件,通过配置package.json中的script来执行脚本。命令号npm run build即运行node build/build.js'use strict'//检查node+npm的版本,引用./check-versions.js文件require('./check-versions')()//process.env是一个包含用户环境...原创 2019-01-05 19:04:41 · 9865 阅读 · 1 评论 -
package.json解释
//注意:package.json添加中文注释会报错{ "name":"mydemo",//项目名称 "version":"1.0.0",//项目版本号 "description":"A Vue.js project",//项目描述 "author":"",//项目作者 "scripts":{//制定了运行脚本命令行的缩写 比如npm run build...原创 2019-01-05 19:04:54 · 2842 阅读 · 0 评论 -
check-versions.js解释
//此文件是检查node+npm的版本 在build.js里面使用'use strict'//导入chalk模块 用来改变字体颜色const chalk = require('chalk')//导入semver即语义化版本 用来控制版本const semver = require('semver')//导入package.jsonconst packageConfig = requ...原创 2019-01-05 19:07:09 · 1689 阅读 · 1 评论 -
vue的config文件夹下的Index.js解释
//此文件是用来配置开发环境和生产环境的配置参数'use strict'//严格模式const path = require('path')//node的path模块 用来统一路径module.exports = { dev:{//开发环境 //定义静态资源根目录的子目录static assetsSubDirectory:'static', ...原创 2019-01-05 19:07:27 · 3785 阅读 · 0 评论 -
dev.env.js解释
//此文件时开发环境配置文件'use strice'//使用严格模式const merge = require('webpacl-merge')//合并对象const prodEnv = require('./prod.env')//导出module.exports = merge(prodEnv,{//合并两个配置文件对象并生成一个新的配置文件,如果合并的过程中遇到冲突的属性,第二...原创 2019-01-05 19:07:47 · 2794 阅读 · 0 评论 -
pro.env.js解释
//开发环境配置文件'use strict'//严格模式module.exports = {//导出 NODE_ENV:'"production"'}原创 2019-01-05 19:08:04 · 565 阅读 · 0 评论 -
vue 周日历
需求:1.类似于手机上的周日历,显示周天-周一的。2.周日历能上翻下翻,并自动显示相应的年份和月份。3.点击相应的月份,显示当月第一周的周日历。4.选中某一固定日期,当前日期高亮。最终效果图项目结构如下html代码<!DOCTYPE html><html lang="en"> <head> <m...原创 2019-01-05 19:18:53 · 2618 阅读 · 1 评论 -
vue-router组件懒加载
组件懒加载,跟图片懒加载类似,即需要使用此组件的时候,才加载此组件,由此可避免在加载首页的时候加载所有的组件。实现组件懒加载,需要设置router下面的index.js文件:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const Search = resolve => { import ('views...原创 2018-02-26 23:00:23 · 589 阅读 · 0 评论