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 其实是多种前端技术的组合,其中最重要的一个技术就 ...
随机推荐
- Webpack+Vue构建项目
第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...
- P1089津津的储蓄计划
题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以随时把整百的钱存在 ...
- flush logs时做的操作
flush logs时做的操作: 对于一般查询日志和慢日志,先关闭文件再打开 对于binlog,关闭当前的,开始用下一个新的 用错误日志文件的话,先关闭再打开flush logs可以对一般查询日 ...
- ProtobufUtils
import java.io.IOException; import java.io.InputStream; import java.lang.reflect.Method; import com. ...
- python_sting字符串的方法及注释
string类型是python内置的类型,无需安装 方法/属性 说明 capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 ...
- ORACLE数据库的备份和还原。
Oracle数据库备份与还原命令 数据导出: 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:\daochu.dmp中 exp system/manager@TEST ...
- 【Linux】Linux查看程序端口占用情况
使用命令查询8880端口的占用信息: netstat -naop|grep 查询结果: 发现8880端口被PID为4518的进程占用 使用命令查询所有的进程和端口使用情况: netstat –apn ...
- JVM垃圾收集器总结
前言: 了解了JVM垃圾回收算法之后就要说说垃圾收集器了. 一.三个概念 Stop-the-World:JVM执行任何一种GC算法时是会停止应用程序的执行的,所以大多数GC优化都是从减少Stop-th ...
- linux增加/删除虚拟IP地址
网卡上增加一个IP: ifconfig eth0:1 192.168.0.1 netmask 255.255.255.0 删除网卡的第二个IP地址: ip addr del 192.168.0.1 d ...
- 使用PM2守护Node.js应用
PM2简介 PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控.自动重启.负载均衡等,而且使用非常简单. 安装PM2 $ npm install pm2 -g ...