vue
关注
分享
扫一扫
woshidamimi0
这个作者很懒，什么都没留下…
展开
-
vuecli项目怎样使用jsx
有时候用jsx写页面可能更灵活，当然在vue中写jsx需要插件的支持我用了一些官方给出的，感觉不怎么好用，推荐安装这个安装babel-plugin-transform-vue-jsx插件GitHub地址https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx看文档安装配置吧...原创 2019-11-26 08:25:48 · 2598 阅读 · 0 评论 -
vue render函数 怎样使用
一般来说，vue提供了template，让我们写页面的时候非常方便但是实际上vue会把template转为render函数，所以我们也可以写render函数（不怎么方便，除非用jsx(react的语法)）而且如果页面中有template选项，那么render函数就会无效有时候可能会需要用jsx写render，所以了解一下也好h是render函数中的一个参数，调用它即可创建并返...原创 2019-11-26 08:20:00 · 2587 阅读 · 1 评论 -
vue项目使用视频播放器 h5视频播放插件
vue项目中需要播放视频，然后网上搜了一下对应的插件，发觉xg-player西瓜播放器用起来不错。开源这个播放器的作者应该是一个超级大牛。特此记录一下这款播放器的使用方法http://h5player.bytedance.com/这个是地址（官网和GitHub）https://github.com/bytedance/xgplayer-vuevue当然是用组件的方式了，所以先...原创 2019-04-04 11:07:04 · 21357 阅读 · 2 评论 -
vue项目打包之后文件太大怎么优化
首先，用脚手架进行打包分析，如果使用webpack的就要自己找插件了，vue-cli内置了打包分析插件执行命令npm run build --report打包完成之后就会自动在浏览器打开127.0.0.1:8888地址然后就可以看到项目所用的依赖占比了。然后把占比，或者说占面积比较大的依赖抽出来，改用cdn的方式引入就可以减小文件的大小了。当然也可以用一下路由懒加载来分割...原创 2019-04-25 19:50:49 · 8962 阅读 · 0 评论 -
Vue路由懒加载
当vue打包过大时可以用路由懒加载来减小包的体积路由懒加载是通过es6的一种写法没有懒加载是这样的打包之后就只有vendor之类的如果这样import就可以懒加载组件了打包之后就会有一个个小js...原创 2019-06-21 14:04:11 · 4260 阅读 · 0 评论 -
vue怎样操作元素 怎样获取元素节点
vue中建议我们操作节点的时候使用ref来获取节点，所以虽然可以用document.getElement之类的语句来操作，不过代码还是有点长，所以我们可以使用vue提供的api来进行操作先用ref在元素上面做一个标记，然后用this.$refs.标记名来获取元素<!DOCTYPE html><html><head> <meta char...原创 2019-07-14 16:51:39 · 6655 阅读 · 2 评论 -
vue项目怎样使用elementUI的树形组件 tree组件
在模板中使用el-tree标签 给data属性绑定树形结构数据即可 <el-tree :data="treeData"></el-tree>接着在data中编写数据 treeData: [ { label: "java", children: [] }, { ...原创 2019-07-20 15:13:45 · 15260 阅读 · 3 评论 -
vue父子组件之间怎样通信 怎样传递数据
首先，新建一个子组件MyChild ,然后在子组件的props属性里设置一个属性来接收外部传来的值，我这里叫outData,然后设置接收的数据类型是String,并且用default设置默认数据然后再父组件中的data中定义数据，并且引入子组件，然后把数据绑定到子组件的outData属性上即可这样子组件即可拿到父组件的数据了如果不传默认就会用子组件props中outData...原创 2019-08-03 15:09:49 · 457 阅读 · 0 评论 -
vue项目怎样设置根据路由高亮对应的菜单项
高亮显示菜单是很常见的一个场景首先，在router-link标签上绑定对应的路径然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较...原创 2019-08-06 13:15:22 · 5409 阅读 · 2 评论 -
vue怎样自定义指令
自定义指令可以去官网查看更多内容https://cn.vuejs.org/v2/guide/custom-directive.html指令可以用来操作元素，非常方便在vue单文件组件里面用directives来定义一个指令,这样定义的就是局部指令如图，append表示指令名，指令名随意起的， 它有一些钩子函数给我们调用这里说一下inserted钩子函数，借用vue官网的说法—...原创 2019-08-07 09:24:52 · 421 阅读 · 0 评论 -
怎样自定义elementUI的tree树形组件的图标
首先使用el-tree组件，然后定义好data数据，可以看到里面有自定义设置的icon字段，就是用来存放对应的图标的类名的然后用插槽来把图标插入进去，图标的类可以在data里面获取，如果需要还可以给这个icon绑定事件然后把原来el-tree的图标隐藏掉，注意必须重写element原来的样式，而且要设置为全局样式来覆盖（也就是不加scoped）我这里就加一个自定义的类进行限制，防...原创 2019-09-19 08:11:20 · 12004 阅读 · 7 评论 -
elementui tree怎样设置默认勾选
在树形菜单数据里面设置一个唯一的字段，这里我的就是id字段然后设置node-key为那个唯一字段 然后用default-checked-keys绑定一个数组这个数组里面就是需要勾选的菜单所对应的的id，比如我这里的是9这样运行之后菜单就会把id为9的树形菜单给勾选上了哦。...原创 2019-09-29 08:16:47 · 10026 阅读 · 3 评论 -
vue .sync怎样让数据双向绑定
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6子组件中用props接收外部传来的值 此处是isShow然后在父组件中引入并使用.sync，这样既可被外部也可以被内部修改然后子组件中向外触发事件 this.$emit("update:isShow"...原创 2019-09-29 09:51:08 · 414 阅读 · 0 评论 -
vue路由传递参数，刷新丢失
vue路由传递参数如果用params传递参数，那么页面刷新就会丢失数据，可以改用query来传递参数，这样刷新就不会丢失 this.$router.push({ name: "MyTable", query: {arg: 'arg'}});如果传递的是对象，注意要把对象转为字符串，否则刷新就会变为undefined了...原创 2019-01-09 15:13:53 · 5086 阅读 · 4 评论 -
vue子组件调用父组件的方法
vue中有一个api可以调用，地址：https://cn.vuejs.org/v2/api/#vm-parent假设父组件有方法 methods: { parentMethod () { console.log('from parent') }}子组件可以这样调用methods: { childMethod () { t...原创 2019-01-08 19:14:17 · 605 阅读 · 0 评论 -
elementui把上传的图片转为base64
使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false"> <el-button size="small"原创 2019-01-08 16:45:18 · 19333 阅读 · 11 评论 -
vue入门教程1
jq虽然好用，但是在数据的修改上没有vuejs那么方便。下面我就来记录一下vue的一些基本使用经验，希望可以帮助到想学习vuejs的小伙伴们。如有不足请指正。首先，就是下载vue.js并且引入到网页当中。并且在页面中写上一个div标签，给div设置一个id。然后就可以创建一个vue的实例对象了。如图所示，用new Vue即可创建。然后里面就是vue对象的一些属性了，比如el，data。el可以设置...原创 2018-06-17 20:00:29 · 308 阅读 · 0 评论 -
router-link无法绑定事件
一般来说vue绑定事件是使用v-on:click 或者是 @click 之类的，但是如果是在router-link上绑定则这种方式就会失效。需要这样写@click.native 这样才会有效。...原创 2018-08-29 18:01:49 · 665 阅读 · 0 评论 -
vuex怎么用
vuex用来在组件之间传值特别方便，今天就来简单说一下vuex的一些用法1 首先 安装vuex2 然后再src新建一个store文件夹并且新建一个js文件，这样做是为了更好管理项目3 然后再index开始设置一些公用的值和方法。引入vue和vuex通过Vuex.Store可以创建一个Store对象，这个对象包含有state,mutations等熟悉，其他的先不多说。...原创 2018-09-19 17:34:22 · 1790 阅读 · 1 评论 -
vue项目模拟假数据
开发vue项目的时候需要用到一些假数据，这里我就分享一下用json-server这个包来托管数据。首先就是npm install -g json-server来全局安装。之后新建一个json文件，格式大概是这样的。{ "items":[ { "id": 103, "name": "daming" }, { "id": 1...原创 2018-09-25 14:39:17 · 8225 阅读 · 2 评论 -
vue使用v-if v-show页面闪烁，div闪现的解决方法
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且设置它的样式即可。代码只是示例，还需要自己修改测试。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl原创 2018-09-26 11:32:18 · 11936 阅读 · 1 评论 -
vuejs点击获取当前元素内容
有时候要获取所点击元素的内容文本等信息可以在点击事件里面加上$event，这样即可获取。注意，一定是$event，不然无效,如果只有一个参数可以不写$event,直接在函数里面写e即可 <div @click="btn_user($event)">用户</div>methods: { btn_user (e) { console.log...原创 2018-10-27 13:39:35 · 13963 阅读 · 0 评论 -
vue-cli项目使用echarts
npm install安装，然后即可在依赖包中看到echarts在main.js中引入，然后挂载到Vue的原型上面，这样每个vue实例都会有这个属性。$charts是自定义的名称，随便。在需要的地方就可以用this.$charts来调用了。如图，我在methods里面中调用，注意this必须指向的是vue实例才可以调用。同样，new echarts 对应变为new this...原创 2018-12-05 10:42:47 · 408 阅读 · 0 评论 -
vue匹配不到路由跳转登录页或其他页面
为了更好的用户体验，需要在用户访问某个路由的时候，如果匹配不上就跳转到另外一个页面。也就是通常所见的404页面。可以在router.beforeEach这个全局路由导航函数用to.matched.length判断有没有这个路由，0就是没有，然后跳转到登录页面或者404页面或者，也可以在路由数组里面用*来匹配，这个*的元素要放在路由数组最后面，否则无效。...原创 2018-12-05 15:56:39 · 7288 阅读 · 0 评论 -
elementui自定义表格头，自定义表头table
elementUI的样式我觉得已经非常完美了，不过还是要根据UI来设置表格的头部。首先在组件标签中这样写，header-cell-style绑定一个变量即可自定义表头 <el-table :header-cell-style='tableHeaderStyle' :data="tableData" style="width: 100%" height="388">然后再d...原创 2018-12-10 14:41:54 · 5843 阅读 · 0 评论 -
vuecli监听外部请求 监听所有ip的请求
有时候想要让本机的项目在别的电脑上可以访问浏览，这就需要在本机监听所有ip的请求。当然，必须保证本机跟另外一台电脑使用的是同一个网络，比如说连的是同一个wifi。然后修改vuecli配置文件的一些内容就ok了。0.0.0.0就是监听全部的ip地址请求了 ...原创 2018-12-17 09:28:38 · 1774 阅读 · 0 评论 -
echarts设置图表类型 设置柱形图 折线图
有时候要动态修改图表的形状，找到echarts中的option的series，然后设置一个变量，如图，我是用vue的，然后type绑定到变量即可。type: 'bar'表示柱形图type: 'line’表示折线图...原创 2018-12-17 14:53:04 · 1300 阅读 · 0 评论 -
elementui关闭弹窗清空表单验证 清空表单
给form添加一个ref属性 <el-form ref="paper"></el-form> 调用方法，注意先清空验证再清空表单，这样就可以清除自定义的表单验证器了。 this.$refs.paper.clearValidate(); this.$refs.paper.resetFields();...原创 2019-01-17 11:42:05 · 9138 阅读 · 4 评论 -
vue报错：eslint-disable-next-line to ignore the next line.
vue项目报错：Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.今天编写vue项目路由的时候报了这个错，后来发觉是空多了一行。比如这个，空多了一行就会报错。直接把行删除掉，最多只能空一行。import foo from ...原创 2018-04-22 18:01:33 · 35120 阅读 · 0 评论