HTML中创建vue组件的办法有哪些？

发布时间：2022-11-17 11:10:23 所属栏目：语言来源：

导读：　　这篇文章给大家分享的是HTML中创建vue组件的方法，下文的几种方法示例中，除了有创建vue组件的操作还有调用创建vue组件的操作，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　
　　

这篇文章给大家分享的是HTML中创建vue组件的方法，下文的几种方法示例中，除了有创建vue组件的操作还有调用创建vue组件的操作，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　
　　方法一：Vue.extend( options )
　　
　　用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
　　extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount('selector选择器') 来挂载到指定的元素上。
　　Vue.extend + vm.$mount 组合
　　// 借用官网的例子，小小改动了一下
　　// 在父组件中，创建一个子组件，并调用
　　<div id='app'>
　　 <button>{{message}}</button>
　　 <div id="mount-point"></div>
　　</div>
　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　<script type="text/javascript">
　　 var vm = new Vue({
　　 el:"#app",
　　 data:{
　　   message:'父组件'
　　 },
　　 });
　　 // 创建构造器
　　 var Profile = Vue.extend({
　　 template: '<p>{{firstName}} {{lastName}} {{alias}}</p>',
　　 data: function () {
　　   return {
　　    firstName: 'N',
　　    lastName: 'H',
　　    alias: 'Y'
　　   }
　　 }
　　 })
　　 // 创建 Profile 实例，并挂载到一个元素上。
　　 new Profile().$mount('#mount-point')
　　 </script>
　　方法二：Vue.component( id, [definition] ) + Vue.extend( options )
　　
　　用法：Vue.component()注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
　　
　　<div id="app">
　　 
　　 <todo :todo-data="todoList"></todo>
　　</div>
　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　<script type="text/javascript">
　　// 构建一个子组件
　　var todoItem = Vue.extend({
　　 template: ` <li> {{ text }} </li> `,
　　 props: ['text']
　　})
　　
　　// 构建一个父组件
　　var todoWarp = Vue.extend({
　　 template: `
　　 <ul>
　　   <todo-item v-for="(item, index) in todoData" v-text="item.text"></todo-item>
　　 </ul>
　　 `,
　　 props: ['todoData'],
　　 // 局部注册子组件
　　 components: {
　　 //使用 components 定义组件时，若组件名称使用驼峰命名，则在引用组件时，需要把大写改为小写，并且用'-'将单词连接
　　 todoItem: todoItem
　　 }
　　})
　　// 注册到全局
　　Vue.component('todo', todoWarp) // 等同于下面这种写法
　　Vue.component('todo',Vue.extend({
　　 template : 'xxx',
　　 props:[xxx],
　　 components:'xxx'
　　}))
　　
　　new Vue({
　　 el: '#app',
　　 data: {
　　 todoList: [
　　   { id: 0, text: '工作' },
　　   { id: 1, text: '学习' },
　　   { id: 2, text: '休息' }
　　 ]
　　 }
　　})
　　</script>
　　方法三：直接使用Vue.component()
　　
　　<div id="app">
　　 <mycom></mycom>
　　</div>
　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　<script type="text/javascript">
　　 Vue.component('mycom',{
　　 template : '<h3>这是使用 Vue.component 创建的组件</h3>'
　　 })
　　 new Vue({
　　 el: '#app'
　　 })
　　</script>
　　但是这样写会有一个问题：在h3标签后出现另一个标签，就会出问题，
　　
　　Vue.component('mycom',{
　　 template : '<h3>这是使用 Vue.component 创建的组件</h3><h3>这是使用 Vue.component 创建的组件</h3>'
　　})
　　
　　
　　原因：组件template属性指向的模板内容，必须有且只能有唯一的一个根元素
　　解决方法: 用唯一的div作为父元素，将多个子元素包裹
　　方法四：使用Vue.component()
　　
　　在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构
　　
　　<div id="app">
　　 <mycom></mycom>
　　</div>
　　<template id="tem1">
　　 <h1>这是 template 元素</h1>
　　</template>
　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　<script type="text/javascript">
　　 Vue.component('mycom', {
　　 template: '#tem1'
　　 });
　　 new Vue({
　　 el: '#app'
　　 })
　　</script>

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

HTML中创建vue组件的 办法有哪些？

HTML中创建vue组件的办法有哪些？