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 其实是多种前端技术的组合,其中最重要的一个技术就 ...
随机推荐
- mysql update select 从查询结果中更新数据
UPDATE user_online_month_atu a INNER JOIN ( SELECT user_id, sum(c.online_times) as online_times, SUM ...
- Command模式(命令设计模式)
Command?? 把方法的调用用一个类的实例来承载,要管理工作的历史记录,创建这些方法执行的命令的集合,只需管理这些实例的集合即可,而且还可以随时再次执行过去的命令,或是将多个过去的命令整合为一个新 ...
- PHP学习 文件操作函数的应用--简单网络留言模板
<?php /** 网络留言板模式 主要运用到的函数有 fopen fclose flock fwrite fread explode list */ ?> <meta http-e ...
- python右键Edit with IDLE
在windows下试用python,Py文件的右键菜单有个Edit with IDLE,虽然这个ide不是那么功能强大,但是胜在方便.对于脚本语言的一般使用来说是足够了.但是有时候,这个菜单就消失了, ...
- DbUtils(一) 结果集概览
记录自己对DbUtils的学习和了解 我感觉Dbutils用的最多的就是对查询结果集的处理,就以这个开始了解Dbutils库. 查看源代码发现结果集的转换主要用于query,insert, ...
- java——集合、泛型、ArrayList、LinkedList、foreach循环、模拟ktv点歌系统
集合:一系列特殊的类,这些类可以存储任意类型的对象,长度可变,集合类都在java.util包中. 但是集合记不住对象的类型,当把对象从集合中取出时这个对象的编译类型就变成了Object类型.这样在取元 ...
- (转)linux正则表达式详解
linux正则表达式详解 http://blog.csdn.net/wuliowen/article/details/64131815 1:什么是正则表达式: 简单的说,正则表达式就是处理字符串的方法 ...
- OkHttp工具类
package test; import java.io.File; import java.io.IOException; import java.util.ArrayList; import ja ...
- 【翻译转载】【官方教程】Asp.Net MVC4入门指南(2):添加一个控制器
2. 添加一个控制器 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-c ...
- swift第一课快速体验playground
最近听说苹果要大力推行swift语言,所以我必须要赶快好好学一学,今天做第一个就遇到问题. 在Xcode7.2欢迎界面,选中创建第一个,我们一般都是默认创建第二个. 创建完后,出现问题了,提示如下: ...