blog

Vue Js And Laravel

Nidhin T T 17 Dec 2018 5 Comments

What is Vue.js

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Let's Start With VueJs

First we need to include vue.js CDN so copy and paste this code in head tag in your blade
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
If your using the layout then add it to the layout.

Now copy this code test-vue {{ message}} will show you an error , use of undefined constant message, so you need to write it as @{{ message}} Make sure div id and el: are same.

Form Input Binding

You can use the v-model directive to create two-way data bindings on form inputs, "textarea," and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. Also, we use v-bind: value to bind values so that you can use v-model and v-bind, let's move on. vue js html code then write this script too vuejs js code

And then you can see the result result so finally , the basic structure is
var vueName = new Vue({
)};
and one more thing if you are using more than one vue in a single page , don't over ride , because it wont work,its always better to use single vue for a single page , use different variables for various purpose.

Now just try this too

vue js html code then write this script too vuejs js code

Then you will get the result like this result Now let's move on to the next session

CRUD operations in a single page

You have created your first website with a registration form. now you can see the registed users on the table image

Thank you for reading, if you have any doubts please contact me on nidhin@envcreations.com.

Latest Comments

team

Nidhin T T

Aug 02,2018

This blog was created for my friend Owusu Jacob , and i don't get enough time so it's not a perfect one.

replay
team

Anoop

Aug 02,2018

Its realy awesome, it worked for me , can you please show how to login and see the registerd users?

replay
team

Athira k Chinnu

Oct 07,2018

It is so helpful and supportive for my Project work, Thank you so much.-_-

replay

Popular Post

Popular Tags