在html文件中调用vue组件,vue创建组件的三种方式
本文主要介绍了在html中创建和调用vue组件的几种方法的总结，帮助大家更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
作者：Echoyya
资料来源：https://www.cnblogs.com/echoyya/
最近写项目的时候总会遇到在html中使用vue.js的情况，页面逻辑很多。以前的项目经验都是关于使用现有的项目架构，比如脚手架，使用。vue文件来完成组价注册，以及组件之间的调用。我没有在html中创建组件的经验，所以想借此机会学习和总结一下。
方法一：Vue.extend( options )
用法：使用基本的Vue构造函数创建一个“子类”。参数是包含组件选项的对象。数据选项是一个特例，需要注意——它必须是Vue.extend()中的一个函数
Extend创建的是Vue构造函数，而不是我们通常编写的组件实例，所以不能通过new Vue({ components: testExtend})直接使用，需要通过new Profile()挂载到指定的元素上。$mount(选择器选择器)。
Vue .扩展虚拟机。$mount组合
//借用官网的例子，稍微改动一下。
//在父组件中，创建一个子组件并调用
div id=应用程序
按钮{ {邮件} }/按钮
div id=装载点/div
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“父组件”
},
});
//创建构造函数
var Profile=Vue.extend({
模板： p { {名字} } { {姓氏} } { {别名}}/p ，
数据：函数(){
返回{
名字： N ，
姓氏： H ，
别名：“Y”
}
}
})
//创建一个配置文件实例，并将其安装在一个元素上。
新建个人资料()。$ mount(# mount-point)
/脚本
方法二：Vue.component( id, [definition] ) + Vue.extend( options )
用法：Vue.component()注册或获取全局组件。注册还会自动设置具有给定id的组件的名称。
div id=应用程序
！-如果你想使用一个组件，直接把组件的名字以HTML标签的形式引入页面-
todo :todo-data=todoList/todo
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本类型=文本/javascript
//生成子组件
var todoItem=Vue.extend({
模板：` li {{ text }} /li `，
道具：[文本]
})
//生成父组件
var todoWarp=Vue.extend({
模板：` 1
保险商实验所
todo-item v-for=(item，index)in todo data v-text= item . text /todo-item
/ul
`,
道具：[todoData]，
//在本地注册子组件
组件：{
//使用组件定义组件时，如果组件名是用hump命名的，那么在引用组件时，需要将大写改为小写，并用-连接单词
托多伊特姆：托多伊特姆
}
})
//注册到全局
Vue.com ponent( todo ，todo warp)//相当于下面的写法。
Vue.component(todo ，Vue.extend({
模板：“xxx”，
道具：[xxx]，
组件：“xxx”
}))
新Vue({
埃尔： #app ，
数据：{
todoList: [
{id: 0，text:工作 }，
{id: 1，text:学习 }，
{id: 2，text:休息 }
]
}
})
/脚本
方法三：直接使用Vue.component()
div id=应用程序
mycom/mycom
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本类型=文本/javascript
Vue.component(mycom ，{
模板： h3这是用Vue.component创建的组件/h3
})
新Vue({
埃尔： #app
})
/脚本
但是这样写会有一个问题：如果h3标签后面出现另一个标签，就会有问题。
Vue.component(mycom ，{
模板： h3这是用Vue.component创建的组件/h3h3这是用Vue.component创建的组件/h3
})
原因：组件模板属性指向的模板内容必须只有一个根元素。
解决方案：使用唯一的div作为父元素，并包装多个子元素。
方法四：使用Vue.component()
使用受控#app外部的template元素来定义HTML模板结构。
div id=应用程序
mycom/mycom
/div
模板id=tem1
H1是模板元素/h1。
/模板
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本类型=文本/javascript
Vue.component(mycom ，{
模板： #tem1
});
新Vue({
埃尔： #app
})
/脚本
方法五：使用Vue.component() + is
div id=应用程序
保险商实验所
li is=todo-item v-for=(todo，index)in todos :title= todo :key= index @ remove= remove todo(index)/Li
/ul
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本类型=文本/javascript
Vue.component(todo-item ，{
模板：` 1
里
{{title}}
button @click=$emit(remove )删除/button
/李
`,
道具：[标题]
})
新Vue({
埃尔： #app ，
数据：{
托多斯：[吃，游泳，阅读]
},
方法：{
removeTodo:函数(索引){
this.todos.splice(索引，1)
}
}
})
解释is属性：
一些HTML元素，如ul、ol、table和select，对可以出现在其中的元素有严格的限制。而有些元素，如li、tr和option，只能出现在特定的元素内部。当我们使用这些约束元素时，这会导致一些问题。例如
桌子
博客-帖子-行/博客-帖子-行
/表格
这个自定义组件会作为无效内容对外推广，最终渲染结果会是错误的。幸运的是，这个特殊的is属性为我们提供了一个解决方法：
桌子
tr是=blog-post-row/tr
/表格
以上是在html中创建和调用vue组件的几种方法的详细内容。关于在html中创建和调用vue组件的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。