Vue框架的基本使用

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 语法)

声明：小猿资源站是一个资源分享和技术交流平台，本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Vue 的使用步骤

代码示例

实例参数分析

插值表达式的用法

Vue代码运行原理分析

相关文章