Vue之组件的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>

        // Vue 中的组件分为局部组件和全局组件，局部组件的使用步骤：声明、挂载、使用

        // 全局组件用法如下:第一个参数是组件名，第二个参数是options

        Vue.component('Btn', {

            template: `<button>我是全局组件按钮</button>`

        })

        // 声明局部组件，组件名应大写

        var App = {

            template:`<div>我是局部组件App<Btn /></div>`,

            data(){ // ES6匿名函数写法

                return {} // 组件的data需要返回一个函数

            }

        };

        new Vue({

            el: '#app',

            // 使用局部组件

            template: `

                <App />

            `,

            data:function(){

                return {}

            },

            // 挂载局部组件

            components: {

                App

            }

        });

    </script>

</body>

</html>
巴特西

Vue之组件的使用

最新文章

热门文章
