Vue-30、Vue.Component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.component</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="root">
    <app></app>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //第一步创建school组件
    const school = Vue.extend({
        //el:'#root'   //一定不要写el 配置项,因为最终所有的组件都要被一个vm 管理,由vm决定服务于那个容器。
        template: `
          

学校名称:{{schoolName}}

学校地址:{{address}}


`
, data() { return { schoolName: '清华大学', address: '北京', } }, }); console.log('@',school); const app = Vue.extend({ template: `
`
, components: { school } }); new Vue({ el: "#root", components: { app } }) </script> </body> </html>

总结

Vue-30、Vue.Component_第1张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)