html中创建并调用vue组件的几种方法汇总


Posted in Javascript onNovember 17, 2020

作者:Echoyya
出处:https://www.cnblogs.com/echoyya/

最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组件的经验,所以借此机会学习总结一下。

方法一: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">
 <!-- 如果要使用组件,直接把组件的名称以 HTML 标签的形式,引入到页面中-->
 <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>'
})

html中创建并调用vue组件的几种方法汇总

  • 原因:组件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>

方法五:使用Vue.component() + is

<div id="app">
 <ul>
  <li is="todo-item" v-for="(todo,index) in todos " :title="todo" :key="index" @remove="removeTodo(index)"></li>
 </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
 Vue.component('todo-item', {
  template: `
   <li>
    {{title}}
    <button @click="$emit('remove')">remove</button>
   </li>
  `,
  props: ['title']
 })
 new Vue({
  el: "#app",
  data: {
   todos: ["eating", "swimming", "reading"]
  },
  methods: {
   removeTodo: function (index) {
    this.todos.splice(index, 1)
   }
  }
 })

补充说明一下is属性:

有些 HTML 元素,诸如 ul、ol、table 和 select,对于可以出现在其内部元素是有严格限制的。而有些元素,诸如 li、tr 和 option,只能出现在特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如

<table>
 <blog-post-row></blog-post-row>
</table>

这个自定义组件 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法:

<table>
 <tr is="blog-post-row"></tr>
</table>

以上就是html中创建并调用vue组件的几种方法汇总的详细内容,更多关于html 创建调用vue组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 #Javascript
vue的webcamjs集成方式
Nov 16 #Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 #Javascript
详解JavaScript原型与原型链
Nov 16 #Javascript
详解JavaScript执行模型
Nov 16 #Javascript
Vue 实现拨打电话操作
Nov 16 #Javascript
微信小程序实现页面左右滑动
Nov 16 #Javascript
You might like
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python的slice notation的特殊用法详解
2019/12/27 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
python制作微博图片爬取工具
2021/01/16 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
高中生校园生活自我评价
2013/09/19 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android