Vue:데이터바인딩 - 편집 역사

Sam: /* HTML 바인딩 */

2022-07-05T04:24:22Z

HTML 바인딩

← 이전 판		2022년 7월 5일 (화) 04:24 판
2번째 줄:		2번째 줄:

	==개요==		==개요==
	Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다.한글도 된다.<br />		Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다. 한글도 된다.<br />데이터바인딩 안에서 간단한 연산들도 이루어진다. <nowiki>{{ 이름.split('') + 1 }}</nowiki> 등으로.
	===HTML 속성 바인딩===		===HTML 속성 바인딩===
	HTML 속성에 대해선 다른 문법을 쓴다.		HTML 속성에 대해선 다른 문법을 쓴다.
11번째 줄:		11번째 줄:

	<code><nowiki><div v-bind:id="변수"></div></nowiki></code> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)		<code><nowiki><div v-bind:id="변수"></div></nowiki></code> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)

			다양한 속성을 담아 사용하고 싶은 경우, 다음과 같이 활용할 수도 있다.<syntaxhighlight lang="html">
			<div v-bind="변수명"></div>
			...

			data() {
			return {
			변수명: {
			id: 'container',
			class: 'wrapper'
			}
			}
			}
			</syntaxhighlight>

	===HTML 바인딩===		===HTML 바인딩===

Sam: /* HTML 속성 바인딩 */

2022-07-04T14:28:08Z

HTML 속성 바인딩

← 이전 판		2022년 7월 4일 (월) 14:28 판
8번째 줄:		8번째 줄:
	<code>:속성명='이름'</code> 형태로 바인딩 할 수 있다.		<code>:속성명='이름'</code> 형태로 바인딩 할 수 있다.

	이외 id, class 등에 대해 바인딩이 가능하다.		이외 id, class 등에 대해 바인딩이 가능하다. id에 null, undefined가 오면 해당 요소는 눈에 보이지 않게 된다.

	=== HTML 바인딩 ===		<code><nowiki><div v-bind:id="변수"></div></nowiki></code> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)

			===HTML 바인딩===
	변수 안에 <code><nowiki><span style="color: red"></nowiki></code>를 담아 <code><nowiki>{{변수}}</nowiki></code>라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)		변수 안에 <code><nowiki><span style="color: red"></nowiki></code>를 담아 <code><nowiki>{{변수}}</nowiki></code>라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)

	이런 제한을 풀기 위해선 <code><nowiki><p>Using v-html directive: <span v-html="변수"></span></nowiki><nowiki></p></nowiki></code> 형태로 써야 한다.		이런 제한을 풀기 위해선 <code><nowiki><p>Using v-html directive: <span v-html="변수"></span></nowiki><nowiki></p></nowiki></code> 형태로 써야 한다.

Sam: /* 개요 */

2022-07-04T14:19:49Z

개요

← 이전 판		2022년 7월 4일 (월) 14:19 판
1번째 줄:		1번째 줄:
	{{Vue}}		{{Vue}}

	== 개요 ==		==개요==
	Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다.		Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다.한글도 된다.<br />
			===HTML 속성 바인딩===

	한글도 된다.
	<br />

	=== HTML 속성 바인딩 ===
	HTML 속성에 대해선 다른 문법을 쓴다.		HTML 속성에 대해선 다른 문법을 쓴다.

	<code>:속성명='이름'</code> 형태로 바인딩 할 수 있다.		<code>:속성명='이름'</code> 형태로 바인딩 할 수 있다.

			이외 id, class 등에 대해 바인딩이 가능하다.

			=== HTML 바인딩 ===
			변수 안에 <code><nowiki><span style="color: red"></nowiki></code>를 담아 <code><nowiki>{{변수}}</nowiki></code>라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)

	~~이외 id, class 등에 대해 바인딩이 가능하다~~.		이런 제한을 풀기 위해선 <code><nowiki><p>Using v-html directive: <span v-html="변수"></span></nowiki><nowiki></p></nowiki></code> 형태로 써야 한다.

Sam: 새 문서: {{Vue}} == 개요 == Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 {{ 이름 }} 형태로 대입할 수 있다. 한글...

2022-06-30T12:23:00Z

새 문서: {{Vue}} == 개요 == Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다. 한글...

새 문서

{{Vue}}

== 개요 ==
Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다.

한글도 된다.
<br />

=== HTML 속성 바인딩 ===
HTML 속성에 대해선 다른 문법을 쓴다.

<code>:속성명='이름'</code> 형태로 바인딩 할 수 있다.

이외 id, class 등에 대해 바인딩이 가능하다.