使用Vue的示例分析

在输出的位置使用两组大括号进行 content 这个值的回显我们之前就已经能做到了，而我们在 input 的属性中使用 v-model 进行对于 content 的绑定，这样就可以使得输入框中输入的值可以直接影响 data 中 content 的值，即随着你 input 中输入值的修改，随之输出位置的内容也会变化

input 中 ，单选框

性别:
男
女
输出:{{gender}}

效果显示

select 中

---请选择---
A-苹果
B-樱桃
C-西瓜

输出:{{choose}}

(六) Vue组件

Vue 中组件也是一个很重要的概念，例如一个页面中，头部、底部、侧边栏、主内容区 都可以看做一个一个组件，不过有一些组件是固定的，例如头部，还有一些是变换的例如内容区

Vue 中就允许我们使用小型、独立和通常可复用的组件构建大型应用

注：实际都是创建 .vue 模板文件，并不会用直接在页面中书写的这种形式，仅为讲解方便

直接拿一个简单，不过还算相对完善的案例来进行讲解‘

先说一下最终我们想干嘛，例如 div 或者 input 等等 都是一个一个标签，我们现在向做的就是通过创建自定义组件模板，自定义出一个这样的标签，我们在需要的地方只需要引用这个标签，我们就可以达到显示出模板中想要的效果，达到抽取复用的效果

首先使用 Vue.component....... 这样的格式创建组件，在其中 ideal-20 就是组件标签的名字， template 就代表模板中的内容，props 代表我们在引用处传入的参数名

接着在一个已经绑定好的 hello-7 的 div 中引入自定义组件标签 ideal-20，而我们想要遍历 data 中的 fruits 数组，在 ideal-20 属性中进行 for 遍历即可，同时我们需要将每一项通过 v-bind:ideal="item" 绑定参数到组件模板中，因为数组不是一个普通的数组，所以赋 id 为 key值

效果展示

(七) Axios 入门

首先我们需要提一下，为什么要用这个东西呢？

我们在以前传统的开发中，我们一般会使用 Ajax 进行通信，而 Vue,js 作为一个视图层框架，并不支持 Ajax 的通信功能，所以可以使用 Axios 来实现 Ajax 的异步通信

首先看一下它的特点：

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF

首先我们拿一段 json 来模拟数据

{
"name":"BWH_Steven",
"blog":"www.ideal-20.cn",
"about":{
"country":"中国",
"phone":"13888888888"
},
"students":[
{
"id":0,
"name":"张三"
},
{
"id":1,
"name":"李四"
},
{
"id":2,
"name":"王五"
}
]
}

通过下图我们就可以知道 我们可以将代码写到 mounted() 中去

接着就是使用的代码了

首先除了引入 Vue 还需要引入 Axios 的 CDN，在 mounted() 方法中，去拿到这个json文件，同时将 response.data 也就是拿到的值，赋值给我们在 data() 中定义的 info 中

注意：data 和 data() 是不一样的

接着在绑定好的 hello-8 div 中就可以调用回显了

说明：为什么给 v-clock 添加了一个样式呢，这是因为，显示数据的过程是先显示出{{info.name}} 这样的字样，拿到值后，再去渲染，如果网速慢的情况下可以看到 info.name 的，体验不是很好

{{info.name}}
{{info.blog}}
{{info.about.country}}
{{info.about.phone}}
{{info.students[0].name}}

(八) 计算属性

这一段，我认为官方文档说的还是比较清楚的

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{message.split('').reverse().join('')}}

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

原始数据:"{{message}}"
翻转数据:"{{reversedMessage}}"

结果：

原始数据: "Hello"

翻转数据: "olleH"

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage)//=>'olleH'
vm.message='Goodbye'
console.log(vm.reversedMessage)//=>'eybdooG'

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性和方法的区别 ？

看到这里，你会不会觉得，貌似我用方法也可以实现这种效果啊，将具体的业务逻辑放在定义的方法中，但是他们最大的区别是计算属性是基于它们的响应式依赖进行缓存的，也就是说，我们上文中所依赖的 message 不发生改变，reversedMessage 会马上获取之前的结果，就不用再次执行函数了，计算属性可以帮我们节省大量的性能开销，不过如果我们并不希望出现缓存内容，就可以使用方法来代替它

(九) 插槽 Slot

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

这块写的太浅了，不看也罢

插槽就是子组件给父组件一个占位符即 父组件就能在这个占位符，填一些模板或者 HTML 代码

简单点理解就是组件套组件

