html 文件添加引用 vue 文件作为自定义组件

废话不多说,直接上代码!

需要创建两个文件:side.vue、index.html

side.vue 文件内容

<template>
  <div>这个是 {{pageName}} 页面div>
template>

<script>
  module.exports = {
     data: function() {
         return {
             pageName: 'Side.vue'
         }
     }
 }
script>

<style scoped>
style>

index.html 文件代码

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title>
    <link rel="shortcut icon" href="#"/>
    
    
    <script src="https://unpkg.com/vue">script>
    <script src="https://unpkg.com/http-vue-loader">script>
    
  head>
  <body>
    
    <div id="app">
        <side>side>
    div>
    
    <script>
        new Vue({
            el: "#app",
            /* 引用 vue 文件为组件*/
            components: {
                'side': httpVueLoader('side.vue')
            }
        })
    script>
    
  body>
html>

我在 HBuilder 里的执行效果

html 文件添加引用 vue 文件作为自定义组件_第1张图片

注意不能直接以本地打开方式进行查看,因为没有效果,必须以网络形式进行查看! 你可以下载 HBuilder 软件在他的内置浏览器里进行查看,这个是以网络地址的形式进行查看的,不会出现跨域请求的问题。


相关参考:

  • 不使用webpack 不用编译 也能使用 vue组件,单文件vue: ,那就是使用 http-vue-loader

  • html页面引入vue组件之http-vue-loader.js

推荐阅读:

  • HTML5中使用vue组件

你可能感兴趣的:(JS,HTML,vue.js,html,前端)