VUE(一)：入门与介绍

最新推荐文章于 2024-06-02 16:13:49 发布

算云烟

最新推荐文章于 2024-06-02 16:13:49 发布

阅读量125

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/109470808

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

VUE(一)：入门与介绍

一、VUE介绍

1.来自官方标准介绍：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.渐进式含义：

可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架。

也就是说，vue可以很灵活的选择其中某一部分组件可供使用；并且，你还可以在传统java web项目中例如jsp页面嵌入vue部分内容使用，完全灵活与独立。

二、VUE的安装与使用

1.通过<script>标签引入使用

像这样，传统jsp页面引入js一样，引入一个vue.js文件，将其放入在项目目录中,下载vue.js请访问https://github.com/vuejs/vue，然后进入dist文件夹找到vue.js即可

<head>
    <meta charset="UTF-8">
    <title>V-model的使用</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>

或者，直接通过cdn在线加载方式引入，无需本地下载vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 注意不要下载其他压缩版本，否则开发环境看不到错误与警告信息 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

其他CDN可用的地址

Staticfile CDN（国内）: https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg: https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

2.使用npm安装

通过Node.js（window需要额外安装Node.js环境）或者IDEA 中Terminal终端控制台执行npm命令

（1）先输入：npm init -y 对项目进行初始化，此时，会在项目目录下出现一个package.json文件。

这是对项目的基本描述信息。例如名称、版本等，有点类似java中的pom文件。

（2）安装Vue，输入命令：npm install vue --save ，若出现警告错误等(win10容易出现),进入到项目路径打开windows powershell（先按住shift然后鼠标右键），然后重新执行命令即可。

然后就会在项目目录发现一个node_modules目录，并且在下面有一个vue目录，node_modules是通过npm安装的所有模块的默认位置。

三、Hello-vue

新建一个html文件，然后输入以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 我这里通过本地引入的js文件 -->
    <script src="../js/vue.js"></script>
</head>
<body>

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

    <script>
        const app = new Vue({
            el:'#app',
            data: {
                message:'第一次使用VUE，啦啦啦'
            }
        })
    </script>
</body>
</html>

至此，一个vue页面就创建完成啦！

说明：<script>标签里js函数创建了一个VUE实例函数，然后通过el属性挂载了id为app的div，此时，这个div就被vue接管了，可以通过双花括号来取vue对象实例的data属性中的值

算云烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE(一)：入门与介绍

VUE(一)：入门与介绍一、VUE介绍1.来自官方标准介绍：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2.渐进式含义：可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件
复制链接

扫一扫

专栏目录