'오락기/vue.js' 카테고리의 글 목록 :: 문방구앞오락기

오락기/vue.js

상호 작용 2018.05.25
리스트 렌더링 2018.05.25
디렉티브 2018.05.25
vue vs jquery 2018.05.25
코어 2018.05.25

상호 작용

문방구앞오락기 2018. 5. 25. 17:16

2018. 5. 25. 17:16

인라인 이벤트 핸들링

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<button class = "btn" v-on:click = "votes++">

upvote! {{votes}}

</button>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : { votes : 0 }

})

</script>

</html>

bootstrap test
upvote! 19

메서드 이벤트 처리

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<button class = "btn" v-on:click = "upvote">

upvote! {{votes}}

</button>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : { votes : 0 } ,

methods : {

upvote : function(){

this.votes++;

}

}

})

</script>

</html>

같은동작이지만

아래 Vew 객체에 mothods를 추가하고 그것을 참조하여 동작

축약형도 존재

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<button class = "btn" v-on:click = "upvote">

upvote! {{votes}}

</button>

</div>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<button class = "btn" @click = "upvote">

upvote! {{votes}}

</button>

</div>

같은 의미

이벤트 한정자

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class = "container">

<form class = "form-inline" >

<input v-model.number = "a" class = "form-control">

<select v-model="operator" class = "form-control">

<option>+</option>

<option>-</option>

<option>*</option>

<option>/</option>

</select>

<input v-model.number = "b" class = "form-control">

<button type="submit" @click = "calculate" class ="btn"> 제출

</button>

</form>

<h2> result : {{a}} {{operator}} {{b}} = {{c}} </h2>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : {

a : 1 ,

b : 2 ,

c : null ,

operator : "+"

} ,

methods : {

calculate : function(){

switch (this.operator){

case "+" : this.c = this.a +this.b

break;

case "-" : this.c = this.a - this.b

break;

case "*" : this.c = this.a * this.b

break;

case "/" : this.c = this.a /this.b

break;

}

}

}

})

</script>

</html>

요런식으로 구성하니

From에 submit이 되면서 자동으로 페이지가 리플래쉬 된다.

Submit 버튼 눌렀을때 이벤트만 되어야한다

보통 폼 제출은 onsubmit 이고 event.preventDefault()를 호출한다고 한다.

calculate : function(){

event.preventDefault();

switch (this.operator){

case "+" : this.c = this.a +this.b

break;

case "-" : this.c = this.a - this.b

break;

case "*" : this.c = this.a * this.b

break;

case "/" : this.c = this.a /this.b

break;

}

x-il*
result : 1/ 10 =
, 10
0.1

이렇게 처리하면 어려우니 제공을 해준다.

.prevent

.stop

.self

이것을 버튼에 적용한다.

<button type="submit" @click.prevent= "calculate" class ="btn"> 제출

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

리스트 렌더링 (0)	2018.05.25
디렉티브 (0)	2018.05.25
vue vs jquery (0)	2018.05.25
코어 (0)	2018.05.25

리스트 렌더링

문방구앞오락기 2018. 5. 25. 17:15

2018. 5. 25. 17:15

v-for

반복문 처리

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<ul class="list-group">

<li v-for = "i in 11" class="list-group-item">

{{ i-1}} times 4 equals {{ (i-1) * 4 }}

</li>

</ul>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container'

})

</script>

</html>

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<ul class="list-group">

<li v-for ="out in korean" class="list-group-item">

{{out}}

</li>

</ul>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : {korean : [

"가",

"나",

"다",

"라",

"마"

]}

})

</script>

</html>

bootstrap test bootstrap test bootstrap test

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<ul class="list-group">

<li v-for ="out in korean" class="list-group-item">

{{out.word}} // {{out.print}}

</li>

</ul>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : {korean : [

{ word : "가", print : "가나다"} ,

{ word :"나", print :"가나다"} ,

{ word :"다", print :"가나다"} ,

{ word :"라", print :"가나다"} ,

{ word :"마" , print :"가나다"} ,

]}

})

</script>

</html>

//4口
닉구乙//4乙
1

Index도 추가할수있따.

<ul class="list-group">

<li v-for ="(out , index) in korean" class="list-group-item">

