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 引发两次$(document.ready)事件
Jan 15 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JS中Location使用详解
May 12 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
多种方式实现js图片预览
Dec 12 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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
PHP 采集心得技巧
2009/05/15 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
javascript document.referrer 用法
2009/04/30 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
Python实现字典的key和values的交换
2015/08/04 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python正则表达式的使用
2017/06/12 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python的sorted用法详解
2019/06/25 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python super函数使用方法详解
2020/02/14 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
公司董事长岗位职责
2014/06/08 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
医生个人年终总结
2015/02/28 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
德生2P3收音机开箱评测
2022/04/30 无线电