第一章 Vue核心 第一节 初识Vue

初识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(){}

 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!--学习Vue的前置知识：
        ES6语法规范
        ES6模块化
        包管理器
        原型、原型链       重点
        数组常用方法
        axios
        promise
    -->
    <!--准备好一个容器-->
    <div id="root">
        <h1>hello,{{name}}</h1>             <!--{{}}中必须是js表达式          插值语法-->
        <h1>my age is:{{age}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false ; //阻止 vue 在启动时生成生产提示。

        //创建Vue实例
        new Vue({
            el:'#root',     //el element的缩写用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串，也可以是元素对象
            data:{          //存储数据，供el指定的容器使用
                name:'retrace',
                age:21
            }
        });
    </script>
</body>
</html>

 

posted @ 2021-10-12 16:54  何以之  阅读(73)  评论(0)    收藏  举报