[JavaScript知识库] Vue学习笔记（一）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习笔记（一） -> 正文阅读

[JavaScript知识库]Vue学习笔记（一）

一、hello Vue

安装vue，把源文件下载下来，放到工程文件夹下

?在代码中引入vue

<script src="../js/vue.js"></script>

案例代码：

<!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 test</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{note}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',  //用于挂载要管理的元素
            data:{      //定义数据
                message:'hello Vue',
                note:'小标题'
            }
        })
    </script>
</body>
</html>

显示效果：