<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div class="app">
        <h1>{{msg}}</h1>
    </div>
    <div class="app">
        <h1>{{msg}}</h1>
    </div>
    <div id="app2">
        <h1>{{name}}</h1>
    </div>
    <script>
        new Vue({
            //一个VUE实例可以接管多个容器吗?
            //只接管了一个容器
            //一旦接管到一个容器后,即便后面有相同的容器,Vue也是不管的
            //因为Vue已经接管到容器了
            el : ".app",
            data : {msg : "HelloVue"}
        });
        new Vue({
            //先接管了app2
           el : "#app2",
           data : {
                name : "zhangSan"
           }
        });
        new Vue({
            //接管不了已经被接管的容器
            el : "#app2",
            data : {
                name : "jackson"
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 准备容器 -->
    <!-- {{}}里面可以写什么东西? -->
    <!-- 1.在data里面声明的可以写(变量函数参数) -->
    <!-- 2.常量都可以 -->
    <!-- 3.只要是合法的JS表达式都可以 -->
    <!-- 4.模板方法都被放在沙盒中,只能访问全局变量的一个白名单,如Date和Math -->
    <div id="app">
        <!-- 这里就可以视为使用变量 -->
        <h1>{{msg}}</h1>
        <!-- 调用函数 -->
        <h1>{{sayHello()}}</h1>
        <h1>{{100}}</h1>
        <h1>{{"Hello Vue!!!"}}</h1>
        <h1>{{1 + 1}}</h1>
        <h1>{{"Hello" + "Vue123"}}</h1>
        <h1>{{msg + 1}}</h1>
        <!-- 三目运算符也可以 -->
        <h1>{{gender ? "男" : "女"}}</h1>
        <!-- 拆分反转拼接到一起 -->
        <h1>{{msg.split("").reverse().join("")}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
    </div>
    <script>
        var i = 100;
        // Vue程序
        new Vue({
            el : "#app",
            data : {
                // 我们将这个msg称之为变量
                // 这行代码就可以视为变量的声明
                msg : "abcdefg",
                // 这个变量也可以是一个函数
                sayHello : function()
                {
                    console.log("Hello Vue!");
                },
                gender : true
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <!-- 什么是指令,有什么作用 -->
    <!-- vue框架所有的指令都是以v-开始的 -->
    <!-- 插值是写在标签体当中的,指令写在html的属性位置 -->
    <!-- Vue框架的指令以属性的形式存在 -->
    <!-- 指令的语法规则 -->
    <!-- <html标签 v-指令名:参数="表达式"></html标签> -->
    <!-- 指令中表达式的语法和插值语法的表达式语法格式一致,但是不能用{{}}括起来 -->
    <!-- 不是所有的指令都需要参数或表达式如v-once -->
    <!-- 有的指令只需要表达式不需要参数,如v-if -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-if="msg === '123'">{{msg}}</h1>
    </div>
    <script>
        // Vue程序
        new Vue({
            el : "#app",
            data : {
                msg : "Hello Vue"
            }
        });
    </script>
</body>
</html>