vue.js全域性元件
阿新 • • 發佈：2018-11-01
全域性元件
可在任何例項的vm裡呼叫
方法一
這個好用,方便.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="div"> <!--呼叫元件--> <demo></demo> <demo></demo> <demo></demo> </div> <div id="div2"> <demo></demo> <demo></demo> <demo></demo> </div> <!--編寫元件--> <template id="tmp"> <!--如果想在html結構中，寫入多個標籤，外層必須包裹容器--> <div> <p>{{ msg }}</p> <h1 @click="fn()">{{ name }}</h1> </div> </template> </body> </html> <script type="text/javascript"> // 例項元件並取名 Vue.component('demo',{ // 繫結元件 template:"#tmp", // 設定變數 data:function(){ return{ msg:'hello', name:'leition' } }, // 設定方法 methods:{ fn:function(){ alert('OK!') } } }); var vm = new Vue({ el:'#div' }) var vm2 = new Vue({ el:'#div2' }) </script>
方法二
這個蠢,自己試試就知道了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="div"> <demo></demo> </div> </body> </html> <script type="text/javascript"> Vue.component('demo',{ template:"<div><p>{{ msg }}</p><h1 @click='fn()'>{{ name }}</h1></div>", data:function(){ return { msg: 'hello', name: 'leition' } }, methods:{ fn:function(){ alert('lala'); } } }); var vm = new Vue({ el:'#div' }) </script>
元件練習地址：https://blog.csdn.net/qq_39383675/article/category/8256374