介绍
这篇文章主要介绍怎么利用Vue v模型实现一个自定义的表单组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
为什么要使用Vue Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
<强>功能描述:
通过点击按钮,可以增减购物数量
组件名称是CouterBtn
最终效果如下
我们使用vue-cli搭建基本的开发环境,这也是最快的进行.vue组件开发的方式
对于入口组件,App.vue(可以暂时忽略其他细节,我们的重点是如何写组件)
<强>应用程序。vue
, & lt; template>
,& lt; div id=癮pp"比;
,& lt; h5>这是一个利用,v模型实现的自定义的表单组件& lt;/h5>
,& lt; h7> CouterBtn组件的值,& lt; i>, {{, btnValue }}, & lt;/i> & lt;/h7>
,5只& lt; counter-btn v模型=癰tnValue"祝辞& lt;/counter-btn>
,& lt; form 类=啊?action=?add",方法=皃ost"比;
& lt; !——,才能真实情况请将,改类型为hidden ——比;
& lt;才能label =癱ount"祝辞值绑定到,input 隐藏域里& lt;/label>
& lt;才能input 类型=皌ext", name=癱ount",: value=https://www.yisu.com/zixun/" btnValue.res " id="数">
10.>
<脚本>
从“进口CounterBtn。/组件/CouterBtn.vue '
15. 出口默认{
数据(){
返回{
btnValue: {}
}
20.}，
组件:{
CounterBtn
}
}
25.>
h7我
边界1 px点缀
形式
30.margin-top 20 px
填充20 px
边界1 px点缀# ccc
标签
vertical-align:中间
35. <强>下面我来对App.vue中的一些代码进行一些说明,根据代码行数来说明
4:我们使用{{btnValue}}来获取自定义组件counter-btn的值,这里仅仅是展示效果用,
5:我们使用了counter-btn,自定义的组件,
9:我们将自定义组件的值,绑定到我们的表单组件输入中去,在真实的情况下,此输入的类型可能为隐藏类型,
21:由于我们需要在应用程序。vue组件中使用我们自定义的组件counter-btn,所以需要使用组件注册组件,这里还使用了ES6的对象解构,
26:我们使用CSS预处理器为笔,前提是你的node_modules中要安装此npm包和装载机,vue-cli已经帮我们处理好了笔的编译;根据个人情况选择,
我们自己设计的组件通过v模型,把组件内部的值传给了它所绑定的值
下面我们来看看我们的组件的实现
<强> CounterBtn。vue
, & lt; template>
,& lt; div 类=癱outter-wrapper"比;
,& lt; button 类型=癰utton", @click=皃lus"祝辞+ & lt;/button>
,& lt; button 类型=癰utton"在{{,result }} & lt;/button>
5只& lt; button 类型=癰utton", @click=癿inus"祝辞& lt;/button>
,& lt;/div>
,& lt;/template>
,& lt; script>
,export default {
10只;方法:,{
,- (){
,this.result——;
这。美元发出(& # 39;输入# 39;,,{res: this.result,,:, & # 39;——& # 39;})
},
15只+ (),{
,this.result + +;
这。美元发出(& # 39;输入# 39;,,{res: this.result,,:, & # 39; + + & # 39;})
,}
},
20只data (), {
,return {
,结果:0,
,}
,}
25只}
,& lt;/script>
,& lt; style lang=皊tylus", scoped>
,按钮
border 0
30只outline 0
border-radius 3 px
,按钮:nth-child (2)
,width 200 px
,& lt;/style> 我们可以看到组件的实现非常简单,3个按钮搞定;这里最关键的代码是
<代码>。释放美元(& # 39;输入# 39;,{res:这。结果,其他:& # 39;+ + & # 39;})
通过触发输入事件和自定的数据来实现把数据暴露给v模型绑定的属性值
以上是“怎么利用Vue v模型实现一个自定义的表单组件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
