【Vue.js 入门与实战】--组件-创建组件的方式3

简介: 一、创建组件的方式3操作:二、创建组件的三种方式回顾

组件-创建组件的方式3

内容介绍

一、创建组件的方式3操作:

二、创建组件的三种方式回顾

 

第三种方式和第二种没有太大区别,只不过在第二种内component 指向的模版字符串,书写比较复杂,因为没有智能提示,很容易漏掉“/” 等内容。

 

一、 创建组件的方式3操作:

<div id=" app">

 <mycom3></ my com3</div>

<!--在被控制的#app外面,使用 template 元素, 定义组件的HTML 模板结构 -->

<template id=" tmp1">

 <div>

     <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>

      <h4>好用,不错!</h4>

</div>

</template>

 

<script>

  Vue . component ( 'mycom3', {

     template: ' #tmpl1'

})

现在还是通过  component 来定义一个组件,只不过组件的模版机构经过了处理。

此时,保存后右键浏览,可以得到以下结果:

image.png

以上就是创建组件的方式3的具体操作。

 

二、创建组件的三种方式回顾

有三种方式可以创建组件,具体如下:

1.  直接通过 Vue.component,后面通过 vue.extend 创建

2.  还是通过 Vue.component,只不过第二项需要添加对象自变量

3.  可以抽离模版,放到 template 中,形成模块

相关文章
|
17天前
|
JavaScript
Vue 父传子组件传参 defineProps
Vue 父传子组件传参 defineProps
|
17天前
|
JavaScript 前端开发
Vue 创建组件
Vue 创建组件
|
21天前
|
JavaScript
vue给table组件添加合计
vue给table组件添加合计
12 0
|
17天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
34 0
|
3天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
8天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
14 0
|
8天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
56 1
|
13天前
|
JavaScript
vue 组件注册
vue 组件注册
|
13天前
|
JavaScript
vue 组件事件
vue 组件事件
|
21天前
|
JavaScript
组件中写选项的顺序(vue的问题)
组件中写选项的顺序(vue的问题)