vue学习十六---component组件的三种创建方式
2020-01-12 20:58
615 查看
component组件
以下写了三种组件创建方式,个人推荐使用第三种,同时配了三个对应的demo
1. 使用 Vue.extend 配合 Vue.component 方法:
var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login);
2. 直接使用 Vue.component 方法:
Vue.component('register', { template: '<h1>注册</h1>' });
3. 将模板字符串,定义到script标签种:
<script id="tmpl" type="x-template"> <div><a href="#">登录</a> | <a href="#">注册</a></div> </script>
同时,需要使用 Vue.component 来定义组件:
Vue.component('account', { template: '#tmpl' });
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
例子一
<div id="app"> <!-- 如果要使用组件,直接把组件的名称 ,以HTML标签的形式 引入到页面中 ,即可 注意:标签不能使用驼峰命名,需要加'-'! --> <!-- 如果是非驼峰命名,则和组件名称一样即可! --> <my-com1></my-com1> </div> <script> /* // 1.1 使用vue。extend 来创建全局组件 var com1 = Vue.extend({ template: '<h3>这是使用Vue.extend 创建的组件</h3>' // 指向组件要展示的HTML结构 }) // 1.2 使用Vue.component('组件的名称',创建的组件模板对象) Vue.component('myCom1',com1) */ // 把前面两部分合为一部分 Vue.component('myCom1',Vue.extend({ template: '<h3>这是使用Vue.extend 创建的组件</h3>' // 指向组件要展示的HTML结构 })) var vm=new Vue({ el:'#app', data:{}, methods:{}
例子二
<body> <div id="app"> <mycom2></mycom2> </div> <script> // 只能有一个根元素 Vue.component('mycom2',{ template:'<div><h3>这是直接使用vue.component 创建组件</h3><span>第二个标签</span></div>' }) var vm=new Vue({ el:'#app', data:{}, methods:{} }); </script> </body>
例子三
<body> <div id="app"> <mycom3> </mycom3> </div> <!-- 在被vue实例mouth的外面使用template 元素,定义组件的模板结构 --> <template id = 'tmp1'> <div> <h1> 这是通过template创建的 ,在外部定义的组件 ,有代码的提示和高亮 </h1> </div> </template> <script> Vue.component('mycom3',{ template:'#tmp1' }) var vm=new Vue({ el:'#app', data:{}, methods:{} }); </script> </body>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 通过类似GetComponent从组件中直接获得接口的三种方式
- Vue中注册全局组件的三种方式
- React学习第二天(创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径)
- React创建组件的三种方式比较
- spring学习之---创建Bean的三种方式
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
- react学习笔记 item3 --- 组件的创建方式
- Vue组件的三种调用方式
- React创建组件的三种方式及其区别
- 对三种方式创建和使用Spring容器的学习
- vue学习笔记:6.2.组件的切换方式
- react创建组件的三种方式
- React创建组件的三种方式
- React创建组件的三种方式及其区别
- 韩顺平servlet学习笔记01-创建servlet的三种方式
- 记由创建自定义组件实例需求驱动的vue.extend学习过程
- 【WPF学习】创建WPF应用程序的三种方式
- React创建组件的三种方式
- React创建组件的三种方式比较和入门实例
- Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值