Posts

Showing posts from December, 2022

Simple click function to increase and decrease values of two buttons using Vue js

 Add button inside template component <button @click="increment" >{{count}}</button> <button @click="decrement" >{{dcount}}</button> Inside script tags add the following <script> export default {   data() {     return {       count: 0,       dcount: 100     }   },   methods: {     increment() {       // update component state       this.count++     },     decrement() {         this.dcount--     }   } } </script>

Vue js Text interpolation!

Image
Explanation: What is Vue js Text interpolation! In Vue.js, text interpolation is a way to output dynamic data in a template. It is done using the double curly brace syntax, {{ }}. For example: <template>   <div>     {{ message }}   </div> </template> <script> export default {   data () {     return {       message: 'Hello, Vue.js!'     }   } } </script> In this example, the message data property is output in the template using text interpolation. The value of message is "Hello, Vue.js!", so the template will render as: <div>Hello, Vue.js!</div> Text interpolation is a convenient way to output dynamic data in a template, but it has some limitations. For example, it cannot be used to output HTML or to execute JavaScript expressions. If you need to do these things, you can use directives such as v-html or v-bind.

Step to install Vue Js using npm & Node.js

Image
1. Make sure you have Node.js and npm (the Node.js package manager) installed on your machine. You can check if you have them installed by running the following commands in your terminal: node -v npm -v 2.If you don't have Node.js and npm installed, you can download and install them from the official website (https://nodejs.org/). 3.Once you have Node.js and npm installed, open your terminal and navigate to the directory where you want to create your Vue.js project. 4.Run the following command to create a new Vue.js project: npm init This command will create a package.json file in the current directory. 5.Next, install Vue.js by running the following command: npm install vue This will install Vue.js and add it as a dependency in your package.json file. 6.Now you can create a new Vue.js app by creating a new .vue file in your project directory and adding the following code: <template>   <div>Hello, Vue.js!</div> </template> <script> export default ...