From 4ccd7c79f3477588a1fd309dcab31f5ee4a15aa2 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sun, 12 Nov 2017 18:49:41 +0100
Subject: [PATCH 1/2] docs: add mustaches vs v-html example

---
 src/v2/guide/syntax.md | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md
index ea7c09deec..0caa6f1cc0 100644
--- a/src/v2/guide/syntax.md
+++ b/src/v2/guide/syntax.md
@@ -33,10 +33,28 @@ You can also perform one-time interpolations that do not update on data change b
 The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive:
 
 ``` html
-<div v-html="rawHtml"></div>
+<div>Using mustaches: {{ rawHtml }}</div>
+<div>Using v-html directive: <span v-html="rawHtml"></span></div>
 ```
 
-The contents of this `div` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
+{% raw %}
+<div id="example1" class="demo">
+  <div>Using mustaches: {{ rawHtml }}</div>
+  <div>Using v-html directive: <span v-html="rawHtml"></span></div>
+</div>
+<script>
+new Vue({
+  el: '#example1',
+  data: function () {
+  	return {
+  	  rawHtml: '<span style="color: red">This should be red.</span>'
+  	}
+  }
+})
+</script>
+{% endraw %}
+
+The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
 
 <p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.</p>
 

From 25769825a9d9d90ff7fefb09147a9290cfdd1e57 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sun, 12 Nov 2017 20:54:48 +0100
Subject: [PATCH 2/2] docs: use <p> instead of <div>

---
 src/v2/guide/syntax.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md
index 0caa6f1cc0..ddd821ca44 100644
--- a/src/v2/guide/syntax.md
+++ b/src/v2/guide/syntax.md
@@ -33,14 +33,14 @@ You can also perform one-time interpolations that do not update on data change b
 The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive:
 
 ``` html
-<div>Using mustaches: {{ rawHtml }}</div>
-<div>Using v-html directive: <span v-html="rawHtml"></span></div>
+<p>Using mustaches: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
 ```
 
 {% raw %}
 <div id="example1" class="demo">
-  <div>Using mustaches: {{ rawHtml }}</div>
-  <div>Using v-html directive: <span v-html="rawHtml"></span></div>
+  <p>Using mustaches: {{ rawHtml }}</p>
+  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
 </div>
 <script>
 new Vue({