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{}, ...
随机推荐
- Python之(scikit-learn)机器学习
一.机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或 ...
- 区块链公链分片技术(sharding)方案思维导图
- base64码通过http传输 +号变 空格 以及 图片编码后字符串较长导致POST提交失败 问题解决
场景:图片上传OSS存储,接口拿字符串去接前端传的base64码,服务器打印入参传的值,发现和前端打印的值有所区别,服务器中打印的值所有+号全部变成空格. 解决办法: Java中使用:url = ur ...
- Computer Vision_33_SIFT:An efficient SIFT-based mode-seeking algorithm for sub-pixel registration of remotely sensed images——2015
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- python接口自动化1-requests-html支持JavaScript渲染页面
前言 requests虽好,但有个遗憾,它无法加载JavaScript,当访问一个url地址的时候,不能像selenium一样渲染整个html页面出来.requests-html终于可以支持JavaS ...
- 记录java+testng运行selenium(一)
整体的流程为下图 整体思路为: 1. 由程序开始运行时去读取ini文件中存储的浏览器及需要打开的url 2. test运行时通过description实现数据驱动,主要做两件事 2.1 第一件事为:读 ...
- SUSE Ceph Cephfs - Storage6
(1)Policy 配置文件,添加MDS角色定义 # vim /srv/pillar/ceph/proposals/policy.cfg # MDS role-mds/cluster/mds*.sls ...
- Linux:入门基础
一.操作Linux必知必会基础知识 二.在Linux命令下查看命令帮助信息 三.Linux挂机重启注销命令 四.Linux显示系统IP地址 一.操作Linux必知必会基础知识 1.Linux命令行组成 ...
- RT-Thread--内核移植
内核移植 内核移植就是指将 RT-Thread 内核在不同的芯片架构.不同的板卡上运行起来,能够具备线程管理和调度,内存管理,线程间同步和通信.定时器管理等功能.移植可分为 CPU 架构移植和 BSP ...
- maya pymel cmds ls 列出未知节点 unknown nodes
maya pymel cmds ls 列出未知节点 unknown nodes cmds.ls(type = 'unknown',fl = 1)