3种vue组件的书写形式


Posted in Javascript onNovember 29, 2017

本文实例为大家分享了vue组件的书写形式,供大家参考,具体内容如下

第一种使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 #Javascript
纯js实现隔行变色效果
Nov 29 #Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 #Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 #Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 #Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 #Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 #Javascript
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
jquery处理json对象
2014/11/03 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
感恩之星事迹材料
2014/05/03 职场文书
影子教师研修方案
2014/06/14 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
受资助学生感谢信
2015/01/21 职场文书
工作保证书怎么写
2015/02/28 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Tomcat配置访问日志和线程数
2022/05/06 Servers