第一个Vue.js案例

第一个Vue.js案例

使用Vue有如下几步

  1. 引入文件头

  2. 加入数据输出框

  3. 创建Vue对象，定义数据

    案例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 第一步：引入头文件 -->
    <script src="../vue-2.4.0.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 第二步：加入数据输出框 -->
    <div id="app">
        <div>{{msg + '---' + 123}}</div>
        <div>
         	{{1+2}}
        </div>
    </div>
    <script>
        // 第三步：创建Vue对象，定义数据
        var vm = new Vue({
            el : '#app',
            data : {
                msg : 'hello Vue!!!'
            }
        });
    </script>
</body>
</html>

案例分析

1、示例参数分析

​ el : 元素挂载位置（值可以是css选择器，或者DOM元素）

​ data：数据模型（值是一个对象）

2、插值表达式用法

​ 将值填充到HTML标签中

​ 插值表达式支持基本的计算操（符合js代码规范即可。）

3、Vue代码运行原理分析

​ 概述编译过程的概念（Vue语法->原生语法）

​ 例如：插值表达式就在内部将其解析为js代码

posted @ 2019-12-30 15:21  张瑞丰  阅读(567)  评论(0)  编辑  收藏  举报