1.重学Vue 初识Vue 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../JS/vue.js"></script>        
    </head>
    <body>
        <!--
            初识Vue:
                1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象.
                2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法.
                3.root容器里的代码被称为【Vue模板】.
                4.Vue和实例是一一对应的关系.
                5.真实开发中只有一个Vue实例,并且会配合着组件一起使用.
                6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性.
                7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新.

                注意区分：js表达式 和 js代码（语句）
                    1.表达式：一个表达式会产生一个值,可以放在任何一个需要值的地方:
                        (1). a
                        (2). a+b
                        (3). demo(1)
                        (4). x===y ? "a":"b"

                    2.js代码（语句）
                        (1). if(){}
                        (2). for(){}
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>hello word!</h1>
            <h1>我的名字是：{{name}},{{address}},{{Date.now()}}</h1>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;//关闭F12开发者VUE引用提示

        //创建Vue实例
        new Vue({
            el:"#root",  //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
            data:{//data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象.
                name:"梦晓轩",
                address:"上海"
            }
        });
    </script>
</html>

　　

posted @ 2022-01-09 06:55  种太阳  阅读(26)  评论(0)    收藏  举报