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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
json数据的列循环示例
Sep 06 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
JavaScript实现通讯录功能
Dec 27 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性能测试工具xhprof的详解
2013/06/03 PHP
10条php编程小技巧
2015/07/07 PHP
php生成mysql的数据字典
2016/07/07 PHP
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
实现vuex原理的示例
2020/10/21 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python del()函数用法
2013/03/24 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
详解python中__name__的意义以及作用
2019/08/07 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
销售代表求职自荐信
2013/10/01 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
优秀员工演讲稿
2014/05/19 职场文书
小学班主任自我评价
2015/03/11 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android