Vue.js Tutorial for beginners

Vue.js Tutorial for beginners

Today, We want to share with you Vue.js Tutorial for beginners.In this post we will show you Getting Started with Vue – An Overview and Walkthrough Tutorials, hear for vuejs tutorial stp by step we will give you demo and example for implement.In this post, we will learn about Vue.js Tutorials – Vue.js Courses and Tutorials with an example.

Vue.js Tutorial for beginners

There are the Following The simple About Vue.js Tutorial for beginners Full Information With Example and source code.

  Vue.js Hello World

As I will cover this Post with live Working example to develop Best Free Vue.js Learning Resources, so the Top Tutorials To Learn Vue Js For Beginners for this example is following below.

Step 1:

git clone https://github.com/amejiarosario/vue-task-app.git
cd vue-task-app
git checkout start-here

npm install
npm start

Vue.js Components Tutorial

index.html

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="task in tasks">
      <label>
        <input type="checkbox"
          v-on:change="toggle(task)"
          v-bind:checked="task.done">

        <del v-if="task.done">
          {{ task.text }}
        </del>
        <span v-else>
          {{ task.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

index.js

new Vue({
  el: "#app",
  data: {
    tasks: [
      { text: "Learn Laravel", done: false },
      { text: "Learn MySQL", done: false },
      { text: "Play around in pakainfo", done: true },
      { text: "Build angular, vuejs awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(task){
    	task.done = !task.done
    }
  }
})

css Part

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Web Programming Tutorials Example with Demo

Read :

  Simple Vue js CRUD Example Tutorial From Scratch

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue js Tutorial for beginners.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of