Как поместить код Vue в тег <code>в vue

Question

Это мой первый раз, когда я делаю пакет npm, я делаю демонстрацию пакета и хочу привести пример использования компонента.

, когда я помещаю использование компонента внутри pre и тег code, напримерэто

показывает эту ошибку

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>
    

import Vlider from "vlider";...

Я ожидаю, что это будет работать так же, как работает обычный тег в HTML.Я попытался загрузить некоторые блоки кода, пакеты npm, они все еще не работают, мне нужно, чтобы вы, ребята, помогли и внесли предложения, спасибо за вашу помощь

Answer 1

Директива v-pre должна указывать Vue не компилировать эту часть шаблона, но Vue по-прежнему выдает те же предупреждения, если в ее содержимое входит (например) тег <script>,В любом случае он не отображает содержимое в виде необработанного 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}}

Встраивание больших кусков HTML в переменную данных, конечно, немного неуклюже и требует некоторого экранирования различныхбиты и кусочки (например, включенный ${...} и тег </script> в вашем примере).Может быть проще поддерживать, если вы импортируете эту HTML-строку через ajax или как импорт веб-пакета , а не вставляете ее непосредственно в 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;

Answer 2

Поэтому я исправляю это, используя этот веб-сайт для кодирования моего кода https://mothereff.in/html-entities

, а затем я использую закодированную версию, помещаю ее в переменную и передаю ее в v-html, и vue будет обрабатывать ее.в виде строки и будет отображаться в виде строки

<pre>
  <code v-html="yourCodeVariable">
  

... ... data () {return {yourCodeVariable: `ваш закодированный html-код здесь`}} ...

Answer 3

пользователь v-html документы и не забывайте использовать \ после каждого разрыва строки, чтобы продолжить строку и игнорировать '' в качестве текстового контекста при \'

поэтому должно быть:

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

или

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

и example вы определяете его внутри data ()