vue 采坑
1.ref
在父组件中访问子组件实例,或者直接操作DOM元素时需要ref
<input ref="ipt">
通过this.$refs.ipt 得到此input
$refs是非响应式的,不应该在模板中做数据绑定
2.自定义事件
$on $emit
<!--使用v-on在html中监听-->
<my-component v-on:test="callbackFun"></my-component>
<script>
//直接用$on监听
vm.$on('text',function(){})
</script>
3.跳过css检测
对于只使用js过度的元素使用v-bind:css = "false" 跳过vue对css的检测
4.自定义组件
自定义组件的名字不能用html关键字或者候选字,不然会被当成html元素来解析
5.子组件通过按钮调用父组件定义的方法
父组件:
<p @childBtn = "ServiseList"></p>
methods:{
ServiseList(){
router.push({
name:'search',
params:this.ListParameter
})
}
}
子组件:
<button type="button" @click="commonality"></button>
methods:{
commonality(){
this.$emit("childBtn ")
}
}
vue 采坑的更多相关文章
- VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"
首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也 ...
- vue采坑及较好的文章汇总
1:父子组件传动态传值 https://www.cnblogs.com/daiwenru/p/6694530.html -----互传数据基本流程 https://blog.csdn.net/qq_ ...
- vue采坑一:全局API
Vue.set Vue.set( target, key, value ),target不能是 Vue 实例,或者 Vue 实例的根数据对象,因为源码中做了如下判断: var ob = (target ...
- vue采坑之——vue里面渲染html 并添加样式
在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示. 这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了.不 ...
- vue采坑记录
1.项目在浏览器运行的时候没有ico图标 <link rel="shortcut icon" type="image/x-icon" href=" ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- axios采坑之路
POST请求设置Content-Type 由于后端采用的是form表单形式上送参数,需要设置Content-Type axios设置如下 const _axios = axios.create(con ...
- nuxt 2.0采坑计之 (引入静态文件css)
nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为 (在nuxt.config.js配置中在 module.exports = {} 中添加) head: { meta: ...
- Service worker (@nuxtjs/workbox) 采坑记
PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...
随机推荐
- 我在B站学习 Javascript入门教程 基础
B站av9243452的一系列视频,适合学过其他编程语言的人观看,还挺不错的 共43节,该随笔为1~16节 Js介绍 如需使用外部文件,请在 <script> 标签的 "src& ...
- DozerBeanMapper 配置
applicationContext.xml <bean id="mapper" class="org.dozer.spring.DozerBeanMapperFa ...
- springBoot使用外部Tomcat启动项目
实现思路是: 将springBoot项目自带的tomcat在部署的时候不使用. 方法一:将springBoot自带tomcat编辑成只在编译和测试时使用. 转载出处:https://www.edurt ...
- HAProxy负载均衡安装配置
1.下载HAProxy http://haproxy.1wt.eu/download/1.4/src/haproxy-1.4.22.tar.gz 2. 安装haproxy #tar z ...
- iOS开发ReactiveCocoa学习笔记(二)
RAC 中常见的宏: 使用宏定义要单独导入 #import <RACEXTScope.h> 一. RAC(TARGET, [KEYPATH, [NIL_VALUE]]):用于给某个对象的某 ...
- 项目开发bug记录
项目开发中遇到了一个问题,类中出现未知属性 ‘ $jacocoData ’,准确的来说,实际上在集成测试阶段,系统自动运行测试用例时,抛出来的异常提示信息,但是在开发阶段是不存在的.这个问题是以前没有 ...
- Photoshop之切图
基本(繁琐)操作: 切JPG图(即带背景的图): 1. 选切片工具(另外,切片选择工具能选择切片和删除切片),切 2. 存储为Web所用格式(快捷键Ctrl + Shi ...
- 使用vuex管理数据
src/vuex/store.js 组件里面使用引入store.js,注意路径 import store from 'store.js' 然后在使用的组件内data(){}同级放入store 三大常用 ...
- echarts的title和legend重合解决(各种小细节)
一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...
- 网页游戏中PK系统的实现
在游戏开发过程中,写过一个简单的PK系统面板,涉及到前端和后端的交互,我将自己制作的流程分享给大家,大概流程是这样:前端发送PK邀请给后端,后端受到请求后将信息返回给前端处理,先来看下整个流程图及思路 ...