vuejs set

1. Create a Vue instance:

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

1. Use Vue directives in the HTML to bind data:

<div id="app">
  <p>{{ message }}</p>
</div>

1. Interact with the Vue instance in the browser console:

console.log(app.message); // Output: Hello, Vue!
app.message = 'Updated message';

1. Use directives for conditional rendering:

<div id="app">
  <p v-if="message">Message: {{ message }}</p>
  <p v-else>No message available.</p>
</div>

1. Handle user input with Vue methods:

<div id="app">
  <input v-model="message" placeholder="Enter a message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

1. Loop through an array with the v-for directive:

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3']
  }
});

1. Define methods in the Vue instance:

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

1. Use computed properties in the Vue instance:

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});