기존 HTML의 데이터를 사용하여 Vue 뷰 모델 로드

기존 HTML의 데이터를 사용하여 Vue 뷰 모델 로드

Vue를 사전 렌더링된 HTML과 함께 사용하고 싶습니다. 장기적으로는 사용하지 않을 수도 있지만, 현재로서는 서버 코드를 그대로 두고 Vue를 사용하여 웹 애플리케이션의 클라이언트 로직을 관리하는 것이 더 쉬워 보입니다.

뷰 모델이 HTML에서 데이터를 로드하는 방법을 설명하는 것을 찾을 수 없습니다.예시는 https://github.com/vuejs/Discussion/issues/56과 같습니다.그 문제는 종료(수정?)되었지만 1.x에서도 2.x에서도 동작하지 않는 것 같습니다.

HTML을 설정할 때

<div id="myvue">
    <span v-text="message">Hello!</span>
</div>

뷰 모델을 만듭니다.

var vm = new Vue({
    el: '#myvue'
});

VM 객체에 HTML의 데이터를 주입하여vm.message == 'Hello!'정말이에요.하지만 그런 일은 일어나지 않아요.라고 하는 에러로 끝납니다.message버전 1에서는 정의되어 있지 않습니다.버전 2에서는 다음과 같은 경고가 표시됩니다.Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

그러나 이렇게 VM의 데이터 속성을 선언하면

var myvue = new Vue({
    el: '#myvue',
    data: {
        message: <something>
    }
});

비록 무엇이 …일지라도<something>는 (null, 문자열, 정의되지 않음), 항상 HTML 요소의 내용을 대체합니다.HTML에서 데이터를 Vue 오브젝트에 로드하는 방법이 있습니까?

렌더링은 바이젝티브 함수가 아니기 때문에 HTML에서 직접 상태를 수화시키는 것은 이론적으로 불가능합니다.두 가지 간단한 예:

• <p>{{ foo }}</p>에 렌더링하다<p>2</p>. 입니다.foo문자열이나 숫자?
• <p>{{ foo + bar }}</p>에 렌더링하다<p>6</p>의 가치는 무엇입니까?foo그리고.bar?

상태를 구체화하는 가장 간단한 방법은 서버에서 렌더링에 사용하는 데이터를 가져와서 JSON에 직렬화하고 다음을 사용하여 렌더링하는 것입니다.<script>window.hydrationData = ...</script>를 참조해 주세요.이렇게 하면 다음 기간 동안 사용할 수 있습니다.dataVue 인스턴스를 생성할 때 사용합니다.

이 접근방식은 공식 Vue 데모 앱에서도 사용됩니다.

이것은 Vue와 관련이 없지만, Knockout.js는 Erik Schierboom의 Knockout 프리렌더 커스텀바인딩과 함께 사용하면 이 작업을 수행할 수 있습니다.

이 콤보에서는 기본적으로 입력과 같은 것을 정의할 수 있습니다.

<div id="mydiv">
    <input data-bind="init, textInput: content" value="foo"/>
</div>

그런 다음 모델 개체를 바인딩합니다.

function ViewModel() {
    this.content = ko.observable();
}

var vm = new ViewModel();
ko.applyBindings(vm, $('#mydiv')[0])

를 사용하여init입력에 바인딩되면 VM 컨텐츠가 바인딩될 때 입력의 값으로 로드됩니다.

다시 말하지만, Vue는 아니야.하지만 누군가에게 도움이 될까봐 올려야겠다고 생각했어요

렌더링된 HTML이 계산된 속성에 의존하지 않는 경우 한 가지 옵션은 생성된 HTML을 해석하여 데이터에 필요한 값을 얻는 것입니다(예: 사용 방법).jQuery ★★★★★★★★★★★★★★★★★」vanilla-js데이터 개체를 인스턴스화할 때 VM에 전달할 데이터 개체를 생성하려면 다음과 같이 하십시오.

$(function(){
  var app = '#app';
  var $app = $(app);
  var data = {
    a: 0, // some initial value not present in HTML
    b: $app.find('.foo').text(),
    c: $app.find('input[name=c]').val()
  };
  var vm = new Vue({
    el: app,
    template: '...template...', // if needed
    data: data,
    ...
  });
});

인스턴스화되면 데이터 모델은 렌더링된 HTML과 일치해야 합니다. 렌더링된 HTML에 일부 템플릿 구성 요소가 아닌 경우 템플릿을 제공해야 합니다. 인스턴스화되면 앱이 다시 렌더링될 수 있습니다. 하면 '어울리지 않다'를 요.server-rendered="true"root app 요소의 속성을 지정하여 사전 렌더링된HTML이 root app 요소와 동일한 경우 이를 방지합니다.vm렌더링할 수 있습니다.

다른 되지 않은 입니다.<script>요소 바로 아래에 있는 데이터 모델을 태그합니다.

<script>
  window.MYSTATE = window.MYSTATE || {};
  window.MYSTATE['#app'] = {
    "a": 0,
    "b": "Some text",
    "c": "Some value"
  };
</script>

데이터가 JSON 형식으로 올바르게 이스케이프되었는지 확인합니다.그런 다음 앱을 인스턴스화하는 페이지 스크립트에서 창을 사용합니다.MYSTATE['#app']를 데이터 개체로 지정합니다(창의 변경을 방지하기 위해 딥 클론을 수행합니다).모델에 영향을 주는 MYSTATE 인스턴스.

var vm = new Vue({
  el: '#app',
  template: '...template if needed...',
  data: $.extend(true, {}, window.MYSTATE['#app'])
  ...
});

의 「를의 「인스턴스화」를 실시해 주세요).body 삭제)

언급URL : https://stackoverflow.com/questions/42097407/load-vue-view-model-with-data-from-existing-html