WBDSGNR - Real Life Implement: vue

Showing posts with label vue. Show all posts

Friday, 14 September 2018

VUE: Using @blur event with component methods interact with root method

See the Pen Vue : guna $emit @blur dalam template & root methods by muhaza (@muhaza) on CodePen.

wait!.. the example on load...

Wednesday, 12 September 2018

VUE : Component Structure

In html

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Component No1</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
    <style>
    body{
        padding-top:40px;
    }
    </style>


</head>

<body>


    <div id="root" class="container">

        <componentName title="Hello World" body="lorem ipsum dolar sit amet."></componentName>        <componentName title="Success" body="creating component by using props on components"></componentName>
        
     

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="component.js"></script>

</body>

</html>

In JS

Vue.component('componentName', {

    props: ['componentProps',],

    data(){
        return{
            componentCondition: true, //boolean
        }

    },
    
    template: `
    <article class="message is-warning" v-show="inVisible">
    <div class="message-header">

      {{ title }} 
      <button type="button" @click="clickMethod">x</button>

    </div>
    <div class="message-body">
      {{ body }}

      </div>
    </article>
    `,

    methods:{
        clickMethod(){
            this.componentCondition = false; //methods is events+data= result

        }
    }
});

new Vue({
    el:'#root' //div id on html
});

Tuesday, 11 September 2018

VUEJS : Todo

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


</head>

<body>



    <div id="root">

        <ul>
            <li v-for="name in names" v-text="name"></li>
        </ul>

        <input id="input" type="text" v-model="newName">
        <button v-on:click="addName"> Add Name</button>
        

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        var dev = new Vue({
            el: '#root',
            

            data: {
                names: ['hafiz', 'muhaza', 'spikey'],
                newName:'',
            },

            methods:{
                addName() {
                    this.names.push(this.newName);
                }
            }

        })



    </script>

</body>

</html>

..

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/3

Thursday, 26 July 2018

Vue CLI3 : Add router

Open folder project cd or using terminal on vs/codeeditor

vue add router

that all then you should have home and about router as example

https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project

Vuejs : Component Structure

<template>
<h1>popalihwey {{ title }} {{ number }}</h1>
</template>

<script>
export default {
data() {
return {
title:'Hafiz',
number : '0166759887'
}
}
}

</script>

<style scoped>
</style>

On App.vue must import to use

<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<Wadup></Wadup> </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Wadup from './components/Wadup.vue'

export default {
name: 'app',
components: {
HelloWorld, Wadup }
}
</script>
<style>

</style>

Must add this script to start use component in any pages

<script>

import HelloWorld from '@/components/HelloWorld.vue'
import Wadup from '@/components/Wadup.vue'

export default {
name: 'home',
components: {
HelloWorld,
Wadup,
}
}
</script>

Already declare? start calling it by using <HelloWorld/> and <Wadup/>

Monday, 2 July 2018

Migration Vue 1 to latest

https://github.com/vuejs/vue-migration-helper

Sunday, 1 July 2018

Vue 3 Rules of Directives

Vue 3 not the same as vue 1. It becoming much simpler however it will us spending time to search for solution.

here the new style how to write v-if and else

<div v-if ="seen">this should seen!</div>

  <div v-else>Hei you All!</div>

for v-for, it required key

<li v-for="front in fronts" :key="front">

Friday, 29 June 2018

Vue CLI V2 And V3

Looking at vue-cli repository I see two different ways of scaffolding vue projects.

The v3 (beta) version, installed as npm install -g @vue/cli, creates projects using the following command:

vue create my-project

While the version 2.9.x, available at master branch, is installed as npm install -g vue-cli and it allows projects scaffolding with the following:

vue init <template-name> <project-name>

for example:

vue init webpack my-project

So, in your scenario, for v3 version you should use: vue create test-app.

Here you can find further information.

Sunday, 24 June 2018

Now VUEjs can be develop as App by using NativeScript!

https://docs.nativescript.org/vuejs/nativescript-vuejs
https://nativescript-vue.org/en/docs/getting-started/quick-start/

Gosh! This is so cool, why? because I could read vue.js clearly.. now I can make apps using vue!

https://play.nativescript.org/?template=play-vue&id=jy01gX
https://www.youtube.com/watch?v=LDqsuLQqLrQ

Sunday, 27 May 2018

Vue : Add HTML on Javascript to Use On HTML

Add HTML on Javascript to Use On HTML by calling id : el this is call as v-html
this is very usefull to add cross border html component.

add to .js

new Vue({
el: '#app',
data: {
HTMLcontent: null,
},
created() {
this.HTMLcontent = `
<div>I'm section one</div>
<div>I'm section two</div>
`;
},
});

Remember we are using ` ( key above tab ) not ' by using this (`) key allow you to place raw html on javascript as shown above.

call on .html

<div id="app">
<span v-html="HTMLcontent"></span>
</div>

Friday, 18 May 2018

VUE JS

1. Install vue

npm install -g @vue/cli

2. Create Project

vue create vue-proj

3. This will provide you with the following prompt:

To keep things simple, we'll leave it at the default option and hit enter.

babel is a JavaScript compiler.
eslint is a JavaScript linter. Linting flags coding errors, bugs, etc..