vuejs) frontend 입문기

Vue Js Web Development Course with Real Vuejs Projects

 

section 1: intro

js framework

mvvm pattern

virutal dom

 

pros

1. low size and speed

2. easy

3. simple integration

4. coommunty

5. virtual DOM

 

* virtual dom: real dom과 차이점만 적용 가능

* two say data binding: 잘써야함

 

* component:  header.vue content.vue side.vue

 

section 2: install

nodejs 설치

vuejs 설치

 

npm install -g @vue/cli

vue --version

vue create vue-cli > manual

> babel, linter ,3.x eslint airbnbn lint on save

cd vue-cli

npm run serve

 

 

section 3: hello

v-bind:id=

<template>

  <div class="hello2">

    <h1>{{ name }}</h1>

    <h1>{{ age }}</h1>

    <h1 :class="myH2">{{ gender }}</h1>

    <div v-bind:id="myId">hello my div {{myId}}</div>

    <img v-bind:src="mySrc" alt=""/>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data() {

    return {

      name: 'john',

      age: 24,

      gender: true,

      myH2: 'myH2',

      myId: 'divId',

      mySrc: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',

    };

  },

  props: {

    msg: String,

  },

};

 

directive

 

event hanldling

    <!-- <button v-on:click="handleClick"> click</button> -->

    <button @click="handleClick"> click</button>

    <h1 id='header'> header </h1>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  methods: {

    handleClick() {

      const header = document.getElementById('header');

      header.style.color = 'red';

    },

  },

 

 

get event data

      // eslint-disable-next-line

      event.target.style.backgroundColor = 'red';

 

 

   <button @click="handleClick2(100)"> click2</button>

    <h1 id='header'> header </h1>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  methods: {

    handleClick2(param) {

      console.log('PARAM', param);

    },

  },

 

event modifier

 - stop prevent 

    handleSubmit(e) {

      e.preventDefault(); //prevent page refresh

      console.log('form submit');

    },

 

 

 

template

 

two way binding

 

section 5: vue.js directives

 

v-html

v-text

    <div v-html='myContent'> </div>

    <div v-text='myContent'> </div>

 

 myContent: '<b style="color:red">hello my content</b>', 

 

v-once: only changes once

    <h1 v-once> {{ myName }}</h1>

    <h1> {{ myName }}</h1>

    <button @click="myName='newName'">click</button>

 

 

v-show: control visibility if true show, hide if not -> display:none

  <div>

    <h1 v-show='isShowing'> i am here</h1>

    <button @click='isShowing = !isShowing'>{{ isShowing? "hide": "show" }}</button>

  </div>

 

 

v-if-else

  <div>

    <h1 v-if='location==="A"'>A</h1>

    <h1 v-else-if="location==='B'">B</h1>

    <h1 v-else>Home</h1>

    <button @click="location = !location">click</button>

  </div>

 

 

v-for

    <h1>v-for</h1>

    <div v-for='(x, i) in alphabet' :key='x'> {{ x }} -- {{ i }} </div>