vue.js
woyaoshengzhang
这个作者很懒,什么都没留下…
展开
-
vue3 学习记录
vue3 学习记录原创 2024-06-28 10:31:20 · 306 阅读 · 0 评论 -
vue3 teleport传送门
vue3 新增的teleport 可以实现将组件内的元素移动到组件外的dom节点内。to 指向渲染组件的dom // index.html<body> <div id="app"></div> <div id="modal"></div></body>// modalComp.vue<div> <div class="mask"></div> <teleport原创 2021-06-17 10:12:46 · 457 阅读 · 0 评论 -
vue 为路径设置别名
vue-cli3在vue.config.js文件中配置路径别名const path = require("path");const resolve = (dir) => { return path.join(__dirname, dir);};module.exports = { chainWebpack: config => { config.resolve.alias.set('@',resolve('src')) }};...原创 2021-06-16 17:16:31 · 109 阅读 · 0 评论 -
vue 路由传参的3种方式
1. 路由配置// 页面路由格式 /detail/1// 页面刷新后路由参数依然在。// 路由定义{ name:'Detail', path:'/detail/:id', component:Detail}// 页面跳转this.$router.push({ path:'/detail/1',})// 或者同方式2this.$router.push({ name:'Detail', params:{id:1}})// Deta原创 2021-05-17 17:32:14 · 212 阅读 · 0 评论 -
vue slot插槽
1. 匿名插槽<!-- parent --><Children> <h4>标题内容</h4><!-- 匿名插槽默认用default做参数,v-slot仅能用于template标签 <template v-slot:default> <h4>标题内容</h4> </template> --></Children><!-- chil原创 2021-05-08 15:26:38 · 135 阅读 · 0 评论 -
vue 组件通信
1. 父子组件通信1.1 父传子值props// parent<Children msg="success" />// childrenprops: { msg: String}1.2 子传父值,父改子值$refs// parent<Children ref="cld" />mounted(){ console.log(this.$refs.cld.content) this.$refs.cld.content='我是父原创 2021-05-07 11:14:43 · 106 阅读 · 0 评论 -
vue 引入本地音频文件
在需要引入音频的vue文件中使用 require 的方式引入,指定使用 file-loade示例如下const sounds = require("file-loader!../assets/sounds/sounds.mp3");转载 2020-04-03 12:26:42 · 5179 阅读 · 0 评论 -
vue 子组件直接修改父组件的值
子组件:this.$vnode.context.parentData = '123'原创 2019-12-23 21:07:48 · 407 阅读 · 0 评论 -
vue webstorm 活动模板快速初始化
新建vue文件的结构几乎都一样,但每次都要复制粘贴也很麻烦,可以使用活动模板设置一下,快速初始化。打开文件 ---> 设置 ---> 编辑器 ---> 活动模板 ---> 点击右侧加号 ---> 1.Live Template缩写处写上新建模板的快捷符号,描述随便写,模板文本处编辑好vue的模板内容,然后点击下方蓝色文字“defined”(因为我已经设置...原创 2019-04-23 15:43:05 · 609 阅读 · 0 评论 -
vue 安装使用font-awesome字体
1.npm安装font-awesomecnpm i font-awesome --save-dev2.main.js引入font-awesomeimport 'font-awesome/css/font-awesome.css'3.index.html引入css标签<link href="https://cdn.bootcss.com/font-awesome/5....原创 2019-04-21 10:36:31 · 1290 阅读 · 1 评论 -
关于sublime text中vue高亮显示无效的问题
1.高亮显示在sublime中打开vue文件不能高亮显示,可以安装插件--vue syntax highlight ,如果安装后vue文件仍然没有高亮,可以重新打开sublime,如果仍然无效,重新打开vue文件就可以高亮显示和自动补全了。2.如果js和template部分正常显示,而css部分不能正常高亮删除插件--vuejs complete package然后重新打开...原创 2019-01-04 15:45:24 · 1065 阅读 · 0 评论 -
在vue-cli2中使用bootstrap,cli3安装jq
1.安装jquery(vue-cli2)(1)安装npm install jquery --save-dev(2)配置webpack.config.js (在build文件夹下) ①在头部加入如下const webpack = require("webpack"); ②在module.exports 末尾加上如下plugins: [ ...原创 2019-01-22 15:00:57 · 672 阅读 · 0 评论