1.内容渲染指令：v-html,v-text,插值表达式{{}}
区别：v-html可以渲染为页面的HTML元素，而v-text只能渲染为文本内容，但是这两个都会覆盖原来的内容。{{}}插值表达式不会覆盖原来的内容
例如：当data里面的info:
'<h2 style="color:red;font-weight:bold">欢迎大家来学习 vue.js</h4>'
<div v-html='info'>你好</div>，则结果会显示
欢迎大家来学习 vue.js
<div v-text='info'>你好</div>时，结果显示
'<h2 style="color:red;font-weight:bold">欢迎大家来学习 vue.js</h4>'
不需要覆盖原来的内容时，一般使用{{}}插值表达式
data里面的数据为:username:'张三'
<p>姓名：{{username}}</p>
显示的是：姓名：张三
ps:注意vue的使用方法
1.先导入vue.js
2.创建实例对象
const vm=new Vue({
el:'#app' //这里代表vue的作用范围为id=app的区域
data:{} //写入需要用到的数据
methods:{} //注意有s,我一般都会忘，里面写的是事件渲染事件，后面会提到
})
最后来个完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--//希望Vue能够控制下面这个div,帮我们在把数据填充到div内部-->
<div id="app">
<p v-text="username"></p>
<!-- v-text会覆盖原来的内容 -->
<p v-text="gender">性别：</p>
<hr>
<!-- {{}} 不会覆盖原来的内容-->
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
<hr>
<div v-text="info"></div>
<div>{{info}}</div>
<div v-html="info"></div>
<!-- v-text指令和插值表达式只能渲染纯文本内容，如果要把包含html标签党的字符串渲染为页面的HTML元素，则需要用到v-html指令 -->
</div>
<!-- 1.导入vue的库文件，在全局就有vue这个构造函数-->
<script src="./lib/vue-2.6.12.js"></script>
<!--2.创建vue实例对象-->
<script>
//创建vue实例对象
const vm = new Vue({
//el属性是固定写法，表示当前vue控制的区域，接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data:{
username:'zhangsan',
gender:'女',
info:'<h2 style="color:red;font-weight:bold">欢迎大家来学习 vue.js</h4>'
}
})
</script>
</body>
</html>
