Vue.js - 1. 기본 예제

Vue.js - 기본 예제

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="app"> <!-- ********************************************************************************** --> <!-- A. Vue값을 화면에 출력 하기 --> <!-- ********************************************************************************** --> <!-- ------------------- --> <!-- 1. 단순 컬럼값 출력 --> <!-- ------------------- --> {{message}} <span v-bind:title="message"><br> 내위에 마우스 올려봐.11<br> </span> <span v-text="message"></span><br> ======================================================<br> <!-- ----------------------------------------------------------------------- --> <!-- 3. 화면에 값을 변경 시 Vue객체에 전송하기 --> <!-- 전송이라기 보다.. 연동하기 --> <!-- v-model : 폼과 데이터를 바인딩하는 디렉티브(양방향 바인딩 형태) --> <!-- v-model : 화면에 값출력 되면서 Vue객체에 값도 연동(bind)되어 있다. --> <!-- ----------------------------------------------------------------------- --> <input v-model="message"><br> ======================================================<br> <!-- ----------------------------------------------------------------------- --> <!-- 4. Vue.객체값이 변경 되어도 .. 변경하지 않게 하기(1회성 연동) --> <!-- v-once : 1회성 연동 --> <!-- ----------------------------------------------------------------------- --> <label v-once v-text="message"></label> <- 왼쪽 내용은 위 값이 변경 되어도 message가 변경 안됨</br> ======================================================<br> <!-- ********************************************************************************** --> <!-- J. if문, for문 --> <!-- ********************************************************************************** --> <!-- ------------------- --> <!-- 2. if 문장 --> <!-- ------------------- --> <span v-if="seen==true">ok</span><br> ======================================================<br> <!-- ------------------- --> <!-- 3. for 문장 --> <!-- ------------------- --> <ol> <li v-for="one in bookList"> <span v-text="one.name"></span> </li> </ol> ======================================================<br> <!-- ********************************************************************************** --> <!-- L. Event --> <!-- ********************************************************************************** --> <!-- ------------------------ --> <!-- 4. 버튼 클릭 event수행 --> <!-- ------------------------ --> <button v-on:click="reverseMessage">메시지 뒤집기</button><br> ======================================================<br> <!-- ----------------------------------------- --> <!-- 10. 값이 변경 되면 event 호출하기 --> <!-- ----------------------------------------- --> <input v-model="message"> <- 값이 변경 되면 event가 호출 됨<br><br> <input v-model="startDate"> <- 값이 변경 되면 event가 호출 됨<br> ======================================================<br> <!-- ********************************************************************************** --> <!-- M. Method, Function 생성 및 호출하기 --> <!-- ********************************************************************************** --> <!-- ------------------------ --> <!-- 1. 버튼 클릭 event수행 --> <!-- ------------------------ --> <button v-on:click="reverseMessage">메시지 뒤집기</button><br> ======================================================<br> <!-- ----------------------------------------------------------- --> <!-- 2. input box값을 입력함과 동시에 event를 호출 해서 분리하기 --> <!-- . yourName에 대한 변수와 watch.yourName event가 필요함 --> <!-- ----------------------------------------------------------- --> 이름 입력:<input v-model="yourName"> -> 첫번째이름:[<label v-text="firstName"></label>] -> 두번재이름:[<label v-text="lastName"></label>]<br> ======================================================<br> <!-- -------------------------------- --> <!-- 3. created, mounted시 호출된 내용 --> <!-- -------------------------------- --> created시 내용 -> <lable v-text="createdMessage"></lable> <br> mounted시 내용 -> <lable v-text="mountedMessage"></lable> <br> ======================================================<br> <!-- ********************************************************************************** --> <!-- P. 객체 다르기(html tag 다루기) --> <!-- ********************************************************************************** --> <!-- ----------------------------------------- --> <!-- 1. button disabled 속성 처리 --> <!-- ----------------------------------------- --> <button v-bind:disabled="disabledFalse"> [버튼 클림 됨]</button> <button v-bind:disabled="disabledTrue"> [버튼 쿨릭 안됨]</button> <br> ======================================================<br> </div> <script> </script> <script> //a. Vue 객체 생성 var vm = new Vue({ el : "#app" ,data : { message: "hellow Vue!" , seen: true , bookList : [ {name: "vve배우기" , id: 1} , {name: "oracle 7일 완성" , id: 2} , {name: "nexa 2일 정독하기", id: 3} ] , startDate : "2019.06.26" , disabledFalse : false , disabledTrue : true , two : 2 , five : 5 , yourName: "" , fullName : "" , firstName : "" , lastName : "" , createdMessage : "" , mountedMessage : "" } ,methods: { reverseMessage: function() { //this는 vm인스턴스를 지칭함 this.message = <a href="http://this.message.split">this.message.split</a>('').reverse().join(''); alert(this.message); } ,nameSplit: function(){ var names = <a href="http://this.fullName.split">this.fullName.split</a>(' '); this.firstName = names[0]; this.lastName = names[1]; <a href="http://console.log">console.log</a>(this.firstName); <a href="http://console.log">console.log</a>(this.lastName); } } ,computed: { addFunc : function(){ return <a href="http://this.two">this.two</a> + <a href="http://this.five">this.five</a>; } //computed 에서 getter, setter 함수 사용하기 //,fullName: } //반응형 event //yourName : 값이 변경 시 호출 됨 ,watch: { yourName : function (newName){ this.fullName = newName; this.nameSplit(); } } //b. 인스턴스 라이프 사이클 //b.1 created 훅은 vm인스턴스가 생성 된 후에 호출 //b.2 this.addFunc과 같이 내부 function 호출 하기 ,created : function(){ <a href="http://console.log">console.log</a>("공부 시작일-" + this.startDate); <a href="http://console.log">console.log</a>(this.addFunc + " <- 2 + 5 에 대한 결과(계산 function호출)"); this.createdMessage = "난 created-인스턴스 라이프 사이클-시 호출 됨"; } //b.3 mounted - life cycle 참조 url : <a href="https://kr.vuejs.org">https://kr.vuejs.org</a>/v2/guide/instance.html , mounted:function (){ this.mountedMessage = "난 mounted-인스턴스 라이프 사이클-시 호출 됨"; } }); //a. 반응형 Event //-. startDate : 값이 변경 시 아래 매소드 수행 //-. 인스턴스 매소드 생성 ($watch) // Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. // 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였습니다 vm.$watch("startDate", function(newVal, oldVal){ //alert(newVal + " 일자로 변경 했군"); <a href="http://console.log">console.log</a>(newVal + " 일자로 변경 했군"); }); </script>