alexel
Regular Member
- Feb 20, 2015
- 317
- 202
Hello everyone,
Couple of weeks ago I came across Vue.js, which alternatively is a replacement library for JQuery/Ajax. Vue is very easy and compatible for all sites. I'd give you a working example of how my scripts work for m sites, but its on my checkout page of my site that i cannot share with you's
.
And the script is done! But lets break it down. We started by declaring a new Vue, and we then specified the element we will be working with. And we are working with data types such as name and email (I'd hope you know that information will be collected in the form). The down side is, you can only have the live window somewhere nested in the element you are working in, nowhere outside of it, which is bearable.We only have two things left, to state with input tags we want live and where we want it to be printed. so in our input tag, you will need to place a v-model="name", tag and name the data type, so like this:Simple, v-model is the data variables we are working with. Now for the live output, I simply output it in a paragraph tag anywhere I want it to be. But you'll need to wrap it with 4 curly braces like this:
Now were done!eace:Hope you guys enjoyed it, and your ideas will flow much more for a checkout page!
Couple of weeks ago I came across Vue.js, which alternatively is a replacement library for JQuery/Ajax. Vue is very easy and compatible for all sites. I'd give you a working example of how my scripts work for m sites, but its on my checkout page of my site that i cannot share with you's
. What The Script Does
So essentially what the script does is: on a form for example, as the user is filling out the form, somewhere on the page will have a live feed of what he is typing (I call it the Copycat, because it's copying what your typing automatically). This is great for integrating your site with PayPal and you would rather skip the confirmation page and just go right to PayPal's checkout. So lets get started.Vue.js
Head over to vuejs dot org, to learn more about the library and some guides. And from their you can download the files. And link it to your site as a text/javascript.So heres what I had to figure out on my own and I would like to share with you guys. On your form you'll need to wrap the with a:
HTML:
. So the form page will have a div tag around it with a unique div id, make sure you choose something simple, I usually just use "app" for the id, mostly for convenience.Scroll to the bottom page to start writing your Vue.js code. (For the people that are new to web development, most javascript code that is placed under the footer will not interrupt the website's load time). So Vue is very basic and I'll show you why. place your script tag and write your first vue and the elements you will be working with and also its data. So this is how its going to look:
[HTML]new Vue({
el: '#what_ever_id_you_chose',
data: { name: '' email: ''
}
});
HTML:
{{ name }}
{{ email }}