vue 从服务器渲染的 html 创建组件

Question

I have a Vue instance already loaded with webpack which loads.vue files properly. However there are some files that I cannot use load as some of the html is rendered dynamically from the server.

Suppose I have a HTML file with the content below:

<div id="test">
  <input type="text" :value="message"></input>
</div>

How do I create a vue component with the template above?

This was my attempt.

const component = new Vue({
    name: 'test-component',
    el: '#test',
    data: {
        message: "hello world!"
    },
});

What I want rendered is

<div id="test">
  <input type="text" value="hello world!"></input>
</div>

Answer 1

If neither render function nor template option is present, the in-DOM HTML of the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.

---- https://v2.vuejs.org/v2/api/index.html#el