就像下面我定义了三个组件，ideal是父组件，在其中用 slot 进行占位，同时用 name 属性指向到了这两个子组件 ideal-title 和 ideal-content，而为了子组件中显示的数据来自服务器（模拟）所以需要动态地显示，即通过传参（前面讲解组件模板有说过），配合遍历等读出 data 中的数据即可

结果如下：

四、 Vue 入门

(一) 创建 Vue-cli 项目

Vue-cli 是官方提供的一个用于快速创建 Vue 项目的脚手架，可以简单的理解为 Maven ，即创建时选择一个骨架那种感觉，能让开发更加便捷

(1) 准备

A：安装 Node.js

Node.js 去官网或者中文网进行下载

cmd 下输入 node -v ，出现版本号即正常，输入 npm -v 同样出现版本号即正常

将 Node.js 的镜像调整为淘宝镜像加速（cnpm）

#-g代表全局安全推荐此方法
npminstallcnpm-g

#还有一种办法就是每次使用npm都在后面加一串字符串，不推荐
npminstall--registry=https://registry.npm.tabao.org

安装后打开此路径（abc是我这台机器的用户名，根据自己的来）：

C:\Users\abc\AppData\Roaming\npm\node_modules

正常情况下里面会有安装好的 cnpm，接着我们就开始安装 vue-cli

B：安装 vue-cli

cnpminstallvue-cli-g

安装后在 npm 文件夹下打开 cmd 输入 vue-list ，若出现下图这种星状内容，则完毕

C：创建 vue-cli 程序

自己在想要的位置创建一个目录，选择基于 webpack 的 vue 应用程序

此文件夹下的 cmd 中输入命令

vueinitwebpackvue_02_myvue

输入一些基本信息，例如 项目名 作者名

下面的内容如果有选项的回车配合 n（也就是no）进行

这时，它会询问你是否自动执行 npm install（如下），是的话则会自动安装一些依赖，点击否，需要自行再输入命令安装，所以选择是就行了

Should we run npm install for you after the project has been created? (recommended) npm

完成之后，项目中的 node_modules 就会多出很多很多依赖

再接着，它又会提醒初始化好了，你如果想启动就可以执行这两条，第一句是从外面的文件夹进入到我自定义的那个项目文件夹中，第二句则是启动

出现如果所示内容则启动成功，通过后面的地址和端口就可以访问

找个编辑器看一下，我用 IDEA Open进这个文件夹来，就可以进行修改了，具体的代码文件还是在 src 目录下，同时还可以配置 IDEA 的 Terminal 为有管理员权限的 cmd 或者终端，能更便捷一些

如何快速创建项目

可以通过 HBuilder 进行相对快速的创建项目，其新建中直接就可以创建 vue 项目 以及终端运行

在想创建项目的目录下终端输入 vue ui 进入图形界面（此方法需要 vue-cli 版本为 3.x ，通过 vue --version 查询到 vue-cli 的版本 例如为 2.9.6 是不能使用的，可用的命令可以通过 vue -h 查看 ）

(二) 简单认识 Webpack

(1) 认识安装

盖菜我们创建 vue 项目的时候，选择的是 webpack 进行打包，但是都是自动化的过程，我们手动的操作一下，能更好的理解

webpack是一个现代 Javascript应用程序的静态模块打包器( module bundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系 Dependency graph),其中包含应用程序需要的毎个模块,然后将所有这些模块打包成一个或多个 bundlewebρack是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。通过 loader转换,任何形式的资源都可以当做模块,比如 Commonis、AMD、ES6、CSS、JSON、 Coffee Script、LESS等;

安装 webpack、webpack-cli ，如果 npm 不太慢先考虑使用 npm 再考虑使用 cnpm

cnpminstallwebpack-g
cnpminstallwebpack-cli-g

通过 webpack -v 、webpack-cli -v 查看是否出现版本号确定安装是否成功

(2) 使用 webpack

创建项目（IDEA 的话，直接创建一个普通文件夹 Open进入就行了）

新建一个 modules 目录，放置 JS 模块等内容

在 modules 下创建模块文件，例如 demo.js 用于编写 Js 模块相关代码，例如

exports.test=function(){
document.write("
理想二旬不止
")
}

在 moduels 下创建 main.js ，这是一个入口文件，用于打包时设置 entry 属性对应

vardemo=require("./demo")
demo.test();

在项目根目录下创建 webpack.config.js 文件，用于配置

module.exports={
entry:"./modules/main.js",
output:{
filename:"./js/bundle.js"
}
};

在 terminal 中输入 webpack 命令进行打包（进入项目目录后 输入 webpack 就行了，这是运行结果）

abc@LAPTOP-5T03DV1G MINGW64 /f/develop/IdeaProjects/framework-code/vue/webpack_01_first

$ webpack

Hash: 7f61ef9440a6bab63058

Version: webpack 4.44.1

Time: 334ms

Built at: 2020-09-05 4:18:40 PM

Asset Size Chunks Chunk Names

./js/bundle.js 1020 bytes 0 [emitted] main

Entrypoint main = ./js/bundle.js

[0] ./modules/main.js 42 bytes {0} [built]

[1] ./modules/demo.js 82 bytes {0} [built]

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each e

nvironment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

打包后项目目录多出 dist 文件夹 其中有一个 js 文件夹，放着打包的 js，创建index.html 引入此 js

页面效果如下：

补充：配置文件中可能会有哪些内容

• entry：入口文件,指定 Web Pack用哪个文件作为项目的入口

• output：输出,指定 Web pack把处理完成的文件放置到指定路径

• module：模块,用于处理各种类型的文件plugins:插件,如:热更新、代码重用等

• resolve：设置路径指向

• watch：监听,用于设置文件改动后直接打包

(三) 简单认识 Vue Router 路由

Vue Router是 Vue.js 的官方路由器。它与 Vue.js 核心深度集成，使使用 Vue.js 轻松构建单页应用程序变得轻而易举。功能包括：

简单的说，可以实现一些页面的跳转，例如我们头部的内容是不变的，内容部分需要根据链接改变

• 嵌套路线/视图映射

• 模块化，基于组件的路由器配置

• 路由参数，查询，通配符

• 查看由Vue.js过渡系统提供动力的过渡效果

• 细粒度的导航控制

• 与自动活动CSS类的链接

• HTML5历史记录模式或哈希模式，在IE9中具有自动回退

• 可自定义的滚动行为

安装步骤：

由于 vue-router 是一个插件包，还是老办法，npm/cnpm

npminstallvue-router--save-dev

安装后如果有一些问题，根据提示，输入对应命令即可，就像我遇到了提示输入 npm audit fix

创建好项目后，删掉默认的 HelloWorld那个组件，然后再 components 中新建两个自定义组件，例如我创建的 FirstDemo.vue 和 Main.vue 前者是一个子页面，后者代表主页面，随便自拟

FirstDemo.vue

Main.vue

接着创建 router 文件夹，以及其中的 index.js 主配置

注：如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

importVuefrom'vue'
importVueRouterfrom'vue-router'
importFirstDemofrom'../components/FirstDemo'
importMainfrom'../components/Main'

Vue.use(VueRouter);

exportdefaultnewVueRouter({
routes:[
{
//路由路径
path:"/firstDemo",
name:'firstDemo',
//跳转的组件
component:FirstDemo
},
{
//路由路径
path:"/main",
name:'main',
//跳转的组件
component:Main
}
]
})

修改 main.js 这个入口文件

//TheVuebuildversiontoloadwiththe`import`command
//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'

Vue.config.productionTip=false

Vue.use(router);

/*eslint-disableno-new*/
newVue({
el:'#app',
//配置路由
router,
components:{App},
template:''
})

以及正式的书写页面，引入链接

(四) Vue + ElementUi 基本使用

创建名字为 vue_03_vue_elementui 的项目，同时安装 vue-router、e1ement-ui、sass-loader 、node-sass 插件

#创建项目
vueinitwebpackvue_03_vue_elementui

#进入工程目录
cdvue_03_vue_elementui
#安装vue-router
npminstallvue-router--save-dev
#安装e1ement-ui
npmielement-ui-S
#安装依赖
npminstall
#安装SASS加载器
cnpminstallsass-loadernode-sass--save-dev
#启动测试
npmrundev

补充：Npm命令解释

npm install moduleName：安装模块到项目目录下

npm install - g moduleNMame：-g 的意思是将模块安装到全局,具体安装到磁盘哪个位置，要看 npm config prefix的位置

npm install - save moduleName：--save 的意思是将模块安装到项目目录下，并在package文件的 dependencies 节点写入依赖，-S为该命令的缩写

npm install -save -dev moduleName：--save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devdependencies节点写入依赖， -D为该命令的缩写

接着就可以在编辑器中打开了，看个人选择，我这里用 IDEA 打开，打开后注意看一下 modules 文件夹中是否已经把 router sass 等内容成功安装了

接着将默认的 HelloWorld 那个组件和默认 logo 删掉，开始编写代码，创建一个 views 文件夹用来放视图

创建 Login.vue 和 Main.vue

Login.vue

Main.vue

.login-box{
border:1pxsolid#DCDFE6;
width:350px;
margin:40pxauto;
padding:35px35px15px35px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:0025px#909399;
}

.login-title{
text-align:center;
margin:0auto40pxauto;
color:#303133;
}

创建 router 文件夹，以及其中的 index.js，配置好跳转内容

index.js

importVuefrom'vue'
importVueRouterfrom'vue-router'
importLoginfrom'../views/Login'
importMainfrom'../views/Main'

Vue.use(VueRouter);

exportdefaultnewVueRouter({
routes:[
{
path:"/main",
component:Main
},
{
path:"/login",
component:Login
}
]
})

修改 main.js ，使用 router 和 elementui，关于 router 前面就说过，至于后者，照着官网起步文档就明白了

https://element.eleme.cn/#/zh-CN/component/quickstart

main.js

importVuefrom'vue'
importAppfrom'./App'

importrouterfrom'./router'
importElementUIfrom'element-ui';
import'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip=false;

Vue.use(router);
Vue.use(ElementUI);

/*eslint-disableno-new*/
newVue({
el:'#app',
router,
render:h=>h(App)
});

App.vue

到这里就写好了，我们可以开始运行了，但是运行时，我分别出现了如下错误

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

Module build failed: TypeError: this.getResolve is not a function

经查阅后，修改项目目录下 package.json 中的 sass-loder 的版本 从 10.0.2 到 8.0.2 到 7.3.1 才可以正常通过 npm run dev 运行

"sass-loader": "^7.3.1",

注：修改配置后需要重新 npm install 或者 cnpm install

展示一下最终效果：

点击首页效果：

点击登录页面效果：

五 、Vue和Java数据交互简单案例

最后，在某马上找了一个现成的页面案例，简单搭了下后台跑了一下，也算巩固一下最前面的基础语法，后台就基本的 SSM ，给了三个接口方法，作为一个后端，这应该算基本功了哇

/user/findAll 、/user/indById 、 /user/updateUser

就是简单的查询和一个更新操作，查询的主体是一个用户类，有这么几个基本字段

publicclassUserimplementsSerializable{	
	privateIntegerid;
privateStringusername;
privateStringpassword;
privateIntegerage;
privateStringsex;
privateStringemail;
......
}

页面中承接的数据的关键代码如下

首先是关于所有用户数据展示的，通过一个对于 userList 的遍历，然后通过大括号组和 X.x 的形式取出属性值

{{u.id}}
{{u.username}}

{{u.password}}
{{u.sex}}
{{u.age}}
{{u.email}}

详情
编辑

点击编辑后执行对于当前用户的查询方法，用于回显，下面通过 v-model 进行与 user 的绑定（js后面给出）

用户名:





密码:





性别:





年龄:





邮箱:

要实现数据交互，最重要的还是定义数据，与使用 axios 进行异步请求

varvue=newVue({
el:"#app",
data:{
user:{id:"",username:"",password:"",age:"",sex:"",email:""},
userList:[]
},
methods:{
findAll:function(){
var_this=this;
axios.get("user/findAll.do").then(function(response){
_this.userList=response.data;
console.log(_this.userList);
}).catch(function(err){
console.log(err);
});
},
findById:function(userid){
var_this=this;
axios.get("user/findById.do",{
params:{
id:userid
}
}).then(function(response){
_this.user=response.data;
$('#myModal').modal("show");
}).catch(function(err){
});

},
update:function(user){
var_this=this;
axios.post("user/updateUser.do",_this.user).then(function(response){
_this.findAll();
}).catch(function(err){
});
}
},
created(){
this.findAll();
}
});

上述代码其实很好理解，首先定义了 user 和 userList 两个数据，userList 就是前面展示所有用户数据的一个遍历内容，用来承载 findAll 后的数据，user 则是对于进行单个用户查询，即修改时回显当前用户旧信息的一个承载实体，因为查询所有的操作是一开始就进行，所以在 created() 中就执行 findAll 方法，在 methos 中创建查和改的方法，通过 axios 进行 get 或者 post 请求，同时将返回的结果进行处理

说明：.then 中的是请求成功后执行的内容，.catch 中是请求失败后执行的内容

注意：最关键的一个内容就是在 axios 前定义了 var _this = this 如果有接触过小程序可能会感到很熟悉，这里定义的原因是因为 例如在 axios 中有这样的语句 _this.userList = response.data; 如果 userList 中前直接使用 this，这就代表着查找 axios 中的此内容，但我们明显想指代的是 data 中的 userList，所以此定义 _this 步骤不可省略

效果如下：

查询所有

查询当前用户以及修改

关于“使用Vue的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

请输入问题背景及详细信息...