Как поместить код Vue в тег <code> в vue
Я впервые делаю пакет npm, я делаю демонстрацию пакета и хочу привести пример использования компонента.
когда я помещаю использование компонента в 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, они все еще не работают, мне нужно, чтобы вы, ребята, помогли с предложениями, спасибо за вашу помощь.
4 ответа
Пользователь v-html документы и не забудьте использовать \ после каждого разрыва строки продолжать строку и игнорировать '' как текстовый контекст \'
так должно быть:
<div v-html="example">
<pre>
...
</pre>
</div>
или же
<div>
{{example}}
</div>
а также example вы определяете это внутри data()
Предполагается, что директива 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}}</code></pre>
</div>Встраивание больших кусков 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><script>... {{foo}} </script></code></pre>
</div>вы можете использовать VueCodeBlock для отображения кодов. он также поставляется с потрясающими темами, которые можно настроить в темном и светлом режиме.
<template>
<VCodeBlock
:code="code"
highlightjs
lang="javascript"
theme="neon-bunny"
/>
</template>
<script setup>
const code = ref(`const text = 'hello'`)
</script>
Поэтому я исправляю это с помощью этого сайта для кодирования моего кода https://mothereff.in/html-entities
а затем я использую закодированную версию и помещаю ее в переменную и передаю ее в v-html, и vue будет обрабатывать ее как строку и отображать как строку
<pre>
<code v-html="yourCodeVariable">
</code>
</pre>
...
<script>
...
data() {
return {
yourCodeVariable: `your encoded html code here`
}
}
...