Vue新手入门-3

来源：互联网发布：细说php精要版编辑：程序博客网时间：2024/06/05 02:53

基于vue2.5.9版本

定义全局组件（3种写法）

首先声明一个new Vue（{}）；然后在js里面编写；最后把注册的组件放入进去即可；

写法-1

 /*1.0 定义一个组件写法*/    //定义组件    var login12 = Vue.extend({        template: "    <h1>登录12</h1>",    })    //注册组件    Vue.component("login1", login12)    //在html中    <div id="app">        <login1></login1>    </div>

写法-2

/*2.0 定义一个组件写法*/    Vue.component("login", {        template: "<h1>登录</h1>",    })//在html中<div id="app">    <login></login></div>

写法-3

/*3.0 定义一个组件写法*/这里有两种写法一种是放入`template` ；另一种是放入`script`    Vue.component("ac1", {        template: "#acc1",    })    Vue.component("ac", {        template: "#acc",    })    //在html中    <div id="app">        <ac></ac>        <ac1></ac1>    </div>    //----    <template id="acc">        <a href="#">登录</a>    </template>    <script id="acc1" type="text/x-handlebars-template">        <a href="#">登录script</a>    </script>

最后-附上代码

<body><div id="app">    <login></login>    <ac></ac>    <ac1></ac1>    <login1></login1></div><template id="acc">    <a href="#">登录</a></template><script id="acc1" type="text/x-handlebars-template">    <a href="#">登录script</a></script><script>    /*1.0 定义一个组件写法*/    //定义组件    var login12 = Vue.extend({        template: "    <h1>登录12</h1>",    })    //注册组件    Vue.component("login1", login12)    /*2.0 定义一个组件写法*/    Vue.component("login", {        template: "<h1>登录</h1>",    })    /*3.0 定义一个组件写法*/    Vue.component("ac1", {        template: "#acc1",    })    Vue.component("ac", {        template: "#acc",    })    new Vue({        el: "#app",    })</script></body>

阅读全文

0 0