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 |

Powered by Blogger.


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.

Installing Vuejs

Using Vuejs like JQuery, we just import the vuejs script into HTML.
<script src=""></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.
<div id="app">
  {{ message }}
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="" />
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">
src="{{ src }}"
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;

        var index = this.src.lastIndexOf("/") + 1;
        var filename = this.src.substr(index);
        this.alt = unescape(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="" />


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