vue日常学习
1.$refs可以用来进行父子级间通信。ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件。用法如下parent.$refs.idname
使用方法:
在父级元素上加上ref属性
<button @click='change'>点击</button>
<app-test ref='child'></app-test>
methods:{
change:function(){
this.$refs.child.changehandle('父级传到子级')
}
}
子组件部分:
<template>
<div>
<input type="text" v-model='test' @change="changehandle(test)">
</div>
</template>
methods:{
changehandle:function(test){
console.log(test)
this.$emit('input',test)
}
}
这样可以输出父级传入的内容,输出为‘父级传到子级’
2.双向数据绑定
使用v-model来进行双向数据绑定,但是实际上这只是一个语法糖,本质是事件监听。
<input v-model="something">
<input v-bind:value="something" v-on:input="something = $event.target.value">
prop动态绑定value值
让组件的 v-model
生效,它必须:
- 接受一个
value
属性 - 在有新的 value 时触发
input
事件
(1).在自定义组件上添加v-model
<app-test v-model='par_test'></app-test>
<p>{{par_test}}</p>
(2).组件模板使用v-model进行双向数据绑定,然后$emit事件到外部,从而实现双向绑定。
<template>
<div>
<input type="text" v-model='test' @change="changehandle(test)">
</div>
</template> <script>
export default{
data() {
return{
test:'sc'
}
},
props:['value'],//接受value属性
methods:{
changehandle:function(test){
console.log(test)
this.$emit('input',test)//触发事件
}
}
}
</script>
vue日常学习的更多相关文章
- vue日常学习(2)
1.组件学习之内容分发 1.1 作用域插槽 父级 <div class="parent"> <child> <template scope=" ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
随机推荐
- centos7 GNOME 安装微信客户端
写在前边 最近新装了一个 centos7 GNOME 系统,用了很久了 win,突然转换 linux 桌面版,觉得焕然一新,给搬砖生活增添了一份新意 ~ 先看一下效果图: 怎么弄呢? 下载最新版本 t ...
- Python初识对象
一 楔子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人拿棍打狗, ...
- php批量检测并去除BOM头的代码
开发中会遇到BOM头, 导致程序无法执行. 浏览器返回接口如下图: 去除BOM头解决方法:<?phpini_set('memory_limit','1024M'); function check ...
- 2019.9.27,SAP成都研究院数字创新空间团队建设,射箭和游泳
2019年9月27日,秋高气爽,SAP成都研究院数字创新团队全体成员又迎来了一次团队建设活动.这次的主题是:射箭. 在正式活动之前,大家先享用了一顿泰式海鲜火锅: 吃饱喝足之后,我们来到了名为&quo ...
- IO模型之NIO代码及其实践详解
一.简介 NIO我们一般认为是New I/O(也是官方的叫法),因为它是相对于老的I/O类库新增的( JDK 1.4中的java.nio.*包中引入新的Java I/O库).但现在都称之为Non-bl ...
- VSCode Git 没有活动的源代码控制提供程序
主要原因:我以前安装的Git只允许在Git-Bash中运行,需要重新安装Git,选择允许三方软件的那个选项,然后安装Git插件,修改git.path即可. 以下是解决过程中的尝试,记录如下,实际上只需 ...
- Linux 之 压缩解压缩
Linux中常见的压缩格式 .zip .gz .bz2 .tar.gz tar.bz2 zip zip格式的压缩文件和win ...
- nn.Conv2d 参数及输入输出详解
Torch.nn.Conv2d(in_channels,out_channels,kernel_size,stride=1,padding=0,dilation=1,groups=1,bias=Tru ...
- 安装Windows8/Windows10时,在安装界面提示无法在此驱动器上安装Windows
该方法会清除整个硬盘上的数据,这是对整个硬盘的操作,如果你有多个硬盘,请一定要选好哪块硬盘,其他的硬盘数据不会被清除. 1.在当前的安装界面按Shift + F10,打开cmd窗口 2.输入diskp ...
- Class文件中的常量
常量池计数器 常量池是class文件中非常重要的结构,它描述着整个class文件的字面量信息. 常量池是由一组constant_pool结构体数组组成的,而数组的大小则由常量池计数器指定. 常量池计数 ...