Vue.js第四天學(xué)習(xí)筆記（組件）
更新時(shí)間：2016年12月02日 14:09:42 作者：愛喝酸奶的吃貨
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，一個(gè)簡單的組件示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在這篇文章之前小穎分享過小穎自己寫的組件:Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果和Tree升級(jí)版(實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng))
先給大家看下小穎寫了一個(gè)簡單的組件示例:
組件:
<template>
<div class='content' v-if='showFlag'>
<input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='myFun' v-el:getvalue>
<label class='example-label'>觀察參數(shù)"compvalue"的變化:</label>{{compvalue}}
<button class='btn btn-danger' @click='compfun'>確定</button>
</div>
</template>
<script>
export default {
// 從父組件接收收據(jù)
props:{
compvalue:{
type:String,//類型(原生構(gòu)造器：String, Number, Boolean, Function, Object, Array),如果綁定類型不對(duì)將拋出一條警告
required: true, //是否是必須項(xiàng)
twoWay:true,//指定這個(gè) prop 為雙向綁定,如果沒有 'sync' 將拋出一條警告
default:'',//默認(rèn)值
},
compwidth:{
coerce: function (val) {
return val + '' // 將值轉(zhuǎn)換為字符串
}
},
compfun:{
type:Function,
required:true
}
},
ready: function() {},
computed:{},//計(jì)算屬性
methods: {//組件自身的方法
myFun:function(){
alert( this.$els.getvalue.value);
}
},
data() {//綁定數(shù)據(jù)
return {
showFlag:true,
}
}
}
</script>
調(diào)用組件:
<template>
<div class='example-content'>
<compexample :compvalue.sync='values' :compfun='compFun'></compexample>
</div>
</template>
<script>
import compexample from './componentExample.vue'//引入組件
export default {
components: {
compexample
},
ready: function() {
},
methods: {
compFun:function(){
alert('喵嘞個(gè)咪');
}
},
data() {
return {
values:'hello'
}
}
}
</script>
在小穎寫的組件中,小穎把創(chuàng)建組件時(shí),組件的大部分屬性都加了相應(yīng)注釋,大家看了要是還有什么疑問,可以留言哦.
下面看寫調(diào)用組件后的效果圖吧:
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3項(xiàng)目如何國際化實(shí)戰(zhàn)指南
像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國際化的相關(guān)資料,需要的朋友可以參考下2022-09-09
keep-alive是Vue提供的一個(gè)抽象組件,用來對(duì)組件進(jìn)行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關(guān)于vue?Keep-alive組件緩存的簡單使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
mpvue從底層支持 Vue.js 語法和構(gòu)建工具體系，同時(shí)再結(jié)合相關(guān)UI組件庫，便可以高效的實(shí)現(xiàn)小程序開發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項(xiàng)目框架 ,需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了項(xiàng)目開發(fā)中husky的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了vuejs簡單驗(yàn)證碼功能,結(jié)合完整實(shí)例形式分析了vue.js驗(yàn)證碼的生成、顯示、校驗(yàn)等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue開發(fā)項(xiàng)目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫,我們在實(shí)際開發(fā)的過程中會(huì)經(jīng)常遇到需要使用圖標(biāo)的場景,對(duì)于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下2021-11-11
elementui使用el-upload組件如何實(shí)現(xiàn)自定義上傳
這篇文章主要介紹了elementui使用el-upload組件如何實(shí)現(xiàn)自定義上傳，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
對(duì)應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧2023-10-10