component 全局局部組件
阿新 • • 發佈：2018-02-28
nbsp template obi width touch vue.js 方法 scrip 元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>template模版</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script><script src="../assets/js/flexible.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <div id="app"> <cai></cai> <panda></panda> </div> <panda></panda> <div id="box"> <cai></cai> <panda></panda> <!-- 局部組件有顯示 只會在id為app元素範圍內生效 --> </div> </body> <script type="text/javascript"> //註冊全局組件 Vue.component(‘cai‘,{ //// 全局組件 cai是組件名 template:`<div style="color:green">全局組件 名字cai</div>` }) var app=new Vue({ el:"#app", data:{ message:"hello 你好", }, components:{ //局部組件定義 只能用在 id為app的元素範圍內 "panda":{ template:`<div style="color:blue">局部註冊的panda組件，只能在id為app的標簽範圍內使用</div>` } } }) new Vue({ el:"#box", }) //組件定義兩種方法，第一種:註意全局在構造器外面定義 第二種:局部在構造器裏面定義 構造器裏的components 是加s的，而全局註冊是不加s的。 </script> </html>
component 全局局部組件