Vue的基础知识

最新推荐文章于 2023-10-24 12:57:18 发布

慧钰鑫

最新推荐文章于 2023-10-24 12:57:18 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/XXH3L/article/details/121197209

版权

第一步先配置node.js的环境（具体配置请百度）

第二步引入vue.min.js插件

第三步在HTML文件的script标签中创建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">
        <!-- {{strUser.name}}{{strUser.password}} -->
        <!-- {{strUser.name+strUser.password}} -->
        <!-- {{`${strUser.num1}${strUser.num2}`}} -->
        <!-- {{arr[2]}} -->
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    // 创建了一个vue实例
    // el绑定需要实例的目标（一般都是绑定最外层的标签）
    // data可以定义变量，用于存储数据
    var app = new Vue({
        el: "#app",
        data: {
            arr: [1, 2, 3, 4],
            strUser: {
                name: "Alin",
                password: "123456",
                num1: 1,
                num2: 2
            }
        }
    })
</script>

</html>

慧钰鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的基础知识

第一步先配置node.js的环境（具体配置请百度）第二步引入vue.min.js插件第三步在HTML文件的script标签中创建vue的实例化对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