새로 고침하고 검색 소스 코드

Question

날 내가 먼저 이미지를 보여줍니다 달성하기 위해 원하는 것을 설명하는 데 도움하려면 HTML 페이지에 CSS가 삽입됩니다.

문제점이 2 개 있습니다.

1. 내가 예를 들어 나는 어쩌면 그것이 주입되기 때문입니다 해당 페이지의 소스 코드가 업데이트되지 않습니다 hello에 This text can be edited by the user를 편집 할 수 있도록, 그 안에 div 텍스트를 변경하는 경우. 이 문제를 해결하려면 어떻게해야합니까? 어쩌면 사용자가 상호 작용할 때 동적으로 페이지를 새로 고칩니다. 예를 들어주세요.

2. 두 번째 문제는 처음 해결 된 후에 만 ​​나타나며 즉 "업데이트 된"소스 코드를 검색하고 해당 파일을 업데이트/저장하면 어떻게 페이지가 다시로드 될 때 변경 사항이 적용됩니까? 내 데이터베이스에서

나는 파일 위치 즉 example.html을 가지고 있고 나는 그것을 복용하고 페이지에 그것을 주입하지만 해당 파일을 업데이트하거나 오히려 그 테이블에 소스 코드를 가질 수 있는지 모르겠어요 있어요 페이지에 삽입되고 변경시 업데이트 파일이 아닌 소스 코드가 업데이트됩니다. 이것은 당신이 달성하기 위해 노력하고 있지만, heres는 당신이 뷰를 활용할 수있는 간단한 예를 직접 DIV에 HTML을 삽입하는 것입니다 경우

Answer 1

확실하지 만약 당신이 원하는 이잖아

주 사용 {{{입력}} } 당신은 잘못된 소스 코드를보고있는 HTML

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    input: '# <div>This can be edited by the user</div>' 
 
    } 
 
});

.box{ 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #cecece; 
 
} 
 

 
input{ 
 
    width: 100%; 
 
    border: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> 
 
<div id="app"> 
 

 
    <textarea>Comment stuff</textarea> 
 
    <button>Button</button> 
 
    <br> 
 
    <input v-model="input"> 
 
    
 
    <div class="box"> 
 
    {{input}} 
 
    </div> 
 

 
</div>