如何将 URL 引用到 Vue.Component.Template

how to reference URL into Vue.Component.Template(如何将 URL 引用到 Vue.Component.Template)

问题描述

How to refer URL into Vue.Template link. Template is longer and all operations are going to include to mounted/methods.

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: './views/templatebutton.html'   //how to refer URL here.
})

You could read the local HTML file as a string, and then load the result into the template field. With a module loader (such as Webpack), you would use require() to import the HTML file:

// Foo.js
Vue.component('button-counter', {
  template: require('./views/templatebutton.html')
})

Alternatively, if vue-loader is available to your project, you could use single file components, which allow importing the template from an external file:

<!-- Foo.vue -->
<template src="./views/templatebutton.html" />

demo

这篇关于如何将 URL 引用到 Vue.Component.Template的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！