Vue 등급의 실례를 만들 수 있습니다~ 구조기의 쓰기 학습편 Part2~

※ 이 내용은 Vue입니다.이것은 js 입문에서 실천 응용 개발 학습에 이르기까지의 자기 이해 노트입니다.
[앞의 기사!]
1. Vue.js 입문~Vue.js의 첫걸음~5분을 뛰어넘어 읽다
2. Vue.js~도입, 기본 단어의 정의, 생각~
3. Vue 등급의 실례를 만들 수 있는 구조기의 쓰기 학회편 Part1
이 기사의 내용은 Vue 등급의 실례를 만들 수 있는 구조기의 쓰기 학회편 Part1의 속편으로, 한 회가 끝났기 때문에 특별히 읽을 필요가 없다.

데이터 바인딩

자기가 쓴 글: Vue.js 입문~Vue.js의 첫걸음~5분을 뛰어넘어 읽다의 Vue.js에서 다음과 같은 문장이 있는 곳.
상태를 변경합니다.js 검사 (감시),view에 자동으로 반영됩니다.이것을 가능한 속성으로 만드는 것이야말로 계산 속성이다.
이 부분状態の変更をVue.jsが検知（監視）して、自動的にviewに反映する에 관해서는 항상 이 부분이 재활동하는 인상을 나타내는 것 같지만, 그것도 그렇고, 그러나 더욱 다른 시각도 Vue이다.js는 재활동 요소가 있는 것 같습니다.
이것은 P43의 평면 구조 가져오기에 설명되어 있습니다.テンプレートでは、Vueインスタンスのデータとビュー（DOMツリー）の関係を宣言的に定義する。 이는 데이터가 결정된 후 View의 변화에 해당합니다.
이 메커니즘은 데이터 귀속이다
데이터 바인딩(데이터 바인딩 또는 Data Binding 번역을 데이터 결합이라고도 함)데이터 원본(예를 들어 XML)과 응용 프로그램이나 웹 페이지(web 응용)의 사용자 인터페이스를 정적 또는 동적으로 조합하는 기술이다.

데이터 바인딩 - 텍스트 확장 -

DOM의 설치 방법에 대한 기본적인 쓰기 방법은 {{{속성}처럼 중괄호를 이중으로 쓰는 것이 기본적인 전개 방법입니다.
{message}처럼 데이터를 연결하여 속성이 바뀔 때마다massage 데이터를 업데이트합니다.
index.vue

<div id="app-1">
  <p> 朝の挨拶 : {{ message }} </p>
</div>

<script>
var app1 = new Vue({
  el: "#app-1",
  data: {
    message: 'Hello'
  }
})
</script>

나는 상술한 전형적인 것이 매우 간단하다고 생각하지만 실제 업무에서 때때로 아래의 데이터를 파악하고 싶을 때가 있다.
index.vue

<div id="app-2">
  <p> 朝の挨拶 : {{ message }} </p>
</div>


<script>
var app2 = new Vue({
  el: "#app-2",
  data: {
    message: '<span style="color: red;">Hello</span>'
  }
})
</script>

데이터スタイルを当てたり、classを当てたいという欲求가 있기 때문에 위에서 말한 바와 같이 써 보았지만 실행 결과는

메시지 속성에 텍스트만 있기 때문에 HTML을 추가할 수 없습니다.그럼,class를 어떻게 응용해야 좋을까요?
이럴 때 사용할 수 있는 건 진짜 HTML이다.
데이터에 HTML을 추가하려면 v-html의 지침을 사용합니다.
index.vue

<div id="app-2">
  <p> 朝の挨拶 : {{ message }} </p>
  <p style="display: inline-block;">朝の挨拶 : </p><span v-html="realHtml"></span>
</div>


<script>
var app2 = new Vue({
  el: "#app-2",//辞書型意識と、idは#つける。
  data: {
    message: '<span style="color: red;">Hello</span>',
    realHtml: '<span style="color: red;">Hello</span>'
  }
})
</script>

v-in을 사용하면...

(상) 메시지 속성의 DOM 설치 방법이 잘못된 실행 결과
(하) DOM 실행 결과에 메시지 속성을 v-in으로 마운트합니다.
메시지 속성에 v-in directionse를 사용하여 데이터로 하여금 원본 HTML을 가지게 하고 DOM에 적용할 수 있도록 합니다.
이름은 Vue입니다.나는 js의 디렉터리 기능을 이해했다.
앞으로 우리는 서로 다른 상황에 따라 몇 가지 건의를 고려하고 시도해 볼 것이다.
다음은 다음 기사(v-if 지시성이 길어질 수 있기 때문에 기사로 나뉜다)
다음 글은 대충 이런 내용~
Vue 등급의 실례를 만들 수 있습니다~ 구조기의 쓰기 학습편 Part3~
・ v-if 지시성
・v-show 지시성
/v-bind 디렉토리
끝맺다
지금까지의 보도

Vue.js 입문~Vue.js의 첫걸음~5분을 뛰어넘어 읽다

Vue.js~도입, 기본 단어의 정의, 생각~

Vue 등급의 실례를 만들 수 있는 구조기의 쓰기 학회편 Part1