![VueOutLine](/2021/05/28/Vue/VueOutLine.png)
本文只是对Vue.js进行简单的入门,适合于主做后端的开发人员对前端进行简单了解(笔者花了俩三天,对vue进行简单入门,用以开发一个前后端分离的框架,因此学都可能不是很细致,若文章有误欢迎指出),若想要对其进行更深层次的研究可以去参考文献中查阅资料。
1、Vue.js
1.1、Vue是什么
- Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
- Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
- Vue 完全能够为复杂的单页应用提供驱动。
- Vue是响应式的。
1.2、参考资料
中文文档:https://v3.cn.vuejs.org/guide/introduction.html
github:https://github.com/vuejs/vue-next
2、Vue安装
与其他前端框架一样,Vue也有三种安装方式。
2.1、独立版本
直接下载并用 <script>
标签引入,Vue 会被注册为一个全局变量。
2.2、CDN导入
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
- Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
- unpkg:https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
2.3、npm安装
2.3.1、安装node.js
linux(笔者用的是CentOS,其他版本的linux可以自行百度,但都殊途同归):
1 | yum install -y nodejs |
windows:
可去官网下载安装包,进行窗口化安装。
windows、linux输入node -v
判断安装是否成功
1 | node -v |
![rstnode](/2021/05/28/Vue/rstnode.png)
当然也可以直接在官网下载二进制文件,对环境变量path进行添加,这里就不在赘述。
2.3.2、安装vue-cli
node.js中自带了npm,npm是一个包管理工具,我们可以用npm对vue组件进行安装。
首先让我们检查一下npm是否安装:
1 | npm -v |
![rstnpm](/2021/05/28/Vue/rstnpm.png)
若npm安装成功,执行会返回版本号。
注:在npm的使用过程中可能出现安装错误等,npm非常智能的提示我们如何对其进行修补例如:在使用npm install安装时,npm会提示使用npm audit fix( 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复。) 进行修复依赖。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,也称Vue脚手架。
使用npm安装vue-cli:
1 | npm install vue-cli -g |
安装完成后,我们使用vue list
检测是否安装成功:
1 | vue list |
![rstvuecli](/2021/05/28/Vue/rstvuecli.png)
安装成功会显示操作列表。
2.3.3、安装webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
使用npm安装webpack:
1 | npm install webpack -g |
检测是否安装成功(俩条命令执行都是一个结果):
1 | webpack -v |
![rstwebpack](/2021/05/28/Vue/rstwebpack.png)
2.3.4、创建vue工程
要创建一个vue工程需要依赖于webpack,若前面没配置或安装好,需执行完成后方可创建。
创建vue工程:
1 | #创建Vue项目 |
elementui官网:https://element-plus.gitee.io/
3、Vue基础语法
对于vue语法,笔者并不是很精通,本段只讲述几个重要且笔者较为熟悉的部分。
3.1、数据绑定
插入文本
{{绑定值}}
常用于绑定文本。例,
1 | <p>{{msg}}</p> |
v-bind
用于vue数据向html属性的单向绑定。例,
1 | <a v-bind:href="url">...</a> |
也可以缩写为,
1 | <a :href="url">...</a> |
v-on
v-on用于绑定事件。例,
1 | <a v-on:click="doSomething">...</a> |
也可缩写为,
1 | <a @click="doSomething">...</a> |
v-model
vue中经常使用到<input>
、<textarea>
、<select>
这类表单元素,vue对于这些元素的数据绑定使用v-model实现。v-model实现了双向绑定,它会根据控件类型自动选取正确的方法来更新元素,本质上只是个语法糖。例
1 | <template> |
3.2、条件语句
v-if
if判断笔者相信读者都不陌生了,经典的分支语句。例子,
1 | <template> |
这是笔者在oms的Main.js中写的一段代码,v-if
会判断表达式的boolean值,当表达式值为true时,显示该节点(组件)。
v-show
这里主要讲一下v-if
与v-show
之间的区别,用法与v-if
基本一致,v-if
在客户端看不见为false
的节点,v-show
反之,共同点两者都不显示内容。
3.3、循环语句
v-for
v-for可以循环渲染。特别提示,:key
最好要写(笔者因为没写该属性排错排了好久/(ㄒoㄒ)/~~),:key
是主键。下面是我做小demo时的代码,希望有所帮助:
1 | <el-row v-for="o in order" :key="o.id" style="padding: 10px"> |
3.4、路由
vue-router我们之前已经安装过了,没安装可以在安装一遍
1 | npm install vue-router --save-dev |
导入VueRouter,在main.js输入,
1 | import VueRouter from "vue-router"; |
在src目录下创建router目录,在router包下创建核心router文件index.js。例,
1 | import Vue from 'vue'; |
在进行测试时,url总会在后面加上一个”/#”,可以使用mode: 'history'
消除。
3.5、axios
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
1 | axios.get("http://localhost:8080/static/mock/isUserNamePwd/" + this.ruleForm.userName + "/" + this.ruleForm.pwd) |
参考文献
[1]佚名.Vue官方文档[EB/OL]
[2]菜鸟教程.Vue3 教程[EB/OL]
[3]刘汉伟.Vue.js从入门到项目实战-北京[M]:清华大学出版社[2019]