VUE基础

最新推荐文章于 2023-05-17 19:46:30 发布

Zany555

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量101

点赞数

分类专栏：学习 VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_45399980/article/details/116501563

版权

学习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基础知识，包括它作为一个JavaScript框架的作用，简化DOM操作和响应式数据驱动的特点。通过一个简单的示例展示了如何创建第一个Vue程序，包括在HTML中引入Vue.js库，定义挂载点和数据对象，以及如何在页面上显示数据。示例中创建了两个Vue实例，分别绑定了不同的数据和元素。

摘要由CSDN通过智能技术生成

VUE简介

JavaScript框架
简化Dom操作
响应式数据驱动

第一个Vue程序

官方文档：https://cn.vuejs.org/v2/guide/
导包：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

First Vue
el挂载点：
data数据对象:

<!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>First vue</title>
</head>
<body>
    <!-- 挂载点外部不能使用 -->
    {{message}}

    <!-- 可以使用类选择器，id选择器(推荐)，标签选择器 -->
    <span class="app2">{{message}}</span>


    <div id="app">
        {{message}}

        <!-- 挂载点内部仍然可用 -->
        <span>{{message}}</span>
        <p>{{school.name}}{{school.mobile}}</p>
        <p>{{campus[0]}}{{campus[1]}}</p>
    </div>
    

    


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!",
                school:{
                    name:"小明",
                    mobile:"10086"
                },
                campus:["清华","北大"]
            }
        })
        var app2 = new Vue({
            el:".app2",
            data:{
                message:"你好，vue"
            }
        })
    </script>
</body>

</html>