vue.js 組件注冊實例


  組件(Component)是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素, Vue.js 的編譯器為它添加特殊功能。在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <title>組件注冊</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<h4>注冊全局組件</h4>
<div id="app-1">
    <my-component></my-component>
</div>
<script>
//注冊 全局 組件
    Vue.component('my-component',{
        //選項
        template:'<div>這是全局注冊組件</div>'
    })
//創建根實例
    var app1=new Vue({
        el:'#app-1',
    })
</script>
<hr>

<h4>注冊局部組件</h4>
<div id="app-2">
    <div id="app-2">
        <my-component></my-component>
    </div>
</div>
<script>
var Child=Vue.extend({
    template:'<div>A custom component!</div>'
})

    var app3=new Vue({
        el:'#app-2',
        components:{
            'my-component':Child
        }
    })
</script>    
<hr>

<h4>data必須是函數</h4>
<div id="app-3">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>
<script>
    var data = { counter: 0 }
    
    Vue.component('simple-counter',{
        template:'<button v-on:click="counter+=1">{{ counter }}</button>',
        data:function(){
            return {
                counter:0
            }
        }
    })
    var app4=new Vue({
        el:'#app-3'
    })
</script>
<hr>

<h4>使用Prop傳遞數據</h4>
<div id="app-4">
    <child message="hello,vue.js"></child>    
</div>
<script>
    Vue.component('child', {
        // 聲明 props
        props: ['message'],
        // 就像 data 一樣,prop 可以用在模板內
        // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
        template: '<span>{{ message }}</span>'
    })

    var app5=new Vue({
        el:'#app-4'
    })
</script>
<hr>

<h4>camelCase-vs-kebab-case</h4>
<div id="app-5">
    <child my-message="hello!"></child>
</div>
<script>
    Vue.component('child',{
        props:['myMessage'],
        template:'<span>{{myMessage}}</span>'
    })
    var app6=new Vue({
        el:'#app-5'
    })
</script>
<pre>HTML 特性不區分大小寫。當使用非字符串模版時,prop的名字形式會從 camelCase 轉為 kebab-case(短橫線隔開)</pre>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM