Vue组件模板的几种书写形式(3种)


Posted in Javascript onFebruary 19, 2020

1.第一种使用script标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <test-component></test-component>
    </div>
    <script type="text/x-template" id="testComponent"><!-- 注意 type 和id。 -->
      <div>{{test}} look test component!</div>
    </script>
  </body>
  <script>
    //全局注册组件
    Vue.component('test-component',{
      template: '#testComponent', 
      data(){
       return{
        test:"hello"
       }
      }
    })

    new Vue({
      el: '#app'
    })
  </script>
</html>

注意:使用<script>标签时,type指定为text/x-template,意在告诉浏览器这不是一段js脚本,
浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

2.第二种使用template标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <test-component></test-component>
    </div>

    <template id="testComponent">
      <div>look test component!</div>
    </template>
  </body>
  <script>

    Vue.component('test-component',{
      template: '#testComponent'
    })

    new Vue({
      el: '#app'
    })

  </script>
</html>

当然,如果template内容少的话,我们可以直接在组件中书写,而不需要用template标签。像下面这样:

Vue.component('test-component',{
    template:`<h1>this is test,{{test}}</h1>`,
    data(){
     return{
       test:"hello test"
       }
      }
  })

3.第三种 单文件组件

这种方法常用在vue单页应用中

创建.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>

以上就是Vue组件模板的几种书写形式(3种)的详细内容,更多关于Vue 组件模板请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
详解Vue 单文件组件的三种写法
Feb 19 #Javascript
vue中 v-for循环的用法详解
Feb 19 #Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 #Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 #Javascript
ES6中new Function()语法及应用实例分析
Feb 19 #Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 #Javascript
JS继承定义与使用方法简单示例
Feb 19 #Javascript
You might like
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
javascript操作数组详解
2014/12/17 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
python读取注册表中值的方法
2013/04/08 Python
Python解析nginx日志文件
2015/05/11 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
几个Shell Script面试题
2014/04/18 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
母校寄语大全
2014/04/10 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
教师工作态度自我评价
2015/03/05 职场文书
中学教师教学工作总结
2015/08/13 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android