Vue組件使用之模板各種常見寫法與簡(jiǎn)單動(dòng)態(tài)組件的使用

1耕魄、配合模板:
(1) template:'<h2 @click="change">標(biāo)題2->{{msg}}</h2>'

         (2) 單獨(dú)放到某個(gè)地方
             a) type="x-template"  x-template可以隨意命名厨诸,但是不能沒有type
                 <script type="x-template" id="aaa">
                     <h2 @click="change">標(biāo)題2->{{msg}}</h2>
                 </script>
             b) <template id="aaa">
                 <h1>標(biāo)題1</h1>
                 <ul>
                     <li v-for="val in arr">
                        {{val}}
                     </li>
                 </ul>
                 </template>

     2、動(dòng)態(tài)組件:定義一個(gè)元素,動(dòng)態(tài)更新各種組件
         <component :is="組件名稱"></component>
         例子:
         <body>
            <div class="box">
                <input type="button" value="體育" @click="sSign='ty'" />
                <input type="button" value="音樂" @click="sSign='yy'"/>
                <component :is="sSign"></component>
            </div>
            <script src="bower_components/vue/dist/vue.js"></script>
            <script>
                var vm=new Vue({
                    el:".box",
                    data:{
                        sSign:"ty"
                    },
                    components:{
                        "ty":{
                            template:"<h3>這是體育新聞</h3>"
                        },
                        "yy":{
                            template:"<h3>這是音樂新聞</h3>"
                        }
                    }
                })
            </script>
        </body>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瘫寝,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌屉来,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狈癞,死亡現(xiàn)場(chǎng)離奇詭異茄靠,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蝶桶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門慨绳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事脐雪⊙嵝。” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵战秋,是天一觀的道長(zhǎng)璧亚。 經(jīng)常有香客問我,道長(zhǎng)脂信,這世上最難降的妖魔是什么癣蟋? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮狰闪,結(jié)果婚禮上疯搅,老公的妹妹穿的比我還像新娘。我一直安慰自己埋泵,他們只是感情好幔欧,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丽声,像睡著了一般礁蔗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上恒序,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天瘦麸,我揣著相機(jī)與錄音,去河邊找鬼歧胁。 笑死滋饲,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的喊巍。 我是一名探鬼主播屠缭,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼崭参!你這毒婦竟也來了呵曹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤何暮,失蹤者是張志新(化名)和其女友劉穎奄喂,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體海洼,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡跨新,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了坏逢。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片域帐。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赘被,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出肖揣,到底是詐尸還是另有隱情民假,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布龙优,位于F島的核電站羊异,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏陋率。R本人自食惡果不足惜球化,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一秽晚、第九天 我趴在偏房一處隱蔽的房頂上張望瓦糟。 院中可真熱鬧,春花似錦赴蝇、人聲如沸菩浙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽劲蜻。三九已至,卻和暖如春考余,著一層夾襖步出監(jiān)牢的瞬間先嬉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工楚堤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疫蔓,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓身冬,卻偏偏與公主長(zhǎng)得像衅胀,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子酥筝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 基本格式 以json的形式滚躯、將數(shù)據(jù)(支持所有格式)掛載在vue的data上、方法掛載在vue的methods上嘿歌。 ...
    kirito_song閱讀 753評(píng)論 0 21
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,204評(píng)論 0 6
  • Redis 數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)介 Redis 可以存儲(chǔ)鍵與5種不同數(shù)據(jù)結(jié)構(gòu)類型之間的映射掸掏,這5種數(shù)據(jù)結(jié)構(gòu)類型分別為Stri...
    DreamerRzc閱讀 236,762評(píng)論 26 273
  • 本群我命名為愛心群,我想經(jīng)營(yíng)一個(gè)有意義的群宙帝。不僅僅只為送書而送書丧凤,只為分享福利,我想相約大家如同家人茄唐,如同兄弟姐妹...
    Applestar英語老師閱讀 732評(píng)論 0 0
  • asdpkjaso hdo haosh doihjasohoashod haosdh oashd oihaos o...
    5201314zz閱讀 208評(píng)論 0 0