Blog for Learning

| lesson material | material summary | questions and answers | definitions | types and examples | other information | materi pelajaran | ringkasan materi | pertanyaan dan jawaban | definisi | jenis-jenis dan contoh-contoh | informasi lainnya |

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Learning Vuejs: Get acquainted with Vuejs

Today I just got acquainted with Vue.js. I have heard about Vue.js from several friends and forums. But, I have not dared to start trying it.
Initially I wanted to make a tool for my own needs, a tool that can amp-imgautomatically create tags through the image url. Because there are still many articles on this blog that have not been edited and are not yet valid AMP.
amp-imgManually making tags is very tiring, because I have to adjust the attribute values widthand the heightsize of the image. I then thought of making the device to be automatic.
Maybe I can use JQuery or pure JavaScript . However, it looks like JQuery has become obsolete and if you use pure js the code might be a lot.
Then I want to use Angularjs , but I haven't explored Angular yet. Finally I tried Vuejs.
Vuejs

Installing Vuejs

Using Vuejs like JQuery, we just import the vuejs script into HTML.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

Program Logic

Before I started using Vuejs, I thought about what this program would do.
  1. Paste the URL
  2. Take the width and height of the URL
  3. Take image file names for alternative text
  4. Make a tag amp-img
That's all, just googling and make the code. ðŸ˜„

Declarative Rendering Vuejs

Based on the guidelines given in the Vuejs documentation, I am given the following code example.
html:
<div id="app">
  {{ message }}
</div>
javascript:
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
The code above will produce output Hello Vue!Looks easier than Angular.
Hmmm, maybe later I will start to like and fall in love with Vuejs. ðŸ˜

Vue Model

After that, I became acquainted with the Vue Model. Because before I searched Google about the onchange event in Vue, instead it was dedicated to the Vue Model.
I need the event onchange so that later when pasting the url, the tag amp-imgis immediately created .
To make a Vue model from a form component such as input, we just create an attribute v-model.
<input v-model="src" type="text" placeholder="http://example.com/image.jpg" />
The name of the model I made above is srcThis model is to hold the image url.
Then to take the value of the model the way it is.
<textarea rows="8">
&lt;amp-img
width=""
height=""
alt=""
src="{{ src }}"
layout=""&gt;
&lt;/amp-img&gt;</textarea>
Whatever we type on the model element will be rendered immediately.

Vue Method

Next, because I want to take the value of the height and width of the image. I need a function. Because maybe there is no function in Vue.
var app = new Vue({
  el: '#app',
  data: {
    width: '',
    height: '',
    layout: 'responsive',
    alt: '',
    src: ''
  },
  methods: {
    getImageData: function () {
        var img = new Image();
        img.onload = function(){
            // ambil ukuran gambar
            app.width = this.width
            app.height = this.height
        };
        img.src = this.src;
        console.log(this.src);

        var index = this.src.lastIndexOf("/") + 1;
        var filename = this.src.substr(index);
        this.alt = unescape(filename);
        console.log(filename);
    }
  }
})
In the code above, I created a function named getImageData()Fill in the function to take the image height, width, and file name.
I get this function from Stack Overflow . Then I call this function at keyup event .
<input v-on:keyup="getImageData()" v-model="src" type="text" placeholder="http://example.com/image.jpg" />

Finished

Everything I need has been achieved.
The program can run as expected.
Is that all?
Yes, that's all right.
Actually there are a lot of errors that I get, but I don't want to tell you here hehehe ðŸ˜„.
With confidence, I released it to the public.
This article is not a tutorial that you can follow. It's just for sharing experiences.
Thanks for reading.

0 Komentar untuk "Learning Vuejs: Get acquainted with Vuejs"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top