Как поместить код Vue в тег <code> в vue
Я впервые делаю пакет 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.info(this.inputRange)
}
},
methods: {
vliderClick() {
console.info(`clicked`)
}
}
};
</script>
<style>
import "vlider/src/sass/vlider.scss"
</style>
</code>
</pre>
</template>
<script>
import Vlider from "vlider";
...
</script>
Я ожидаю, что это будет работать так же, как обычный тег в HTML. Я пытался загрузить некоторые пакеты кода npm, это все еще не работает, мне нужна ваша помощь и предложения, спасибо за вашу помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
пользователь v-htmlдокументы и не забывайте использовать \ после каждого разрыва строки, чтобы продолжить строку и игнорировать '' как текстовый контекст с помощью \'
так и будет:
<div v-html = "example">
<pre>
...
</pre>
</div>
или
<div>
{{example}}
</div>
и example вы определяете его внутри data()
попробуйте использовать стиль мустажа {{}}
я попробовал стиль mustage, он говорит, что не распознает метод импорта, что означает, что он по какой-то причине отображает тег <style>, я действительно запутался в том, как обрабатывать этот фрагмент кода как строку
я попробовал еще раз, используя v-html, на этот раз я использую объекты html, и все работает гладко, спасибо за вашу помощь
Предполагается, что директива v-пре говорит 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.info(this.inputRange)
}
},
methods: {
vliderClick() {
console.info('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>я попробовал стиль mustage, он говорит, что не распознает метод импорта, что означает, что он по какой-то причине отображает тег <style>, я действительно запутался в том, как обрабатывать этот фрагмент кода как строку
импорт html в виде строки может потребовать некоторой возни с webpack; см. stackoverflow.com/questions/37818401/…
Поэтому я исправляю это, используя этот веб-сайт для кодирования моего кода https://mothereff.in/html-entities.
а затем я использую закодированную версию, помещаю ее в переменную и передаю в v-html, а vue обрабатывает ее как строку и отображает как строку
<pre>
<code v-html = "yourCodeVariable">
</code>
</pre>
...
<script>
...
data() {
return {
yourCodeVariable: `your encoded html code here`
}
}
...
Это долгий путь вокруг. Если вы хотите кодировать html, вам ничего из этого не нужно, вы можете просто поместить закодированную версию прямо в шаблон. Если вы вытащите его в переменную данных, вам не придется его кодировать; просто вставьте его без v-html (что означает, что vue закодирует его для вас!)
@DanielBeck, я только что попробовал, и это выдает мне ошибку для 2-го блока кода, потому что в нем есть некоторые символы мустажа, и vue воспринимает его как обычный символ мустажа, я думаю, что лучше сделать это с помощью v-html и переменные, чтобы избежать ошибок
Ах, хороший момент, но вы можете использовать v-pre, чтобы исправить это (я обновил свой ответ, чтобы показать пример). Я действительно не знаю, почему вы хотите использовать здесь v-html; если вы уже приложили усилия для извлечения строки HTML в переменную данных, вы можете позволить Vue выполнить работу по ее кодированию вместо того, чтобы делать это вручную.
@DanielBeck о да, ты прав, спасибо за твое предложение
это не работает, это дает мне еще одну ошибку, потому что, по-видимому, v-html отображает html внутри него, что вызовет еще одну ошибку