vue其他杂七杂八
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>杂七杂八</title> </head> <body> <div id="parent"> <user ref="profile"></user> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('user',{ template:'<p>你好,蔡蔡</p>' }) var vm=new Vue({ el:'#parent', data:{ } }) var child=vm.$refs.profile //取得这个组件的实例: </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>杂七杂八</title> </head> <body> <div id="parent"> <user ref="profile"></user> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('user',{ template:'<p>你好,蔡蔡</p>' }) var vm=new Vue({ el:'#parent', data:{ } }) var child=vm.$refs.profile //取得这个组件的实例: </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步组件</title> </head> <body> <div id="box"> <z-jian></z-jian> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('zJian',function(cana,canb){ //组件名称可定义为zJian z-jian ZJian 这几种 但在html里区分大小写 全部写成z-jian 在templates 模版里可写成与组件名一样的格式 setTimeout(function(){ cana({ template:'<div> hello caicai !</div>' }) },1000) }) new Vue({ el:'#box', data:{} }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步组件</title> </head> <body> <div id="box"> <z-jian name="stack-overflow"></z-jian> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('z-jian',{ name:'stack-overflow', template:'<div><stack-overflow>哈哈哈哈</stack-overflow></div>' }) new Vue({ el:'#box', data:{} }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态组件</title> </head> <body> <div id="box"> <terms-of-service></terms-of-service> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('terms-of-service', { template: '\ <div v-once>\ <h1>Terms of Service</h1>\ ... a lot of static content ...\ </div>\ ' }) new Vue({ el:"#box", }) //你可以在模板内部使用v-once,这样可以生成缓存,节约不少性能; </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>x-template</title> </head> <body> <div id="box"> <zjname></zjname> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/x-template" id="zj"> <p>对于html内容比较多的模板,你可以把模板定义在外面:</p> </script> <script type="text/javascript"> Vue.component('zjname',{ template:"#zj" }) new Vue({ el:'#box', }) </script> </html>