组件 ue.component
Posted jinsuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件 ue.component相关的知识，希望对你有一定的参考价值。
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件 全局注册</title> </head> <body> <div id="box"> <my-component></my-component> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component(‘my-component‘,{ template:‘<div>这是我写的第一个组件！</div>‘ }) new Vue({ el:‘#box‘, data:{ } }) // 这样就在全局注册了一个组件，‘my-component‘是组件的名字，后面的{}里可以写参数，我们看到这里写了一个template，它是组件将会渲染的html内容；把组件名称当做一个标签来写即可。，Vue组件注册要写在前面，Vue实例初始化要写在后面， </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件-局部注册</title> </head> <body> <div id="box"> <my-component></my-component> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> var Child={ template:‘<div>这是我写的第一个组件</div>‘ } var vm=new Vue({ el:"#box", components:{ ‘my-component‘:Child } }) // 这边变量Child其实就是一个参数的对象，我们看到这里把‘my-component‘注册到了vm对象里面，那么<my-component>只能是在vm的作用域，也就是‘#box‘下起作用。 </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data例子 组件</title> </head> <body> <div id="box"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component(‘simple-counter‘, { template: ‘<button v-on:click="counter += 1">{{ counter }}</button>‘, data: function () { //data 后面一定要跟一个回调函数，date的属性一定要return回来 return{ counter:0 } } }) new Vue({ el:‘#box‘, }) </script> </html>
以上是关于组件 ue.component的主要内容，如果未能解决你的问题，请参考以下文章