04vue_hello

vue_hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <script src="./js/vue.js"></script>
</head>
<body> 
    <!-- 创建vue容器 -->
    <div id="root">hello,{{name}}</div>
    <script>
        // 关闭生产环境提示
        Vue.config.productionTip=false;
        // 创建 vue实例对象
        new Vue({
            el:'#root',  // element元素，用于指定此数据的容器，通常使用css选择器选择
            data: {     // 用于数据的存储，数据供el使用。可以是对象，也可与是函数。
                name:'vue',
            }
        })
    </script>
    
</body>
</html>

初识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(){0}
        (2).for(){0}

Vue 解析流程

  1. 先有容器，然后有了Vue实例。
  2. 当开始Vue工作时，Vue会读取配置项
    1. 先通过el属性，获取模板容器
    2. 解析模板容器，扫描容器中是否含有Vue设计的特殊语法
    3. 有特殊语法，判断容器特殊语法配置项中是否也含有。
    4. 配置项有值，则Vue会将容器中的特殊语法替换为值，生成全新的容器。
    5. 将解析完成后，生成的全新容器，替换掉模板容器。

html 模板（含vue特殊语法）---> Vue解析 ----> 替换模板中的特殊语法 -----> 将新生成的容器替换html模板。

容器与vue的关系

容器与vue的关系是一对一的关系。

posted @ 2022-09-06 13:18  Redskaber  阅读(21)  评论(0)    收藏  举报