对vue的v-mode之使用

关于vue的v-model表单控件绑定,vue官网是这么说

呢怎么在自己写的组件中使用v-model,比如我要自己做一个酷炫帅的下拉框

这时候要扯到自定义事件,先来瞄一眼官网所说的语法糖

其实我当时看完有点没懂。。哈哈

首先,input是一个和change差不多的事件

1.onchange在改变了input的value的条件下,失去焦点时才会触发(若change和blur事件都符合条件则先change后blur)

2.oninput则value一改变就触发

贴上菜鸟详细了解链接,来点一下

原理后面聊,先了解下怎么用

 1 <template>
 2   <div
 3   v-clickoutside="handleClose"
 4   class="llw-select">
 5     <!--change-->
 6      <input type="text" class="llw-input"
 7       :value="currentValue"
 8       @change="handleChange"
 9       />
10   </div>
11 </template>
12 <script>
13   export default {
14     name: ‘llwSelect‘,
15     props: {
16       value: [String, Number]
17     }
18     data () {
19       return {
20         currentValue: this.value
21       }
22     },
23     methods: {
24       handleChange (event) {
25         this.currentValue = event.target.value
26         this.$emit(‘input‘, event.target.value) // 这里可以让外部的v-model监听
27       }
28     }
29   }
30 </script>

外面的v-model在组件中用this.$emit(‘input‘)来触发,在这里我绑定的是change事件,真正的应该是使用input~~~~

--------------------------------------------------------------华丽丽分割线------------------------------------------------------------------

当使用v-model的时候,这么神奇而有好用的东西,vue源码能了解出来点东西不~~~~~~~~~~~~~~~~

皮卡丘明天总结

ps...最爱梦璃了

时间: 2024-10-10 17:10:04

对vue的v-mode之使用的相关文章

vue.js的ajax和jsonp请求

首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax 和 jsonp 使用方法: //在Vue实例类使用 this.$http.get(url, [options]).then(successCallback, errorCallback); var test = new Vue({ el:'#v', data:{ jsonUrl:'xxxx', j

如何在Vue项目中使用Typescript

0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新的项目目录. mkdir typescript-vue-tutorial cd typescript-vue-tutorial 接着,在目录中创建如下目录结构. typescript-vue-tutorial/ ├─ dist/ └─ src/ └─ components/ TypeScript文件

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

Vue main.js 文件中全局组件注册部分

main.js中修改如下: 首字母替换成大写,加上小写字母v开头. import components from './components/' //加载公共组件 Object.keys(components).forEach((key) => { var name = key.replace(/(\w)/, (v) => v.toUpperCase()) Vue.component('v'+name, components[key]) }) 原文地址:https://www.cnblogs.

Vue在main.js之前单独引用某个依赖如(element-ui)

引用Vue并实例化 import Vue from 'vue'; const v = new Vue(); 引用 // token失效登录过期,强制跳转至登录页 axios.interceptors.response.use( response =>{ // token失效登录过期,强制跳转至登录页 if(response.data.code === -3){ //开始搞事情 v.$notify({ message: '登录时效已过期,即将强制跳转至登录', type: 'warning' })

vue基础响应式数据

1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应式数据是怎么做到的? 通过Object.defineproperty数据劫持 1 //vue 响应式数据是怎么做到的:数据劫持 Object.defineproperty 2 let obj = { 3 name:"小明", 4 age:32, 5 info:{ 6 b:10 7 } 8

[转]浅谈微信小程序

本文转自:http://www.cnblogs.com/liziyou/p/6340159.html 微信小程序 1.什么是小程序 小程序是指微信公众号平台小程序,小程序可以在微信内被便捷的获取和转播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是平行的体系. 2.小程序获取方式 一.线下扫码 小程序最基础的获取,是二维码,可以通过微信扫一扫二维码的方式进入小程序. 二.微信搜索 在微信客户端的搜索功能,输入小程序名称获取小程序 三.公众号关联 同一个的小程序和公众号可以进行关联

微信小程序探究

前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来学习,首先分析一下微信小程序是什么,听起来比较高大上,说实话原来我确实挺疑惑,到底这一套是什么开发机制,native?hybrid?纯h5?看网上各种教程上来就说api说语法,感觉不先理清楚是什么的问题就去搬api过来纯粹是耍流氓. 一.微信小程序是什么: 言归正传,微信小程序的本质是什么?个人理解

vue-resource 拦截器使用

在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面.如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量.那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的! vue-resource的interceptors拦截器的作用正是解决此需求的妙方.在每次http的请求响应之后,如果设置了拦截器如下,会

Vue-从入门到第三次世界大战_1

前言:当然世界大战是大家都不希望看到的这里是代表我会一直更新下去 ,那我为什么要这么写,没错我就是标题党. 先说下Vue介绍: 官网:https://cn.vuejs.org/ 为什么用:因为是TMD中国人写的 ,必须用用(其实好处多多) 从我这里能学到什么:因为自己也是刚开始学习这个框架,所以一起都会用小白视角去书写,没有高深的概念,我的目的就是 让你撸起袖子就是干,不要跟老夫讲什么,内存泄漏,内存溢出,什么分布式,什么集群,什么高内聚,低耦合(各种语言里面的问题) 让你写出来自己能看到,别人