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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
javascript 必知必会之closure
Sep 21 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
简单实现js轮播图效果
Jul 14 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
js实现右键弹出自定义菜单
Sep 08 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
用php解析html的实现代码
2011/08/08 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python struct模块解析
2014/06/12 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python字典dict常用方法函数实例
2020/11/09 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
企业内控岗位的职责
2014/02/07 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
护理中职生求职信范文
2014/02/24 职场文书
2014国培学习感言
2014/03/05 职场文书
企业形象策划方案
2014/05/29 职场文书
法人委托书范本
2014/09/15 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书