Question

This is my first time making an npm package, I'm making the package's demo, and I wanna put an example of the component usage.

when I put the component usage inside pre and code tag like this

it shows this error

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.

this is my code (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>

I expect it to work like how normal tag in HTML works. I've tried downloading some code blocks npm packages, it still doesn't work, i need you guys helps and suggestions with this, thanks for your help

Answer 1

应该使用v-pre指令告诉Vue不要编译模板的那部分，但是，如果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或作为webpack import导入HTML字符串，而不是像我在此处那样直接将其嵌入data()内，则维护起来可能会更容易。

（如果您想对代码样本进行语法着色，也可能要查看vue-highlightjs；这也取决于将源代码包含在组件数据变量中，而不是在模板内联。）< / p>

还是简单的方法

如果您愿意提前转义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 2

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

所以应该是：

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

或

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

和example可以在data（）内部定义它

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代码放入<code> tag in vue

3 个答案:

还是简单的方法