如何将Vue代码放在vue中的<code>标签内

Question

第一次做npm包，正在制作包的demo，想放个组件使用的例子。

当我像这样将组件用法放在 pre 和代码标记中时

显示此错误

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

这是我的代码 (App.vue):

<template>
<pre>
    <code>
        <template>
            <vlider
            :id="'first'"
            :vlider-data="slider"
            :theme="'theme-dark'"
            v-model="inputRange"
            @click="vliderClick()"
            >
                <template> slot="bullet" slot-scope="bullet"
                    <label>{{ bullet.data.label }}</label>
                    <i
                    class="em"
                    :class="[`em-${bullet.data.extras.icon}`]"
                    ></i> 
                    <a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
                </template>
            </vlider>
        </template>
        <script>
            import Vlider from "vlider";

            export default {
                name: "app",
                components: {
                    Vlider
                },
                data() {
                    return {
                        inputRange: null,
                        slider: [
                            {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                            {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                            {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                            {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                            {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                            {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                        ]
                    };
                },
                watch: {
                    inputRange() {
                        console.log(this.inputRange)
                    }
                },
                methods: {
                    vliderClick() {
                        console.log(`clicked`)
                    }
                }
            };
        </script>
        <style>
            import "vlider/src/sass/vlider.scss"
        </style>
    </code>
</pre>
</template>

<script>
import Vlider from "vlider";
...
</script>

我希望它能像 HTML 中的普通标签一样工作。我已经尝试下载一些代码块 npm 包，它仍然不起作用，我需要你们的帮助和建议，感谢你们的帮助

Answer 1

user v-html docs 不要忘记在每个换行符后使用 \ 来继续字符串并忽略 '' 作为文本上下文 \'

所以应该是:

    <div v-html="example">
     <pre>
      ...
     </pre>    
    </div>

或

<div>
  {{example}}
</div>

和 example 你在 data()

里面定义它

Answer 2

v-pre 指令应该告诉 Vue 不要编译模板的那部分，但如果其内容包含（例如）<script> 标记，Vue 似乎仍会抛出相同的警告.在任何情况下，它都不会将其内容显示为原始 HTML。您需要将其提取到数据变量中，并且 而不是 在这里使用 v-html （这与您想要的相反）：

new Vue({
  el: '#app',
  data() {
    return {
      codeSample: `
<template>
    <vlider
    :id="'first'"
    :vlider-data="slider"
    :theme="'theme-dark'"
    v-model="inputRange"
    @click="vliderClick()"
    >
        <template> slot="bullet" slot-scope="bullet"
            <label>{{ bullet.data.label }}</label>
            <i
            class="em"
            :class="['em-${bullet.data.extras.icon}']"
            ></i> 
            <a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
        </template>
    </vlider>
</template>
<script>
    import Vlider from "vlider";
    export default {
        name: "app",
        components: {
            Vlider
        },
        data() {
            return {
                inputRange: null,
                slider: [
                    {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                    {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                    {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                    {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                    {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                    {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                ]
            };
        },
        watch: {
            inputRange() {
                console.log(this.inputRange)
            }
        },
        methods: {
            vliderClick() {
                console.log('clicked')
            }
        }
    };
</\script>
<style>
    import "vlider/src/sass/vlider.scss"
</style>
        `
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <pre><code>{{codeSample}}</code></pre>
</div>

在数据变量中嵌入大块的 HTML 当然有点笨拙，并且需要对各种零碎的东西进行一些转义（例如包含的 ${...} 和 </script> 标签在你的例子中）。如果您通过 ajax 导入 HTML 字符串或作为而不是像我在这里所做的那样直接将其嵌入 data() 中，则可能更容易维护。

（如果您想要代码示例的语法着色，您可能还想查看 vue-highlightjs；它也取决于将源代码放在组件数据变量中而不是在模板内内联。 )

或者简单的方法

如果您愿意提前转义 html，您可以直接将其插入模板，并使用 v-pre 告诉 Vue 忽略嵌入的 html:

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

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">

  <pre><code v-pre>&lt;script&gt;... {{foo}} &lt;/script&gt;</code></pre>

</div>

Answer 3

所以我通过使用这个网站对我的代码进行编码来修复它https://mothereff.in/html-entities

然后我使用编码版本并将其放入变量中并将其传递给 v-html，vue 会将其视为字符串并将其显示为字符串

<pre>
  <code v-html="yourCodeVariable">
  </code>
</pre>
...
<script>
...
data() {
  return {
     yourCodeVariable: `your encoded html code here`
  }
}
...

如何将Vue代码放在vue中的<code>标签内

How to put Vue code inside <code> tag in vue

javascript

vue.js

vue-component

vuejs2

vue-cli-3

或者简单的方法