Vue не підтримує IE8 і нижче
Старт проекту на чистому vue.
Створюємо index.html
<!DOCTYPE html>
<html>
<head><title>Vue start</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Зв’язування атрибута тега зі змінною.
<div id="app">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<input v-model="message">
<span v-if="seen">Now you see me</span>
<li v-for="todo in todos">
{{ todo.text }}
</li>
<button v-on:click="reverseMessage">Reverse Message</button>
...
var app5 = new Vue({
...
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
або
@click="triggerReadMore($event)"
Старт проекту за допомогою CLI.
Встановлення.
npm install -g @vue/cli
Старт проекту.
vue create hello-world
Старт проекту на Nuxt.
npm init nuxt-app <project-name>