vue组件的3种书写形式
第一种使用script标签
<!DOCTYPE html>
<html>
<body>
<div id="app">
<my-component></my-component>
</div> <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。--> <script type="text/x-template" id="myComponent">//注意 type 和id。
<div>This is a component!</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
//全局注册组件
Vue.component('my-component',{
template: '#myComponent'
}) new Vue({
el: '#app'
}) </script>
</html>
第二种使用template标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div> <template id="myComponent">
<div>This is a component!</div>
</template>
</body>
<script src="js/vue.js"></script>
<script> Vue.component('my-component',{
template: '#myComponent'
}) new Vue({
el: '#app'
}) </script>
</html>
第三种 单文件组件
这种方法常用在vue单页应用中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template> <script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎！'
}
}
}
</script>
app.vue
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template> <script>
// 导入组件
import Hello from './components/Hello' export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 样式代码 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
参考文献：
1、关于vue 自定义组件的写法与用法
2、手把手教你写 Vue UI 组件库
3、vue组件编写
vue组件的3种书写形式的更多相关文章
- Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
- html中创建并调用vue组件的几种方法
最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...
- 注册vue组件的几种方式
1,全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2,局部注册 var Child = { template: '<div&g ...
- [vue]组件最佳实战
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- vue组件如何被其他项目引用
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...
- 自己编写并发布一个Vue组件
自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...
- 认识Vue组件
前言 Vue.js是一套构建用户界面的渐进式框架(官方说明).通俗点来说,Vue.js是一个轻量级的,易上手易使用的,便捷,灵活性强的前端MVVM框架.简洁的API,良好健全的中文文档,使开发者能够较 ...
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
- 如何封装使用api形式调用的vue组件
在实际开发中一般有两种封装vue组件的方法:一种就是常用的的通过props父组件传值给子组件的方法: 子组件 父组件: 还有一种就是通过调用api的形式,下面例子是本人在实际项目中封装的一个自定义图标 ...
随机推荐
- Typeclassopedia 阅读笔记：导言与 Functor
Typeclassopedia 阅读笔记 本文是对介绍 Haskell 中类型类(type classes)的文档 Typeclassopedia 的阅读笔记和简短总结,包含此文档中重要的知识点.读者 ...
- marquee标签弹幕效果
播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...
- Java接口和Java抽象类的认识
在没有好好地研习面向对象设计的设计模式之前,我对Java接口和Java抽象类的认识还是很模糊,很不可理解. 刚学Java语言时,就很难理解为什么要有接口这个概念,虽说是可以实现所谓的多继承,可一个只有 ...
- TextInputLayout使用时各个地方的字体颜色
我们现在在做Android端的输入框时,要具备如下功能: 默认提示获取焦点时提示上移至输入框顶部获取焦点时输入框有提示错误时增加错误提示直接上图: 默认情况: 获取焦点时: 开始输入文字时: 有错误时 ...
- Linux删除重复内容命令uniq笔记
针对文本文件,有时候我们需要删除其中重复的行.或者统计重复行的总次数,这时候可以采用Linux系统下的uniq命令实现相应的功能. 语法格式:uniq [-ic] 常用参数说明: -i 忽略大小写 - ...
- vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中
效果图 1.html <div> <div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave= ...
- C#那20道题
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Windows下Jupyter notebook 修改默认打开（工作、保存）文件夹（路径）
今天晚上兴致一起突然想看看我写了那么多的ipynb文件都去哪了 首先查了一下,应该是都默认保存到 C:\Users\芩溪儿 路径下了 然后我就想,我是不是得改改啊,总在那跟别的文件夹在一起总 ...
- Context、Select(day01)
Oracle sql: 4天 plsql: 2天 proc: 2天 数据库介绍 1.1 数据库简介 1.1.1 数据管理技术的发展 人工管理阶段:20世纪50年代中期之前 文件管理阶段:20世纪的50 ...
- [CodeForces]1042D
大意:求一个序列有几个子序列的和小于给定值,里面的数有正有负,序列长度≤200000. 列个式子,其实求的是sum[r]-sum[l-1]<T sum[r]-T<sum[l-1] 所以我们 ...