Vue学习（一）-简单入门实例

最新推荐文章于 2023-10-16 12:32:14 发布

ataraxy_thinking

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量261

点赞数 1

分类专栏： # vue

本文链接：https://blog.csdn.net/ataraxy_/article/details/105328109

版权

前端学习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

本文主要是对于Vue非常浅显的知识进行介绍，并不深入了解，只接触表面，对一些较复杂的内容也不过多描述。如文中有错误之处，望不吝赐教，谢谢~

一、Vue简介

Vue 是一套用于构建用户界面的渐进式JavaScript框架，和其他JavaScript框架一样，可以很好的整理JavaScript代码使其不再零乱，在Java web开发中，通过vue可以更好的实现前后端分离。
学习vue，还需要了解一种开发模式：MVVM（Model-View-ViewModel）。它本质上就是mvc 的改进版。mvvm 就是将其中的View 的状态和行为抽象化，让我们将视图 ui和业务逻辑分开。而vue正是符合mvvm模式的框架。

二、Vue简单入门实例

在这里插入图片描述
（1）新建spring boot项目
（2）导入vuejs-2.5.16.js文件(vue库)
链接：vuejs-2.5.16.js
提取码：e9yh
（3)新建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue库-->
    <script src="vuejs-2.5.16.js"></script>
</head>
<body>

    <div id="app">
        <!--vue插值-->
        {{message}}
    </div>

    <script>
        //创建vue对象
        new Vue({
            el:"#app",
            data:{
                message:"hello world"
            }
        });
    </script>

</body>
</html>

（4）运行程序并在浏览器中输入

http://localhost:8080/html1.html

可得到如下画面
在这里插入图片描述

说明通过vue，成功将获取到了message里面的内容。

在这里插入图片描述
2020.04.05

ataraxy_thinking

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（一）-简单入门实例

本文主要是对于Vue非常浅显的知识进行介绍，并不深入了解，只接触表面，对一些较复杂的内容也不过多描述。如文中有错误之处，望不吝赐教，谢谢~一、Vue简介Vue 是一套用于构建用户界面的渐进式JavaScript框架，和其他JavaScript框架一样，可以很好的整理JavaScript代码使其不再零乱，在Java web开发中，通过vue可以更好的实现前后端分离。学习vue，还需要了解一种开...
复制链接

扫一扫

专栏目录