1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[GET] Vue.js Script, Awesome On Page Update

Discussion in 'HTML & JavaScript' started by alexel, Dec 3, 2015.

  1. alexel

    alexel Jr. VIP Jr. VIP

    Joined:
    Feb 20, 2015
    Messages:
    219
    Likes Received:
    64
    Location:
    New York
    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:p.
    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: ''
           }
    });
    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:
    HTML:
    {{ name }}
    {{ email }}
    
    Now were done!:peace:Hope you guys enjoyed it, and your ideas will flow much more for a checkout page!
     
  2. revproxy

    revproxy BANNED BANNED Jr. VIP Premium Member

    Joined:
    Nov 20, 2015
    Messages:
    396
    Likes Received:
    100
    Gender:
    Male
    Its called MVC Framwork..
    there alot of frameworks like: AngularJS, Backbone, ReactJS...