<div id="app">
<!-- 插值表达式 用于把内容填充到标签里面 因为Vue库文件内部会进行编译过程
作用：1. 将数据填充到HTML标签中
2. 插值表达式支持基本的计算操作-->
<div>{{msg}}</div>
<!-- 插值表达式演示计算 -->
<div>{{1 + 2}}</div>
<!-- 插值表达式演示字符串拼接 -->
<div>{{msg + '----' + 123}}</div>
</div>
<script type="text/javascript" src="/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app', // 选择ID标签 （元素的载位置） 把数据关联到页面的某个位置
data:{
msg:'holle vue' // 填充的内容 （模型数据 值是一个对象）
}
});
</script>
<div id="app">
<div v-cloak>{{msg}}</div>
<!-- v-text没有闪动问题 -->
<div v-text='msg'></div>
<!-- v-html有局限性 有危险 因为容易导致xss攻击 -->
<div v-html='msg1'></div>
<!-- 显示的是{{msg}} -->
<div v-pre>{{msg}}</div>
<!-- 引用场景：如果显示的信息后续不需要再修改 可以使用v-once 因为这样可以提高性能 -->
<div v-once>{{info}}</div>
</div>
<!--
模板概览
1.插值表达式
2.指令
自定义属性就是指令
指令的格式都是以v-开始 如（v-cloak）
v-cloak指令用法
HTML里面存在闪动问题 解决：
借助v-cloak指令来解决
1.提供样式
[v-cloak] {
display:none;
}
2.在差值表达式所在的标签中添加v-cloak指令
原理：通过样式隐藏内容 然后在内存中值得替换 替换完后再显示最终的结果
v-text填充文本：想必插值表达式更简洁
v-html填充HTML片段：1.存在安全问题 2.本网站内部数据可以使用 第三方数据不可用
v-pre填充原始信息：显示原始信息 跳过编译过程（分析编译过程）
v-once只编译一次：显示内容后不再具有响应任何功能
-->
<script type="text/javascript" src="/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app', // 选择ID标签 （元素的载位置） 把数据关联到页面的某个位置
data:{
msg:'holle vue', // 填充的内容 （模型数据 值是一个对象）
msg1:'<h1>你好</h1>',
info:'111'
}
});
</script>
