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

作者: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>'
})

  • 原因:组件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组件的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解vue 组件的实现原理

    组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性.本文我们一起从源码的角度,了解一下组件的底层实现原理. 组件注册时做了什么? 在Vue中使用组件,要做的第一步就是注册.Vue提供了全局注册和局部注册两种方式. 全局注册方式如下: Vue.component('my-component-name', { /* ... */ }) 局部注册方式如下: var ComponentA = { /* ... */ } new Vu

  • vue 图片裁剪上传组件的实现

    先看一下总体效果: 上传文件做了大小和类型的限制,在动图中无法展现出来. 使用file类型的input实现选择本地文件 但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下. 方法1:使用label元素来触发一个隐藏的file类型的 input元素:(缺点:在多人开发时,可能出现重复的元素id,导致难以预料的bug) <input type="file" id='up_file_input' v-show='false' &

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • vue iview 隐藏Table组件里的某一列操作

    1.假设我要隐藏columns里的 "账户组名称" columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { title: '账户组名称', key: 'accountGroupName' }] 2.根据各自需求去判断 示例:如果是单账户表标题显示&quo

  • 适用于 Vue 的播放器组件Vue-Video-Player操作

    如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:

  • vue-dialog的弹出层组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

  • vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

    vuex数据改变,组件中页面不渲染 相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新 这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe

  • vue mounted组件的使用

    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置"钩子",应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统.(百度百科) 2.相对于前端来讲 对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行. 3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情 类型:Function 详细: e

随机推荐