Vue组件的书写形式

之前只是用过第三种方式去创建组件,最近接触到第一种写法的项目,所以写下了下面的内容

  1. 使用script标签


<html>
<head>
    <meta charset="utf-8">
    <title>title>
head>
<body>
    <div id='index-container'>
    div>

    <script type="text/x-template" id="index-template"> //注意 type 和id
        
class="container index-container" id="container"> div> script> body> html>
/* index.js */
require(['./asset/js/vue.min'], function (Vue) {
    var tmpIndex = new Vue({
        el: '#index-container',
        template: '#index-template',
        data: { ... },
        ...
    });
});

type指定为text/x-template,意在告诉浏览器这不是一段js脚本,浏览器在解析HTML文档时会忽略\


<html>
<head>
    <meta charset="utf-8">
    <title>title>
head>
<body>
    <div id='container'>
        <index-tmp>index-tmp>
    div>

    <template id="indexTmp">
        <div>...div>
    template>

    <script type="vue.js">script>
    <script>
        Vue.component('index-tmp',{
            template: '#indexTmp'
        });

        new Vue({
            el: '#container'
        });

    script>
body>
html>
  1. 单文件组件

以.vue为后缀的文件


<template>
  <div class="index">
    <h1>{{ msg }}h1>
  div>
template>

<script>
export default {
  name: 'index',
  data () {
    return {
      msg: 'Vue Template'
    }
  }
}
script>
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <index>index>
  div>
template>

<script>
// 导入组件
import Index from './components/Index'

export default {
  name: 'app',
  components: {
    Index
  }
}
script>

你可能感兴趣的:(Vue.js)