<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <!--数据的 响应式   -->
     <!--数据的 响应式   -->
    <div id="app">
        <div>{{msg}}</div>
        <div>{{msg1}}</div>
        <div v-cloak>{{1 + 1}}</div>
        <div v-text='msg'></div>
        <div v-html='msg2'></div>
        <div v-pre>{{msg}}</div>
        <!--显示原始内容 不编译-->
        <div v-once>{{msg3}}</div>
        <!--v-once只编译一次-->
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app', //元素的挂载位置
        data: { //元素的数据 
            msg: "hello Vue", //数据元素
            msg1: "text",
            ss: "dsa1",
            msg2: "<H1>html<H1>",
            msg3: "v-once"
        }
    });
</script>
<!--
    v-cloak指令的用法    解决闪动问题
    1.提供样式
        [v-cloak]{
            display:none;
        }
    2.在插值表达式所在的标签中添加v-clock指令
        背后的原理 先通过样式隐藏内容 ，然后再内存中进行值的替换，替换好了之后再显示内容



    3.数据绑定
        就是把数据响应到html中

        v-once：如果显示的信息后续不在需要修改那么就用v-once 提高程序的的性能
    -->

</html>