Si pas déjà fait :
yarn global add @vue/cli

Puis :
vue create nomDeMonApp
Puis choisir les preset que l'on veut

structure d'une vue:

new Vue({
  el: '#app',
  data:{
    message: "Hello world",
    link: "https://devnotes.johan-clement.fr",
    success: true,
    persons: ["Johan", "Marion", "Jean"]
  },
  methods:{
    close: function (){
      this.success = false
    }
  }
})

On utilisera ensuite l'interpolation suivante:
<a :href="link">{{ message}}</a>
ou bien :
<a v-bind:href="link">{{ message}}</a>

<div v-if="success">
  Ce message s'affiche si success est à true
  n'est pas inclue dans le dom si false
</div>
<div v-show="success">
  Ce message s'affiche si success est à true
  est inclue dans le dom si false (display none seulement)
</div>

On peut également utiliser v-else
v-for pour boucler :
<ul>
  <li v-for="person in persons">{{ person}}</li>
  
Pour un faire un click:
<i @click="close"></i>
<i v-on:click="close"></i>
  
Pour lier un champ avec un input:
<input type="text" v-model="message" />
<input type="checkbox" v-model="success" />
  
On peut jouer sur les classes selon leurs valeurs:
<div class="ui message" :class="{success: success, error: !success}">
  Mon message
</div>
  
  

Start with vue using yarn

<div id="app">
  <counter></counter>
  <notifications></notifications>
</div>

Dans app.js:

class NotificationsStore {
  constructor (){
    this.state = {
      count: 0
    }
  }
  increment(){
    this.state.count++
  }
  decrement(){
    this.state.count--
  }
}
let notifications_store = new NotificationsStore()

let Counter = {
data: function (){
  return{
    state: notifications_store.state
  }
},
computed:{
  count: function(){return this.state.count}
}
template: `<div>
    {{ count }}
  </div>`
}

let Notifications = {
components: { Counter },
methods:{
  addNotification: function(){
    notifications_store.increment()
  }
},
template: `<div>
    <counter></counter>
    <button @click="addNotifications">Incrémenter</button>

  </div>`
}

new Vue({
  el: "#app",
  data:{
    notifications_count: 0
  },
  components: {Notifications, Counter}
})

store

//mains.js

import Router from './router/Router.js'

createApp(App).use(Router).mount("#app")


// ./router.Router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import NotFound from '@/views/NotFound.vue'

const routes = [
	{
		name: 'Home',
		path: '/',
		component: Home
	},
	{
		name: 'About',
		path: '/about',
		component: About
	},
  { 
      path: '/:pathMatch(.*)*', 
      name: 'NotFound', 
      component: NotFound 
  },
]

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes
})

export default router

Router

[Lifecycle Hooks \| Vue.js](https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram)

let vm = new Vue({
  el: '#app',
  data:{
    message: "Hello world",
    link: "https://devnotes.johan-clement.fr",
    success: true,
    persons: ["Johan", "Justine", "Jean"]
  },
  methods:{
    addPerson: function (){
      this.persons.push('Julie') = false
    }
  }
})

let vm = new Vue({
  el: '#app',
  data: function(){
    return{
      seconds: 0
    }
  },
  mounted: function (){
    this.$interval = setInterval(()=>{
      this.seconds++
    }, 1000)
  },
  destroyed: function (){
    clearInterval(this.$interval)
  }
  
})


instances

Vue.component('monMessage', {
  props: ['type', 'message'],
  template: '<div class="ui message" :class="type">{{message}}</div>'
})

ou bien

let message = {
  props: ['type', 'message'],
  template: '<div class="ui message" :class="type">{{message}}</div>'
}

Et on appelera le composant:
<message type="success" :message="message" ></message>

On peut préciser les props d'une manière typée:
props:{
  type: {type: [String, Number], default: 'success'},
  message: String
}

VueJS

Start with vue using yarn

store

Router

instances

Composants