{{index}} // {{out.word}} // {{out.print}}

</li>

</ul>

bootstrap test
0 // 가 // 가나다
1 // 나 // 가나다
2 // 다 // 가나다
// 라 // 가나다
4 // 마 // 가나다

Key value로도 접근 가능

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<ul class="list-group">

<li v-for ="(value , key , index) in korean" class="list-group-item">

{{index}} // {{key}} // {{value}}

</li>

</ul>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : {korean :

{ word : "가", print : "가나다"}

}

})

궁금증이 생겼다

이방법으로 리스트로 하면어떻게 될까 였다.

<html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>

<div class="container">

<h1>bootstrap test bootstrap test bootstrap test </h1>

<ul class="list-group">

<li v-for ="(value , index , key) in korean" class="list-group-item">

{{index}} // {{key}} // {{value}}

</li>

</ul>

</div>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '.container' ,

data : {korean :[

{ word : "가", print : "가나다"},

{ word : "나", print : "나다마"}

]}

})

</script>

</html>

bootstrap test bootstrap test bootstrap test

아마도 v-for에 인자값이 순서가 정해져있나보다

</script>

</html>

공식 가이드를 보면

cul
sli index) in items'
parentMessage
- index
var example2 = new Vue({
*example-2'
data: {
parentMessage: ' Parent
HTML
Item. message
items: [
{ message:
{ message:
'Fool
Result:
• Parent-O-Foo
• Parent-I-Bar

item , index순서이다.

You can also provide a second argument for the key.
cdiv v-for=" (value, key) in object"*
{ { key {{ value Y}
c/div>
firstN ame: John
lastName: Doe
age: 30
And another for the index:
cdiv v-for=" (value, key, index) in object
{{ index D. key Y}: {{ value
< /div>
0. firstName: John
1. lastName: Doe
2. age: 30

하지만 요소가 3개일경우엔

Item key index순서인거같다.

자세한건 링크

https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

참조해야겠다.

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
디렉티브 (0)	2018.05.25
vue vs jquery (0)	2018.05.25
코어 (0)	2018.05.25

디렉티브

문방구앞오락기 2018. 5. 25. 17:14

2018. 5. 25. 17:14

v-show

v-if

v-else

v-show - 엘리먼트 속성이 충족되었을때 보여준다.

<html>

<body>

<div id = "app">

<h1>Text123</h1>

<textarea v-model="message"></textarea>

<!--

<button v-show="message"> send </button>

-->

<button v-show="message"> send </button>

<pre>

{{$data}}

</pre>

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-show'

}

})

</script>

</html>

Text123
message

글자를 한글자도 쓰면

ext123

v-if v-show 대신 사용할수있음

<html>

<body>

<div id = "app">

<h1>Text123</h1>

<textarea v-model="message"></textarea>

<!--

<button v-show="message"> send </button>

-->

<button v-if="message"> send </button>

<pre>

{{$data}}

</pre>

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-if'

}

})

</script>

</html>

Text123
" .essæe -

Text123

같은역활이지만

v-if는 template를 사용할수있따 v-show는 사용불가능

<html>

<body>

<div id = "app">

<template v-if="!message">

<h1> v-if template test</h1>

</template>

<textarea v-model="message"></textarea>

<button v-show="message"> send </button>

<pre>

{{$data}}

</pre>

<!--

<h1>Text123</h1>

<textarea v-model="message"></textarea>

<button v-show="message"> send </button>

<button v-if="message"> send </button>

<pre>

{{$data}}

</pre>

-->

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-if'

}

})

</script>

</html>

코드에서보면 <template 에 message가 ! 없다면 이라고 되어있다

따라서 메시지가 null일경우에는 보여지고

메시지가 1글자라도있으면 버튼이 생기면서

문구는 사라질것이다

v-if template test
message

문구가 사라집니다.
send는 생겼습니다.
,; send
me SS 巳
"문구가 사라집니다.Wns巳nd는 생겼습니다.

v-else

<html>

<body>

<div id = "app">

<h1 v-if="!message"> v-if test</h1>

<h2 v-else> v-else test </h2>

</template>

<textarea v-model="message"></textarea>

<button v-show="message"> send </button>

<pre>

{{$data}}

</pre>

<!--

<h1>Text123</h1>

<textarea v-model="message"></textarea>

<button v-show="message"> send </button>

<button v-if="message"> send </button>

<pre>

{{$data}}

</pre>

-->

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

new Vue({

el: '#app',

data: {

message: '테스트입니다 v-if'

}

})

</script>

</html>

코드상으로는 message가 없으면 v-if

있으면 else문이 동작되게 해놨씁니다

v-if test
message

v-else test
v-else -T-E-OI
"—ssæe- :
send

단독으로 사용했을때 v-show와 v-if의 차이점은?

설명으로는 v-show가 랜더링에 더 많은 리소스를 소모한다고 한다.

따라서 가이드에 따르면 v-if이 진정한 조건부 렌더링이라 한다.

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
리스트 렌더링 (0)	2018.05.25
vue vs jquery (0)	2018.05.25
코어 (0)	2018.05.25

vue vs jquery

문방구앞오락기 2018. 5. 25. 17:12

2018. 5. 25. 17:12

<html>

<body>

아래는 vue.js 양방향 바인딩

<!--

<div id="app">

<h1>{{message}}</h1>

<input v-model = "message">

</div>

-->

아래는 제이쿼리 input tag에 keyup 이벤트

<div>

<h2>TEST</h2>

<input id='message'>

</div>

</body>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

/*

new Vue({

el: '#app',

data: {

message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'

}

})

*/

$('#message').on( 'keyup' , function() {

var message = $('#message') .val();

$('h2').text(message);

})

</script>

</html>

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
리스트 렌더링 (0)	2018.05.25
디렉티브 (0)	2018.05.25
코어 (0)	2018.05.25

코어

문방구앞오락기 2018. 5. 25. 17:11

2018. 5. 25. 17:11

<!DOCTYPE html>

<html>

<head>

<title>My first Vue app</title>

<script src="https://unpkg.com/vue"></script>

</head>

<body>

<div id="app">

{{ message }}

</div>

<div id="app-2">

<span v-bind:title="message">

내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!

</span>

</div>

<div id="app-3">

<p v-if="seen">이제 나를 볼 수 있어요</p>

</div>

<div id="app-4">

<ol>

<li v-for="todo in todos">

{{ todo.text }}

</li>

</ol>

</div>

<div id="app-5">

<p>{{ message }}</p>

<button v-on:click="reverseMessage">메시지 뒤집기</button>

</div>

<div id="app-6">

<p>{{ message }}</p>

<input v-model="message">

</div>

<div id="app-7">

<ol>

<!--

이제 각 todo-item 에 todo 객체를 제공합니다.

화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다.

또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).

-->

<todo-item

v-for="item in groceryList"

v-bind:todo="item"

v-bind:key="item.id">

</todo-item>

</ol>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

var app2 = new Vue({

el: '#app-2',

data: {

message: '123 이 페이지는 ' + new Date() + ' 에 로드 되었습니다'

}

})

var app3 = new Vue({

el: '#app-3',

data: {

seen: true

}

})

var app4 = new Vue({

el: '#app-4',

data: {

todos: [

{ text: 'JavaScript 배우기' },

{ text: 'Vue 배우기' },

{ text: '무언가 멋진 것을 만들기' },

{ text123: '무언가 멋진 것을 만들기' },

{ text: '무언가 멋진 것을 만들기' }

]

}

})

var app5 = new Vue({

el: '#app-5',

data: {

message: '안녕하세요! Vue.js!'

},

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

}

})

var app6 = new Vue({

el: '#app-6',

data: {

message: '안녕하세요 Vue!'

}

})

Vue.component('todo-item', {

props: ['todo'],

template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

el: '#app-7',

data: {

groceryList: [

{ id: 0, text: 'Vegetables' },

{ id: 1, text: 'Cheese' },

{ id: 2, text: 'Whatever else humans are supposed to eat' }

]

}

})

</script>

</body>

</html>

저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용 (0)	2018.05.25
리스트 렌더링 (0)	2018.05.25
디렉티브 (0)	2018.05.25
vue vs jquery (0)	2018.05.25

PREV 이전 1 NEXT 다음

+ Recent posts

Powered by Tistory, Designed by wallel

티스토리툴바