<!--从这里可以看到v-text和Mustache语法是相同的-->
<p style=": " v-text="message"></p> <p>{{message1}}</p>
<!--可以看出Mustache语法仅能识别变量值，并不能进行html转义, v-html的作用就是将文本进行html解析-->
<p>新显示的内容:{{html}}</p>
<p v-html="html"></p>
<!--从日志可以看出，该id为'{{id}}'，并没有从vue对象上读取该变量值,所以Mustache语法不支持html标签特性的使用-->
<p id={{id}}>你是哪个半吊子</p>
<!--v-bind的省略符号为:，可以将vue变量值和html标签属性绑定起来，可以看到第一个标签p的id值为wrapper-p1-->
<p v-bind:id="id">我是这个小泥巴</p> <!--v-bind:style 两种用法-->
<!--1.v-bind:style='属性名'，注意该属性的值是一个对象不是字符串-->
<p v-bind:style="currentStyle">你好，我是大泥巴</p>
<!--2.v-bind.style="字符串对象", 注意该对象的值要是一个字符串（该值也可以从vue对象属性上获取）, 外边距要这样写marginLeft-->
<p v-bind:style="{color:'green', marginLeft:'100px'}">我只是个泥巴而已</p>
<!--v-bind绑定class的三种方法--> <!--1.字符串绑定方式-->
<p v-bind:class="addClass"></p>
<!--2.变量绑定方式-->
<p v-bind:class=[addClass1]></p>
<!--bool绑定方式 注意class类型一定要加引号或双引号-->
<p :class="{'class-p3': isShow1, 'class-p4': isShow2}"></p>
js代码：
window.onload= function () {
console.log('加载完毕');
var vm = new Vue({
el: '#wrapper',
data:{
message: '你好，001',
message1: '001，你好',
html: '<span style="color: red;">你是谁</span>',
id: 'wrapper-p1',
currentStyle: {color:'red'},
addClass:'class-p1',
addClass1: 'class-p2',
isShow1: true,
isShow2: false,
}
});
};
