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属性中的值