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 学习 - 提高篇
Feb 02 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
javascript 易错知识点实例小结
Apr 25 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP 危险函数全解析
2009/09/09 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
详解Python Socket网络编程
2016/01/05 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
农行实习自我鉴定
2013/09/22 职场文书
集团薪酬管理制度
2014/01/13 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
一年级班主任感言
2014/03/08 职场文书
大学生在校表现评语
2014/12/31 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
拉贝日记观后感
2015/06/05 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
python双向链表实例详解
2022/05/25 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL