Vue


reading:   

​ 本文只是对Vue.js进行简单的入门，适合于主做后端的开发人员对前端进行简单了解（笔者花了俩三天，对vue进行简单入门，用以开发一个前后端分离的框架，因此学都可能不是很细致，若文章有误欢迎指出），若想要对其进行更深层次的研究可以去参考文献中查阅资料。

1、Vue.js

1.1、Vue是什么

  • Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
  • Vue 被设计为可以自底向上逐层应用。
  • Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
  • Vue 完全能够为复杂的单页应用提供驱动。
  • Vue是响应式的。

1.2、参考资料

官方网站：https://v3.vuejs.org/

中文文档：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，国内还没发现哪一家比较好，目前还是建议下载到本地。

2.3、npm安装

2.3.1、安装node.js

​ linux(笔者用的是CentOS，其他版本的linux可以自行百度，但都殊途同归):

1
yum install -y nodejs

​ windows:

​ 可去官网下载安装包，进行窗口化安装。

​ windows、linux输入node -v判断安装是否成功

1
node -v

​ 当然也可以直接在官网下载二进制文件，对环境变量path进行添加，这里就不在赘述。

2.3.2、安装vue-cli

​ node.js中自带了npm，npm是一个包管理工具，我们可以用npm对vue组件进行安装。

首先让我们检查一下npm是否安装:

1
npm -v

​ 若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

安装成功会显示操作列表。

2.3.3、安装webpack

​ Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

使用npm安装webpack:

1
2
npm install webpack -g
npm install webpack-cli -g

检测是否安装成功(俩条命令执行都是一个结果):

1
2
webpack -v
webpack-cli -v

2.3.4、创建vue工程

​ 要创建一个vue工程需要依赖于webpack，若前面没配置或安装好，需执行完成后方可创建。

创建vue工程：

1
2
3
4
5
6
7
8
9
10
11
12
#创建Vue项目
vue init webpack myvue
#安装vuerouter
npm install vue-router --save-dev
#安装elementUI
npm i element-ui -S
#安装依赖
npm install
#安装SASS加速器
npm install sass-loader node-sass --seave-dev
#启动测试
npm run dev

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div id="app">
    <input v-model="test">
	<!-- <input :value="test" @input="test= $event.target.value"> -->
   	<!--语法糖-->
  </div>
</template>

<script>
export default {
	name: 'App',
    data: {
      test: '这是一个测试'
    }
}
</script>

3.2、条件语句

v-if

​ if判断笔者相信读者都不陌生了，经典的分支语句。例子,

1
2
3
4
5
6
7
8
9
10
11
<template>
    ...
	<!--显示-->
    <Buy v-if="show===1"/>
    <Shop v-if="show===2"/>
    <Order v-if="show===3"/>
    <ShoppingCart v-if="show===4"/>
    <Collect v-if="show===5"/>
    <PersonalInfo v-if="show===6"/>
    ...
</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
2
3
4
5
6
7
8
9
<el-row v-for="o in order" :key="o.id" style="padding: 10px">
    <el-card shadow="hover">
        鼠标悬浮时显示:id={{o.id}},
        good={{o.good}},
        state={{o.state}},
        price={{o.price}},
        number={{o.number}}
    </el-card>
</el-row>

3.4、路由

vue-router我们之前已经安装过了，没安装可以在安装一遍

1
npm install vue-router --save-dev

导入VueRouter，在main.js输入，

1
2
import VueRouter from "vue-router";
Vue.use(VueRouter);

在src目录下创建router目录，在router包下创建核心router文件index.js。例,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import Vue from 'vue';
import VueRouter from "vue-router";

import Login from "../view/Login";
import Main from "../view/Main";
import NotFountPage from "../view/NotFountPage";
import Register from "../view/Register";
import Forget from "../view/Forget";
import UpdatePwd from "../view/UpdatePwd";

Vue.use(VueRouter);
export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/index',
      name: 'Main',
      component: Main
    },
    {
      path: '/',
      name: 'Main',
      component: Main
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/forget',
      name: 'Forget',
      component: Forget
    },
    {
      path: '/updatePwd',
      name: 'UpdatePwd',
      component: UpdatePwd
    },
    {
      path: '*',
      component: NotFountPage
    }
  ]
})

在进行测试时，url总会在后面加上一个”/#”，可以使用mode: 'history'消除。

3.5、axios

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

1
2
3
4
5
6
7
8
9
10
11
12
axios.get("http://localhost:8080/static/mock/isUserNamePwd/" + this.ruleForm.userName + "/" + this.ruleForm.pwd)
            .then(function (response) {
              let info = eval(response.data);
              if (info["id"] !== -1) {
                localStorage.setItem("id",info["id"]);
                localStorage.setItem("userName",info["userName"]);
                window.location.href = "/";
              }
            })
            .catch(function (error) {
              console.log(error);
            })

参考文献

[1]佚名.Vue官方文档[EB/OL]

[2]菜鸟教程.Vue3 教程[EB/OL]

[3]刘汉伟.Vue.js从入门到项目实战-北京[M]:清华大学出版社[2019]

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家