Здравствуйте. Есть готовый код, но у меня на проекте он никак не хочет работать.
<template>
<div id="v-model-basic" class="demo">
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div>
</template>
<style>
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
</style>
<script>
Vue.createApp({
data() {
return {
message: ''
}
}
}).mount('#v-model-basic')
</script>
Вот структура проекта vue cli:
Helloworld.vue:
<template>
<div id="v-model-basic" class="demo">
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
</style>
App.vue:
<template>
<HelloWorld/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<code>
main.js
<code>
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
createApp(App)({
data() {
return {
message: ''
}
}
}).mount('#v-model-textarea')
<code>
Куда поставить html и css я разобрался, а код js не работает. Что нужно написать в main.js? И куда нужно поставить код js, чтобы заработало?