vue.js 组件注册实例

最新推荐文章于 2024-01-06 18:42:42 发布

???Sir

最新推荐文章于 2024-01-06 18:42:42 发布

阅读量208

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LyMee/p/6394951.html

版权

本文介绍了Vue.js中的组件概念及其使用方法，包括全局组件与局部组件的注册方式、data属性为何必须是函数、如何通过Props在组件间传递数据，以及属性名在HTML与JavaScript中的命名规范差异。

摘要由CSDN通过智能技术生成

　　组件（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>