Vue框架的基本使用

2021-02-10 23:03:02 浏览数 (9325)

Vue 的使用步骤

  • 1.创建一个标签，用于数据的填充
  • 2.引入 Vue.js 库文件
  • 3.实例化 Vue 对象
  • 4.把 Vue 提供的数据填充到标签里

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ msg }}</div>
        <div>{{ 1 + 1}}</div>
        <div>{{"===" + msg + "==="}}</div>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app', // 元素的挂载位置（值可以是CSS选择器或者DOM元素）
            // data 模型数据（值是一个对象）
            data: {
                msg: 'Hello Vue',
            }
        });
    </script>
</body>

</html>

实例参数分析

  • 在 Vue 对象里 el 为元素的挂载位置(值可以是 CSS 选择器也可以是 DOM 元素) data 为模型数据(类型是一个对象)

插值表达式的用法

  • 使用插值表达式{{}}将数据填充到 HTML 标签里
  • 插值表达式还支持 JavaScript 的基本计算操作

Vue代码运行原理分析

概述编译过程概念（Vue 语法→原生 js 语法)