菜单

www.2138.com:文本的运用_vue,js_脚本之家

2020年4月9日 - www.2138.com

在生手教程里,看了vue.js的课程,看完后,练练手,就试着达成了必须要输入数字的输入框。在前头的博客里,用jquery也落成了这么的意义,这里用vue.js来兑现,把实现的经过记录下来

vuejs 自定义了一种.vue文件,可以把html, css, js
写到一个文书中,进而完毕了对贰个零器件的卷入, 三个.vue
文件正是三个单独的零部件。由于.vue文件是自定义的,浏览器不认知,所以须求对该公文实行剖释。
在webpack塑造中,必要安装vue-loader 对.vue文件实行分析。在 sumlime
编辑器中,大家 书写.vue 文件,可以设置vue syntax highlight
插件,扩大对文件的帮忙。

举例只是一个输入框,要得以达成就非常的简短了,输入框的内容和多少绑定,给多少加贰个监听器就能够了,代码如下:

用vue-cli 新建一个vue项目,看一下.vue文件长什么样?
在新建项目标进程中,命令行中会询问你多少个难点,当理解是还是不是安装vue-router
时,这里先接纳否。项目到位后,我们看出src 目录下有四个componet
目录,里面有叁个 Hello.vue 文件,内容如下,这里对template
里面的剧情做了某个去除

 Vue      var mydata = new Vue({ el: '#div1', data: { content: '' }, watch: { content: function{ this.content = val.replace 
  {{ msg }} Essential Links export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }}h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}

www.2138.com:文本的运用_vue,js_脚本之家。要是页面或是系统里有非常多如此的输入框,那样做,就不是很好了。各类数据都加三个监听器,然后某一天溘然须求改了,能够输入数字和字母了,那将在改得心悸了!并且这么做,代码也未有可移植性,到了另三个系统里,还得重写一回,所以,将在写一个通用的章程来得以完成那些须要。那个时候将要用到零件的效用,先新建三个js文件,小编这里就叫num.js。然后num.js里面包车型客车代码:

能够见见,在 .vue 文件中, template 中都是html
代码,它定义了在页面中突显的原委,由于内部还应该有变量,也能够说定义了三个模板;script中都以js
代码,它定义那几个组件中所需求的数额和及其操作,style 里面是css
样式,定义这么些组件的体裁,scoped 注明这里写的css
样式只适用于该零件,能够限定样式的效用域。

Vue.component('number', { template: '', data: function(){ return { con: '' } }, watch: { con: function{ this.con = val.replace

script 标签中 export defalut 后边的目的的知情。

如此就定义了一个零器件number,组件里是四个输入框,输入框的剧情与数码con绑定,监听器调控con只可以是数字。然后在html页面里引进num.js,在页面增添标签,在浏览器里,看到的正是叁个输入框,可是输入框只可以输入数字。在页面放置输入框,是为着让客商输入内容,输入的原委是要给程序用的。那要怎么获取输入框的内容?假如是用jquery的话,那正是透过dom来收获,但vue的布署性观念是dom和数码抽离,通过dom来得到就不稳妥,所以将在让输入框与三个数目绑定起来。

在不使用.vue 单文件时,大家是通过 Vue 结构函数创设一个 Vue
根实例来运行vuejs 项目,Vue 布局函数选择贰个指标,这些目的有一部分配备属性
el, data, component, template 等,进而对整个应用提供帮衬。

近日页面有四个输入框,多少个输入框的开始和结果要分头绑定到val1、val2、val3。该怎么弄?一起头,笔者的做法是在number标签上定义一个艺术,组件里con的监听器监听到con值有变动时,就调用那个艺术,把con的值传出来,而以此格局又会调用mydata里的二个办法,三回传递,把值传给对应的val。那逻辑,听着是否以为很绕。很绕都不怕,首要的是,他人用起来非常不便于,须要本身到mydata里定义三个格局来赋值。所未来来就再改,输入框的内容不是要绑定三个数目吧?那要绑定到哪些数据,得告诉自个儿吧,所以在number标签上,要求报告作者对象是哪位,属性名是哪位,那样,作者就足以把输入框的原委绑定到这些目的的那个性情上。在此处,对象就是mydata,属性名正是val1、val2、val3。把目的传进去,传的是字符串mydata,并非四个对象,在组件里面,要怎么使用mydata这几个目的?当时,就必要动用js里非常有力的贰个函数eval,eval函数接受一个字符串参数,只好是字符串,然后函数会把那么些字符串充任js代码来解析并施行。代码

new Vue({ el: '#app', data: { msg: "hello Vue" } })
  vue         第一个输入框的内容是: {{val1}} 第二个输入框的内容是: {{val2}} 第三个输入框的内容是: {{val3}}   var mydata = new Vue({ el: '#div1', data: { val1: '', val2: '', val3: '' } })  

Vue.component('number', { props: ['objname', 'keys'], template: '', data: function(){ return { con: '' } }, watch: { con: function{ this.con = val.replace; eval(this.objname+'[this.keys]=this.con'); } },})

在.vue文件中,export default 前边的目的 就一定于 new Vue(卡塔尔国布局函数中的接受的靶子,它们都以概念组件所急需的数量, 以致操作数
据的方法等, 更为全面的三个 export default 对象,有methods, data,
computed, 那个时候能够看出, 这些目的和new Vue(State of Qatar布局函数中经受的目的是如出一辙的。但要注意data 的书写方式区别。在 .vue
组件, data 必得是三个函数,它return,这么些重返的指标的数量,供组件达成。

那般,输入框约束了只好输入数字,也和数量绑字了,但那只是单向的绑字,输入框的剧情更换了,外面包车型客车数据会跟着变动,但外围的多少变动了,输入框的内容不会随着变动,所以,现在只是单向的绑定。在页面上面再增多五个管见所及的输入框,四个输入框分别绑定val1、val2、val3

把项目中自带的hello.vue 内容清空,大家温馨写叁个构件来体验一下这种相似。

以当时候到页面上操作就能够开掘,上边的输入框内容更换会潜濡默化上边包车型地铁,但下边包车型客车输入框内容改动了,就不会耳熏目染地点的输入框的剧情

    export default { data () { return { msg: 'hello' } }, methods:{ enter ; } }, computed: { upper () { return this.msg.toUpperCase(); } }} input { width: 200px; height: 20px; } p { color: red; }

本条时候,要达成行反革命向的绑定,那就须求在组件里为外部的数据增加监听器。有指标,有属性名,为它加监听器,是能够加的,但是外面包车型客车质量要绑定哪个组件里的输入框呢?所以组件上要再加多叁性子质ref,这些ref是vue定义的二个天性,用来找子组件的。这样,代码最后就改成

页面中有四个input输入框,当进行输入的时候,输入框上边包车型大巴剧情会进展协作显示,只可是它是大写,当输入实现后,按enter键就能够弹出大家输入的内容。获取客商输入的剧情,我们用的是v-model
指令,这么些命令将顾客输入的开始和结果绑定到变量上,而且它响应式的,我们的变量值会趁机用户输入的成形而生成,也正是说大家一味得到的都以顾客最新的输入。下边大写的显示,用的是computed属性,弹窗则是给绑定了三个keypress事件,通过陈述,你会发掘,它大约就是一个vue实例,实际上它便是个vue实例。每二个vue组件都以一个vue实例,更易于了然export default 前边的目的了。

    第一个输入框的内容是: {{val1}} 第二个输入框的内容是: {{val2}} 第三个输入框的内容是: {{val3}}    

Vue.component('number', { props: ['objname', 'keys'], template: '', data: function(){ return { con: '' } }, mounted: function(){ var self = this; window.addEventListener{ eval(self.objname+'.$watch(''+self.keys+'',function{this.$refs.'+self.keys+'.con=val})'); }) }, watch: { con: function{ this.con = val.replace; eval(this.objname+'[this.keys]=this.con'); } },})

父亲和儿子组件之间的通讯

如此那般,数据就落实了双向绑定。在mounted里面,add伊夫ntListener方法是有包容难点的,IE8及以下版本未有这么些措施,作者那边未有做合营管理。然后正是优化,看代码就意识,在number标签上,ref和keys实际上是同出一辙的,行还是不行只用叁个?经过实验,在组件内部获得ref的值获取不到,那些自家还不精通怎么获取,学得远远不足深呐。然后就是objname好不佳不传,不传的话就私下认可是组件的父对象,这么些是足以兑现的。最终,组件还足以开展一些扩展,例如再增多叁个属性mytype,mytype不传则暗许输入框只可以输入数字,假如为word,则输入框只好输入字母和数字,借使为chinses,则必须要输入中文汉字等。

每八个.vue 文件正是二个组件,组件和零件互相结合,就成了三个施用,那就提到到的机件和零器件之间的通讯,最常用的正是老爹和儿子之间的通讯。在vue
中, 在二个组件中经过 import
引入另四个组件,这一个组件正是父组件,被引入的机件正是子组件。

更多教程点击《Vue.js前端组件学习课程》,应接大家学习阅读。

在大家以此vue-cli 项目中,src 文件夹下有贰个App.vue
文件,它的script标签中,import Hello from ‘./components/Hello’,那么
App.vue 正是父组件,components 文件夹下的Hello.vue
便是子组件。父组件通过props
向子组件传递数据,子组件通过自定义事件向父组件传递数据。

至于vue.js组件的教程,请大家点击专项论题vue.js组件学习课程实行学习。

父组件向子组件传值, 它根本是经过成分的属性举行的. 在App.vue
的template中,有三个 , 那正是咱们引进的子组件. 给其增加属性如
mes-father=”message from father”;
父组件将数据传递步入,子组件必要采用手艺利用. 如何选拔呢?

上述正是本文的全体内容,希望对大家的上学抱有助于,也冀望大家多多指教脚本之家。

在Hello.vue 中, export default 前边的对象中,增添三个字段props,
它是一个数组, 特意用来抽出父组件传递过来的数据. props: [“mesFather”],
这里定义了mesFather 字符串, 和父组件中定义的因素的脾气一一对应.
可是我们在父组件,便是在 成分中定义的品质是mes-father, 未有种种对应啊?
那根本是因为,在html 成分中山高校小写是不灵活的。 假如大家写成,
里面包车型地铁mesFather 就能转造成mesfather,
相当于大家向子组件传递了叁个mesfather数据, 就算在js 文件中,大家定义
props: [“mesFather”],大家是选拔不到数量的,因为js 是分别朗朗上口写的,
只可以写成props: [“mesfather”]. 可是在js
文件中,像这种七个单词拼成的数目,大家习贯用驼峰命名法,所以vue
做了贰个转折,如若在组件中属性是 – 表示,它 自动会转造成驼峰式。
传进来的数额是mes-father, 转造成mesFather, 我们在js 里面写mesFather,
一一对应,子组件能够选取到构件。 props 属性是和data, methods
属性并列的,属同一品级。 props 属性里面定义的变量,在 子组件中的template
中得以向来利用。

App.vue 的template 改过如下:

Hello.vue组件,这里如故把项目中自带的Hello.vue
清空,本人写,形成如下内容

  {{mesFather}} export default { props:['mesFather']}

那时,在页面中观看 message from father
字样,父成分向子成分传递数据成功。

子组件向父组件传递数据,供给用到自定义事件。 举例,我们在Hello.vue
,写入二个input,
接受客商输入,大家想把顾客输入的数目传给父组件。当时,input
需求先绑定三个keypress
事件,获取客商的输入,同有时候还要发出自定义事件,如valueUp,
父组件只要监听那一个自定义事件,就足以知道子组件要向她传递数据了。子组件在发射自定义事件时,还足以引导参数,父组件在监听该事件时,还是能选择参数,参数,正是要传送的数目。

在 Hello.vue template中,加多一个input输入框,给它一个v-model
获取顾客的输入,再增添keypress的风云,用于发射事件,传输数据。script
中增加data,定义变量来赢得客商的输入,增加methods
来管理keypress事件的管理函数enter, 整个Hello.vue 文件如下

    {{mesFather}} export default { props:['mesFather'], // 添加data, 用户输入绑定到inputValue变量,从而获取用户输入 data: function () { return { inputValue: '' } }, methods: { enter () { this.$emit("valueUp", this.inputValue) //子组件发射自定义事件valueUp, 并携带要传递给父组件的值, // 如果要传递给父组件很多值,这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); } }}

在App.vue 中, template中hello 组件绑定叁个自定义事件,@valueUp
=“receive”, 用于监听子组件发射的事件,再写一个 p
成分,用于呈现子组件传递过来的多寡,

子组件传递过来的数据 {{ childMes }}

对应地,在scrpit中,data 中,定义一个变量childMes, 并在 methods
中,定义一个事件管理函数reciever。整个App.vue改善如下:

      子组件传递过来的数据 {{childMes}} import Hello from './components/Hello'export default { name: 'app', components: { Hello }, // 添加data data: function () { return { childMes:'' } }, // 添加methods,自定义事件valueUp的事件处理函数recieve methods: { recieve: function { // recieve 事件需要设置参数,这些参数就是子组件传递过来的数据,因此,参数的个数,也要和子元素传递过来的一致。 this.childMes = mes; } }}

那儿在input中输入内容,然后按enter键,就以阅览子组件传递过来的数额,子组件向父组件传递数据成功。

当在input输入框中输入数据,并按enter键时,它会触发keypress.enter事件,进而调用事件管理函数enter,
在enter 中, 大家发出了二个事变valueUp, 并教导了叁个参数,由于在
组件中, 我们绑定valueUp 事件,所以父组件在每一天监听valueUp 事件,
当子组件发射value
事件时,父组件即刻捕获到,并立时调用它的回调函数receive, 在receive
中,我们取得到子组件传递过来的多少,并赋值了data 中的变量childMes,
由于data
数据发生变化,从而触发dom更新,页面中就呈现子组件传递过来的剧情。

实质上在子组件中, props 最佳的写法是props 验证,大家在子组件Hello.vue中写
props:[‘mesFather’], 只是抒发出,它接收三个参数mesFather,
假如写成props
验证,不只好发挥出它供给哪些参数,还是能够表明参数类型,何况如有错误,vue
会做出警示。未来把props 改成props 验证的写法, Hello.vue
中的js中的props纠正如下:

props: { 'mesFather': { type: String, default: 'from father', required:true } }

假诺是组件与组件之间的通讯特别复杂,不光是父亲和儿子组件,还会有兄弟组件,那就要求采纳状态管理,vuex

上述正是本文的全体内容,希望对我们的读书抱有助于,也冀望大家多多指教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图