[IMWeb训练营作业2]select
来源:互联网 发布:阿里数据分析平台 编辑:程序博客网 时间:2024/06/05 07:12
通过近两天的学习,初步实现了自定义的选择下拉框组件,其主要由<div>、<input>、<custom-select>、<ul>、<li>等标签构成基本的选择组件页面结构。主要的功能项:输入框及button按钮,构成初次展现的页面,通过点击输入框按钮,下拉列表选择项出现,当点击选择项中的某一项内容时,输入框中会出现相应的内容,再点击输入框,下拉选择项列表隐藏。同时,通过父组件与子组件之间的自定义属性及自定义事件的交互,实现父子组件间的数据交互。
用到的相关知识点:
1--组件
可以理解为页面的一部分,其具有独立的逻辑及功能或界面,同时又能与其他部分进行相应地融合,变成完整的应用。页面可以由这样一个个的组件构成,如导航栏、列表项、弹窗、侧边栏、下拉框、多选框等。页面相当于一个大的框架,将这些组件组合成一个功能更为强大的模块,组件方便被替换或删除,而不影响整个应用程序的运行。前端组件化的思想:将大的东西拆成一个个的小东西,然后完成小东西的功能,最后再将这些小东西进行组合,得到最初想要的模样,即分而治之的思想。使用组件的优势:提高开发效率;可重用;简化调试步骤;便于协同开发;提升整个项目的可维护性。
2—vue中的组件
Vue中的组件是一个自定义标签,vue.js的编辑器为其添加特殊功能;vue也可以扩展原生的html元素,封装可重用的代码。
组件的基本组成:样式结构、行为逻辑、数据
3—注册组件全局注册:
可以在任何模板中使用,使用前先注册。
语法:使用Vue.component(组件名,选项对象)
其中,Vue是构造函数,component是其下的方法组件名命名规则:camelCase、kebab-case
在html中使用组件:使用kebab-case命名法
eg. 注册:Vue.component(’my-component’,{}) 使用:<my-component<</my-component>
局部注册: 在组件实例中通过选项对象注册,只在所注册的作用域中使用{components:{ 组件名:选项对象 } }
4--组件间通信:
父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。
父组件->子组件:
组件实例的作用域是孤立的,不能在子组件直接用父组件的数据。父组件向子组件传递数据时,可以在组件上使用自定义属性绑定数据,在组件中需要显示的用props声明自定义属性。
子组件->父组件:
子组件向父组件传递数据时,需要用到自定义事件,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件。父组件用v-on用来监听子组件的事件是否触发了来作出相应的处理。
5—组件中的data必须是函数
每个组件是相互独立的,如果它们共用一个对象,在更改一个组件数据的时候,会影响其他组件。如果是函数的话,每个组件都会有自己独立的数据,相互之间不会影响。
6—受限制的元素
DOM模板解析:vue是在浏览器解析和标准化html后才获取模板内容,所以有些元素限制了能被它包裹的元素。如ul里只能放li 某些元素中放入了自定义属性,不符合W3C标准,会解析错误。
变通的方式:使用特殊属性is来扩展HTML标签功能。
核心代码:
<div id="app"> <!--//父组件-->
<div style="float: left">
<h2>自定义下拉框</h2>
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
<!--若想使用自定义组件,则需要下面先进行注册组件//子组件-->
</div>
<div style="float: left">
<h2>自定义下拉框2</h2>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
<!-- //这里可以使用驼峰命名方式也可以使用-形式-->
</div>
</div>
<script> //注册组件
Vue.component( "custom-select",{ //全局注册 //组件是独立的,不受外界影响.父组件
data:function(){
return {
selectShow:false,
val:""
};
},
props:["btnValue","list"],//props是用来绑定属性的,由父组件传过来的,这里显示声明要传入的 //参数,这里一定要使用驼峰命名方式template:`<section class="warp"><div class="searchIpt clearFix"><div class="clearFix"><input type="text" class="keyword" v-bind:value="val" @click="selectShow=!selectShow" /><input type="button" class="button" v-bind:value="btnValue"> <!--//此处value值需动态绑定--><span></span></div><custom-list v-show="selectShow" :list="list" v-on:receive="changeValueHandle"> </custom-list></div></section>`,methods:{changeValueHandle:function(value){this.val=value;}}})Vue.component("custom-list",{//把其放入js文件,然后通过script标签引入,别的文件即可使用到该组件props:["list"],template:`<ul class="list"><li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li></ul>`,methods:{selectValueHandle:function(item){ //在子组件中有交互,点击时告知父级,改变val的值,需触发一个自定义事件this.$emit("receive",item);}}})
new Vue({
el:"#app",
data:{
list1:["上海","北京","杭州"],
list2:["17-2-21","17-3-12","17-4-16"]
}
});
</script>
运行结果:
继续努力。。。。。。
0 0
- [IMWeb训练营作业2]select
- 【IMWeb训练营作业2】-select
- IMWeb训练营作业2-SELECT组件
- 【IMWeb训练营作业】select
- IMWeb训练营作业----select
- IMWeb训练营作业-Select
- 【IMWeb训练营作业】Select
- 【IMWeb训练营作业】select
- IMWeb训练营作业-select
- IMWeb训练营作业 select
- 【IMWeb训练营作业】作业2 select组件
- IMWEB训练作业--select
- IMWeb训练营作业--VUE练习2--select组件
- IMWeb训练营作业------仿SELECT
- 【IMWeb训练营作业】select 组件初版
- 【IMWeb训练营作业】select组件
- 【IMWeb训练营作业】Select组件
- 【IMWeb训练营作业】自定义 Select
- PHPcms9.6.0 最新版任意文件上传漏洞(直接getshell)
- 文章标题
- 【IMWeb训练营作业】实战vue练习之select 组件
- ARM指令集
- 解决 Navicat for Mysql连接mysql出现10038问题
- [IMWeb训练营作业2]select
- C++ vector 查找结构体向量变量(Vectors, structs and find)
- CCF NOI1037 个位数
- leetcode141. Linked List Cycle
- Webstorm创建Vue file.vue模板
- Maven添加远程仓库(六)
- HDU 2121:Ice_cream’s world II(不定根最小树形图)
- 工程管理器make
- 一起学react native实现简单购物车