Vue.js第四天學(xué)習(xí)筆記（組件）

更新時(shí)間：2016年12月02日 14:09:42 作者：愛(ài)喝酸奶的吃貨

這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，一個(gè)簡(jiǎn)單的組件示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在這篇文章之前小穎分享過(guò)小穎自己寫(xiě)的組件:Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果和Tree升級(jí)版(實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng))

先給大家看下小穎寫(xiě)了一個(gè)簡(jiǎn)單的組件示例:

組件:

<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,//類(lèi)型(原生構(gòu)造器：String, Number, Boolean, Function, Object, Array),如果綁定類(lèi)型不對(duì)將拋出一條警告
  required: true, //是否是必須項(xiàng)
  twoWay:true,//指定這個(gè) prop 為雙向綁定,如果沒(méi)有 '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>

在小穎寫(xiě)的組件中,小穎把創(chuàng)建組件時(shí),組件的大部分屬性都加了相應(yīng)注釋,大家看了要是還有什么疑問(wèn),可以留言哦.

下面看寫(xiě)調(diào)用組件后的效果圖吧:

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 自定義ColorPicker及使用方法
這篇文章主要介紹了Vue 自定義ColorPicker及使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
詳解Vue組件之間通信的七種方式
這篇文章主要介紹了Vue組件之間通信的七種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
使用寶塔面板中Nginx部署前端Vue項(xiàng)目完整步驟
在Kubernetes(K8S)部署前端Vue項(xiàng)目通常會(huì)涉及到使用Nginx作為靜態(tài)資源服務(wù)器的一個(gè)重要部分,這篇文章主要給大家介紹了關(guān)于使用寶塔面板中Nginx部署前端Vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2024-10-10
vue3項(xiàng)目使用pinia狀態(tài)管理器的使用
Pinia是一個(gè)專(zhuān)為Vue3設(shè)計(jì)的現(xiàn)代化狀態(tài)管理庫(kù),本文主要介紹了vue3項(xiàng)目使用pinia狀態(tài)管理器的使用,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-05-05
使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
這篇文章主要介紹了使用electron打包Vue前端項(xiàng)目的詳細(xì)流程,文中通過(guò)圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下
2024-04-04
Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級(jí)版,是一套基于vue2與vue3的桌面端組件庫(kù),它提供了豐富的組件幫助開(kāi)發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁(yè)面,本文給大家介紹了Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下
2024-08-08
Vue 中如何利用 new Date() 獲取當(dāng)前時(shí)間
在 Vue 開(kāi)發(fā)中，利用 new Date() 方法可以方便地獲取當(dāng)前時(shí)間，并通過(guò) Date 對(duì)象的方法進(jìn)行時(shí)間格式化和操作。通過(guò)本文的介紹，您應(yīng)該對(duì)在 Vue 中獲取當(dāng)前時(shí)間有了更深入的了解，并了解了一些常見(jiàn)的時(shí)間操作方法,需要的朋友可以參考下
2023-07-07
vue2中使用AntV?以g2plot為實(shí)例
這篇文章主要介紹了vue2中使用AntV?以g2plot為實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開(kāi)發(fā)環(huán)境使用node服務(wù)器跨域的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
前端VUE雙語(yǔ)實(shí)現(xiàn)方案詳細(xì)教程
在項(xiàng)目需求中我們會(huì)遇到國(guó)際化的中英文切換,這篇文章主要給大家介紹了關(guān)于前端VUE雙語(yǔ)實(shí)現(xiàn)方案的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08