文章目录

- 备注
一、Vue简介
- 简介
- MVVM--双向数据绑定模式
- 其他MVVM实践者
- 为什么使用Vue.js
- 两大核心要素
二、Vue开发
- - 引入Vue
  - 快速体验
  - - 注释
- 1.插值表达式 {{}}
- - 注释
2.分支 v-if
- 注释
3.分支 v-show
- 注释
4.循环 v-for
- 遍历数组
- - 注释
- 遍历对象
- - 注释
- 遍历对象数组
- - 注释
5.Vue属性绑定
- 注释
6.Vue事件绑定
- v-on
- - 注释
  - 注释
- 事件修饰符
- - 官方定义
  - 注释
7.计算属性
- 注释
8.Vue的组件化
- - 什么是组件化
- 1.组件的全局注册
- - 注释
- 2.组件本地注册
- - 注释
- 3.组件的生命周期
- - 理解
  - 注释
9.使用Vue-Cli搭建Vue项目
- 什么是vue-cli
- node.js安装
- 在node.js中安装vue-cli
- 使用vue-cli下载项目骨架搭建我们的项目
- 创建项目目录并打开
- 使用webpack骨架快速创建项目目录
10.webpack项目结构
- 整体结构
- src目录
- - components：
  - router目录
  - App.vue
  - main.js
十一、Vue组件间的参数传递
- 1.如何在父组件App.vue中使用子组件
- 2.父子组件之间如何传递参数
- 3.子传父
- - 注释
十二、路由
- 1.使用场景
- 2.安装路由模块
- 3.编写项目
- - 注释
- 4.路由的参数传递
- - 设参
  - 传参
  - 接参
- 5.程序式路由的实现
十三、Axios发送异步请求
- 1.安装Axios
- 2.使用Axios
十四、Vue实战项目
- 1.新建项目
- 2.Vue整合Element UI
十五、Vuex的应用

备注

网上的书籍以及官方文档已经把资料总结的很详细了，这里我不再罗列成体系的理论知识，而是重点记录如何将Vue的各个功能应用到我们所写的的代码上，以及重难点、易错部分的分析。

一、Vue简介

简介

渐进式js框架，只关心视图层，就是MVC中的View视图层，使用Vue需要先熟练掌握HTML/CSS/JavaScript，兼容性强，生态好，性能好

MVVM–双向数据绑定模式

Model：模型层，这里表示JavaScript对象

View：视图层，这里表示DOM，即HTML操作的元素

ViewModel：连接视图和数据的中间件，

Model模型层通过ViewModel这个中间来表现View视图，Vue.js就是ViewModel的实践者

通过ViewModel，View可以监听Model，Model绑定到了View上，这样DOM操作的数据可以实时的修改到Model上，

实时的修改很重要，否则就要通过页面刷新才能看到页面变化，这样浪费资源；js也能实时修改，但是Vue更高效

在上图的文本域中，左侧的框里实时显示右侧的状态（数据绑定），左侧的数据修改又实时影响了右侧的状态（监听），这就是双向绑定

在MVVM架构中，不允许数据和视图直接通信，只能通过ViewModel通信

其他MVVM实践者

AnaularJS ReactJS 微信小程序

为什么使用Vue.js

轻量只有20多kb，适合移动端，易学习，取长补短且有独特功能(计算属性)，开源活跃度高，

两大核心要素

数据驱动、

组件化

1.页面上的每个独立区域视为一个组件

2.每个组件对应一个工程目录，组件所需各种资源就在这个工程目录下维护

3.页面只是提供组件的容器，组件可以自由嵌套、复用，形成完整页面

二、Vue开发

引入Vue

通过CDN技术，在线引入，找到对应的版本，复制链接地址，引入<script>标签即可，https://www.bootcdn.cn/

快速体验

打开Hbuilder，新建目录，简单html项目，新建一个目录，创建一个html文件

添加script标签，引入vue的cdn地址，生产环境使用min版本，开发环境使用普通版本，方便查看代码、异常

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app">姓名: {{name}}<hr/>年龄: {{age}}<hr/>学校: {{school.name}}<hr/>地址: {{school.addr}}<hr/>结束语: {{show()}}</div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.common.dev.js"></script><script type="text/javascript">new Vue({el: "#app",data: {name: "zhangsan",age: 20,gender: 'male',school: {name: 'yucai',addr: 'shenzhen'}},methods: {show: function(){return "hello vue";}}});</script></body>
</html>

注释

el 就是element元素,指明当前哪些元素会被vue绑定，对应了MVVM中的data bindings
data 就是model，用来提供数据
div 给定一个id，在el中绑定这个id，视图层就可以拿到vue对象中的数据，我们习惯用div作为容器
{{}} 叫差值表达式，用来在视图层显示model中的数据
methods 用来定义vue中的方法

1.插值表达式 {{}}

相当于视图层和数据层的连接方式，快速的从数据层获取数据并展示在视图层上，

主要用于获取对应的数据，这个例子中我们将差值表达式里的内容写死了，实际使用时换成vue对象中的代码即可

<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>插值表达式</title></head><body><div id="app">属性: {{name}}<hr/>数组元素: {{[1,2,3,4][1]}}<hr />对象元素: {{{username:"list",age:20}.age}}<hr />三目运算: {{1>0?"true":"false"}}<hr />四则运算: {{101*2+100/10-30}}</div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {name: "zhangsan",age: 21,school: {name: "yucai",addr: "shenzhen"}}});</script></body>
</html>

注释

1.可以获取vue对象的属性、方法
2.可以获取数组中的内容，比如，[1,2,3,4]中的第二个元素，这里为了举例将数组写死了，可以用变量表示
3.可以获得对象中的属性,
4.可以使用三目运算
5.做简单的四则运算

2.分支 v-if

逻辑与java中的if-else相同，包含v-if v-else v-else-if，这叫标签属性

所有有关vue的标签属性只能用在vue绑定过id的容器中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue分支</title></head><body><div id="app"><p v-if="weather">今天下雨</p><p v-else-if="friends">约朋友出去玩</p><p v-else>只能自娱自乐</p>            <button type="button" @click="friends=!friends">按钮</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {weather: false,friends: false,}});</script></body>
</html>

注释

1.v-if 相当于 if(){…}，v-if为true，那么显示当前标签，否则不显示，继续往下走
2.v-else-if 相当于 else if(){…}，表示否则如果为true，那么显示标签，否则不显示，继续往下走
3.v-else 相当于 else{…}，表示上面条件都不满足，那么就显示当前标签，v-else可以不加属性值直接收尾，也可以加上面的某一属性值作为其对立面收尾
4.button按钮绑定点击事件，切换了friends状态，vue分支则实时改变了显示的标签
5.MVVM的体现：这就是视图层改变了模型层的属性值，模型层属性的变化又改变了视图层标签的显示

3.分支 v-show

与 v-if 功能相似，但也不同

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue分支</title></head><body><div id="app"><p v-show="friends">我有很多朋友</p><button type="button" @click="friends=!friends">按钮</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {friends: false,}});</script></body>
</html>

注释

1.v-show和v-if在使用效果上一样，但是v-show通过修改标签CSS样式display控制显隐，v-if通过添加和删除DOM元素控制显隐，可以通过查看浏览器控制台验证
2.在频繁控制显隐的情况下，v-show的方式效率更高，推荐使用

4.循环 v-for

遍历数组

<html><head><meta charset="utf-8"><title>循环 v-for</title></head><body><div id="app"><ul>普通循环遍历数组<li v-for="a in args">{{a}}</li></ul><ul>带索引循环遍历数组<li v-for="(a,i) in args">i={{i}}, a={{a}}</li></ul></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {args: [1,2,3,4,5],}});</script></body>
</html>

注释

1.普通for循环：第一个li标签加v-for属性将其遍历，在v-for的属性值中，a表示每个元素，args对应data中的数组，
2.带索引for循环：第二个li标签中，i是循环变量，相当于数组元素下标

遍历对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>循环 v-for</title></head><body><div id="app"><ul>遍历对象<li v-for="(v,k,i) in stu">k={{k}},v={{v}},i={{i}}</li></ul></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {stu: {username:"lisa",age: 20,gender: "female"}}});</script></body>
</html>

注释

1.遍历对象：k表示当前属性的键，v表示当前属性的值，i为遍历索引

遍历对象数组

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>循环 v-for</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div id="app" style="margin-left: 40px;"><h3>遍历对象数组，嵌套循环展示</h3><ul v-for="student in students"><li v-for="(v,k,i) in student">i={{i}},v={{v}},k={{k}}</li></ul><h3>遍历对象数组，表格展示</h3><table class="table table-hover" align="center" border="1px"><tr><th>索引</th><th>姓名</th><th>年龄</th><th>性别</th><th>对象</th></tr><tr v-for="(student,i) in students"><td>{{i}}</td><td>{{student.username}}</td><td>{{student.age}}</td><td>{{student.gender}}</td><td>{{student}}</td></tr></table></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {students: [{username: "jack",age: 21,gender: "male"},{username: "rose",age: 20,gender: "female"},{username: "john",age: 27,gender: "male"},]}});</script></body>
</html>

注释

1.第一种方式，嵌套循环，先编数组再遍历对象
2.第二种方式，使用前端模板，比如，添加bootstrap的cdn实现表格展示

5.Vue属性绑定

<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="text" v-model="title" />{{title}}<hr /><a v-bind:href="link">点我</a></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {title: "hello vue",link: "http://www.baidu.com",}});</script></body>
</html>

注释

1.差值表达式可以写在html标签的内容上，但是不能作为标签的属性值也就是value="{{title}}"这样写是不对的
2.v-model可以将title绑定input的value属性值，属性修改造成title改变，进而差值表达的值也改变
3.如果想在标签的属性中使用vue对象中的属性值，可以通过v-bind作为普通标签的前缀
4.在这个a标签中，href前面加v-bind，那么此时的属性值对应的就是vue中的属性
5.v-bind:也可简写，直接写成:

6.Vue事件绑定

三步骤：设参、传参、接参

v-on

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue事件</title></head><body><div id="app"><button type="button" v-on:click="btnfn">按钮</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {},methods: {btnfn: function(){alert("hello world")}},});</script></body>
</html>

注释

1.methods中通常定义我们需要使用的方法
2.v-on:用来给button按钮绑定事件，然后是什么类型的事件(这里是click)，=右侧表示该事件对应了什么函数
3.常见的事件有，click单击，dbclick双击，

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue涉参事件</title></head><body><div id="app">sum = {{sum}}<br/>步长: <input type="text" v-model="step" /><br/><button type="button" @click="increase(step)">计数</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {sum: 0,step: 1},methods: {increase: function(step){this.sum += this.step-0;}}});</script></body>
</html>

注释

1.v-on:可以简写为@
2.methods中要想使用data中的元素，必须使用this.
3.定义好方法，以及涉及参规则，在点击事件后面指定函数，传参即可
4.这里没有将参数写死，而是在input的属性输入来中定义，利用v-model将属性与vue对象中的data中的元素对应
5.thid.step默认是字符串，-0让其参与数值运算，这样自动变成数值类型

事件修饰符

可以使用vue定义好的事件修饰符，快速达到效果

官方定义

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

意思是这两个事件处理底层使用的DOM，我们希望直接处理逻辑，所以我们底层直接定义事件处理的逻辑

.stop .prevent .capture .self .once .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue事件修饰符</title></head><body><div id="app">鼠标移动事件:<p @mousemove="mouseMove">x: {{x}}, y: {{y}}<span @mousemove.stop>鼠标移动到此即停止</span></p></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {x:0,y:0},methods: {mouseMove: function(event){this.x = event.clientX;this.y = event.clientY;}},});</script></body>
</html>

注释

1.function()中使用event表示，引入当前的事件对象，通过事件对象可以获得其相关事件属性
2.这里clientX表示当前鼠标X轴坐标，此时可实时显示XY坐标
3.mousemove.stop中的.stop就是事件修饰符，表示当前标签里面这个事件会停止

7.计算属性

是个属性，这个属性有计算能力，能够将计算结果缓存起来的属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>计算属性</title></head><body><div id="app">{{getCurrentDate()}}<hr />{{getCurrentDate1}}</div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">var v1 = new Vue({el: "#app",data: {},methods: {getCurrentDate: function(){return Date.now();}},computed: {getCurrentDate1: function(){return Date.now();}}});</script></body>
</html>

注释

1.我们将vue对象赋值给v1，方便我们在控制台通过v1调用方法
2.methods中定义的是函数，是一个动作，所以每次调用{{getCurrentDate()}}得到的时间都是实时的
3.computed中定义的是属性，是一个具有计算能力的属性
4.刷新页面我们发现初始的时间二者相同，但是在控制台，普通方法得到的时间不停变化，计算属性保持不变，因为计算属性将计算结果缓存起来了
5.调用方法时每次都要计算，会产系统开销，如果这个结果不经常变化，就可以将这个结果缓存起来，计算属性主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销
6.使用差值表达式时注意，调用普通方法有括号，计算属性不用括号(因为他是个属性)

8.Vue的组件化

什么是组件化

vue的组件化设计思想借鉴了Java的面向对象思想，即万物皆对象，在vue中万物皆组件

也就是说，在vue的项目中，以及使用了vue框架的项目中，vue的对象以组件的形式出现，能被反复使用

要想实现组件化，需要在页面中注册组件：注册组件主要两种方式，全局注册、本地注册

1.组件的全局注册

只要是被vue对象绑定的容器，都可以使用全局注册的组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>组件全局注册</title></head><body><div id="app"><model3></model3><hr/><model3></model3><hr/></div><div id="app1"><model3></model3></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">//注册组件Vue.component("model3",{template: "<div>{{title}}<button type='button' @click='btn'>点我</button></div>",data: function(){return {title: "hello java",}},methods: {btn: function(){alert("hello vue");}},});//创建vue对象绑定视图层new Vue({el: "#app",});new Vue({el: "#app1"});</script></body>
</html>

注释

注册全局组件格式Vue.component("参数名",{组件内容});
template是模板，对应了视图层，就是显示页面的各种标签，小技巧：可以现在外面通过IDE的提示写好模板，再复制到template里面，注意双引号内部使用单引号
data是模型层，提供所需数据，写法与new vue对象不同，通过function返回的方式使用数据
methods对应方法，用法相同
组件就相当于一个独立的页面，包含了视图层、模型层、方法…
创建好组件之后，必须在vue绑定的容器中使用，直接使用组件名对应的标签，而且可以复用
为什么叫全局注册，只要是被vue对象绑定的容器，都可以使用全局注册的组件
template必须有且只有一个根元素，不可以同时并列多个根元素，比如template:"<div></div><h1><h1/>"，如果有需要那就外层套一个容器，内部随意嵌套

2.组件本地注册

在vue对象里面进行注册组件，这个组件只能用在该对象绑定的容器中，不可以用在其他容器中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>组件本地注册</title></head><body><div id="app"><model3></model3></div><hr/><div id="app1"><model3></model3></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">//创建vue对象，注册本地组件new Vue({el: "#app",components: {"model3": {template: "<div>{{title}}<button type='button' @click='btn'>点我</button></div>",data: function(){return {title: "hello vue"}},methods: {btn: function(){alert("hello java");}}}}});//创建第二个vue对象测试new Vue({el: "#app1",});</script></body>
</html>

注释

本地注册组件使用components，里面可以有多个组件，每个组件以键值对的形式存在
每个组件的注册方式与全局注册相同
本地注册组件不可以用在其他容器内

3.组件的生命周期

vue中的组件也是有生命周期的。一个vue组件会经历，初始化、创建、绑定、更新、销毁等阶段，

理解

所谓钩子函数，就是组件在生命周期的不同阶段要调用的函数

钩子函数不写也会默认执行，只不过函数内部为空，我们可以根据需求写出钩子函数并添加代码，那么就会在对应的生命周期上进行里面的函数，按照生命周期顺序依次为

beforeCreate 组件创建之前调用

created 组价被创建之后调用

beforeMount 组件被视图层绑定之前调用

mounted 组件被视图层绑定之后调用

beforeUpdate 组件发生更新之前

updated 组件发生更新时调用

beforeDestroy 组件销毁之前调用

destroyed 组件销毁之后调用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>组件生命周期、钩子</title></head><body><div id="app">{{title}}<button type="button" @click="changeTitle">修改标题</button><button type="button" @click="destroyObject">销毁组件</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script><script type="text/javascript">new Vue({el: "#app",data: {title: "my vue",},methods: {changeTitle: function(){this.title = "hello vue";},destroyObject: function(){this.$destroy()}},beforeCreate() {console.log("beforeCreate");},created() {console.log("created");},beforeMount() {console.log("beforeMount");},mounted() {console.log("mounted");},beforeUpdate() {console.log("beforeUpdate");},updated() {console.log("updated");},beforeDestroy() {console.log("beforeDestroy");},destroyed() {console.log("destroyed");}});</script></body>
</html>

注释

changeTitle:function(){…}是es5的写法，created(){…}是es6的写法
$destroy()是组件自带的销毁方法，可以直接调用

9.使用Vue-Cli搭建Vue项目

什么是vue-cli

Command Line命令行工具，vue-cli就是vue命令行工具，也称之为脚手架，类似于Java SSM，使用vue-cli可以拉取，创建，运行我们需要使用的框架，比如webpack Element UI Element Adimin等，帮助我们快速拿到这些半成品

要想使用vue-cli，需要安装node.js环境，在node.js环境中使用

可以把node.js理解为前端程序运行所需的服务器

node.js安装

官网下载地址：http://nodejs.cn/download/

下载完成后，安装，一致下一步即可

在cmd命令行，输入node -v，如果出现版本信息，表示安装成功

在node.js中安装vue-cli

使用npm install vue-cli -g命令

npm：node,js命令

install：表示安装

vue-cli：需要安装的软件

-g：全局安装

如果使用默认的官方镜像下载比较慢，也可以使用淘宝镜像

先安装淘宝镜像，npm install -g cnpm --registry=https://registry.npm.taobao.org

之后将下载命令中的npm改为cnpm即可，如，

cnpm install vue-cli -g

cnpm install

cnpm run dev

使用vue-cli下载项目骨架搭建我们的项目

就像maven一样，vue为我们提供了一些官方的项目骨架，

执行vue list可以显示当前常用的主流框架

创建项目目录并打开

在指定的根目录创建项目文件目录，并进入目录

使用webpack骨架快速创建项目目录

使用vue-cli命令，在新创建的目录中下载项目骨架

vue init webpack my-project1

webpack：骨架名称

my-project1：项目名称

安装过程中如果出现以下界面，需要手动操作

出现以下界面，表示安装成功

一定要先进入到我们创建的my-project1目录中，开始安装依赖

npm install

运行项目

npm run dev

每一个独立的项目都需要npm完整的骨架，所以还需要重新在新目录安装npm

这样我们创建的项目创建完毕，并且运行在node.js提供的服务器上

使用浏览器进入页面

10.webpack项目结构

使用IDEA打开项目

整体结构

node_modules：所有下载的项目依赖都在这里

build：项目写好后需要导出生成打包文件，这些前端文件就放在这里

config：存放配置文件

src：与Java一样，存放我们开发时的文件

static：存放静态资源

index.html：首页

package.json：存放配置数据，配置文件

readme.md：介绍怎样使用webpack

src目录

assets：存放logo

components：

存放vue组件，默认有了一个hello world，

这个组件由三部分组成，template script style

之前我们在html中通过cdn引入，然后进行全局注册，局部注册，但还是比较繁琐，现在我们可以直接在项目中创建.vue组件，更加方便，组件里的内容还是一样，只不过位置有些变化

export default{...}表示暴露出当前的默认对象，这里也就是helloworld，name表示组件名称，data(){return{...}}存放数据变量，还可以继续加methods方法

style对应样式css，用来修饰页面，scoped表示当前css样式的作用域只作用域当前组件，

router目录

使用路由模块，配置路由表

App.vue

使我们的核心入口，也是个组件，

main.js

类似于Java的main函数，是入口js，

import：导入文件，相当于将我们的核心组件导入到项目中，

new Vue：创建vue对象，

el：绑定容器，

router：表示使用了路由模块，

components：

本地注册组件，这里的App是文件名字，通常我们习惯将组件名和文件保持一致，之前我们在html中注册组件，并将组件内容写在里面，现在我们在这里注册组件，组件的内容就在App文件中，这个App文件就是上面的import导入的，App文件里面也有了组件的name名字

template：对应我们使用的模板，这里的<App>就是我们使用的组件标签，只有先注册了组件，才可以在这里使用对应的模板

十一、Vue组件间的参数传递

1.如何在父组件App.vue中使用子组件

在相应的目录新建vue组件，准备div容器，IDEA安装vue插件后，可以直接右键生成，

main.js中引入文件，注册组件，

App.vue是入口组件，所以回到App.vue组件中，添加我们自己刚刚注册组件，在命令行启动我们的webpack项目，访问首页

2.父子组件之间如何传递参数

子组件中的差值表达式除了在data和methods中获取数据，也可以在props获取数据，优先级排在data和methods之后，

子组件的属性props中的数据可以从父组件中传来，先再data中注册属性，再到子组件的标签上绑定data属性和props属性

props除了可以传一个单独的属性，还可以传对象，这里我们使用了子组件自己定义的对象

去掉父组件中的属性绑定，否则父组件绑定的属性会优先展示

props的属性既可以通过父组件传递，可也以在子组件中自己定义，如果同时存在父组件传递的优先级高

3.子传父

子组件中，用props定义一个事件，类型为方法，用于接收参数(这里是hello kitty)

父组件中，将子组件标签的事件属性与父组件中的函数绑定，将子组件传递过来的参数(这里就是m)赋值到父组件的属性上

msg被赋值，又通过父传子的方式，显示在了子组件的插值表达式上

注释

父子之间要想传参数，必须借助props这个属性，以及在子组件标签上进行绑定
案例中传递流程：见第一张图
子组件事件传参，props定义传参的函数，父组件中在组件标签上将子组件方法与父组件方法绑定，父组件methods定义方法接收参数并赋值到当前data属性中，父组件data属性发生变化最终又通过父传子在子组件插值表达式上显示出来

十二、路由

1.使用场景

主组件中需要切换其他组件，比如在电商网站首页上，我们点击首页页面就会切换首页，当我们点击商品时，这个页面就会切换商品信息，这个过程就需要路由实现

通常，路由模块是一个项目不可缺少的

2.安装路由模块

1.创建项目时，拉取框架时，根据安装提示直接安装

2.如果初始没有安装，可以进入已有的项目目录中，执行命令手动创建

这里我们重新创建项目带路由模块

3.编写项目

IDEA打开my-vue-demo2，新建首页、商品列表两个组件，

在首页index.html中引入bootstrap，这样全局可以使用bootstrap样式

在主组件App.vue中，去掉div中原有的logo，添加我们自己的内容，如ul标签和li标签，用于跳转页面，这里我们不使用a标签跳转，而是使用路由跳转，添加美化样式

将首页、商品列表的组件注册到路由表中

路由表routes是一个数组，每个链接在数组中有对应的元素，

当前有一个默认的路由，/表示当前IP地址根路径下，跳转的是Helloworld组件

我们可以继续添加新的/后面的路径，对应新的跳转链接，

注意，路由表添加组件的跳转链接，还需要import导入组件的相对路径，如果有vue插件，这一步会自动生成

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '../components/Home'
import Product from '../components/Product'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/Home',component: Home},{path: '/Product',component: Product}]
})

将App.vue组将中，需要添加跳转功能的位置，套上router-link标签，同时指向路由表中的跳转地址，这样点击时就会切换到对应的子组件上了

加上<router-view/>表示此处是我们想要具体显示组件的地方

命令行进入到项目根目录，执行npm run dev，访问地址可以看到，点击导航栏，访问地址就会变化，同时显示内容变化，

但这些操作，都是在index.html页面的App.vue组件中进行切换的

注释

重点步骤：添加组件，修改路由表，在父组件中设置跳转点和显示位置，主页index.html引入css和js

4.路由的参数传递

当我们使用进行页面跳转时，可能需要携带参数到新的组件上，这就需要进行路由的参数传递

参数传递三个维度：设参、传参、接参

继续使用上面的项目my-vue-demo2

设参

在路由表index.js中，对应的路由地址后面添加参数变量，有冒号，

传参

在父组件中，直接将参数放在对应的router-link标签内，地址的后面，如，这里表示我们传参id=1

接参

在子组件内接参，使用data(){return}接参，如，this.$route.params.id

$route是当前组件的route对象，params包含了所有参数，

5.程序式路由的实现

上述这种方式，我们必须使用router-link跳转链接，使用router-view显示页面，但是这样使用有局限性

我们还可以通过js来实现js的跳转

父组件App.vue中添加一个按钮，绑定事件，methods定义函数，

注意这里使用的是router，而接参使用的是route，push表示发布到对应的路由地址上，携带参数

十三、Axios发送异步请求

vue并没有支持ajax原生的功能，因为vue是一个视图层框架，严格遵守Soc关注度分离原则，

需要添加axios框架来实现异步通信

1.安装Axios

cmd进入项目目录，执行命令npm install --save axios vue-axios

2.使用Axios

主函数入口main.js中，引入axios模块

在组件中，准备一个表单页面，

<template><div id="app"><div style="width: 50%" class="container"><div><h3>Regist</h3><h5>Email</h5><input type="text" class="form-control" v-model="mail"/><br/>{{mail}}<h5>Password</h5><input type="password" class="form-control" v-model="password"/><br/>{{password}}<h5>Gender</h5><br/><input type="radio" name="gender" v-model="gender" value="female"/>男<input type="radio" name="gender" v-model="gender" value="male">女<h5>Hobby</h5><br/><input type="checkbox" name="hobby" v-model="hobby" value="music"/>音乐<input type="checkbox" name="hobby" v-model="hobby" value="movie"/>电影<input type="checkbox" name="hobby" v-model="hobby" value="sport"/>运动<br/><br/><button type="button" class="btn btn-success" @click="registfn">注册</button></div></div></div>
</template>

vue项目部署在一个服务器上，后台java程序部署在另一个服务器上，所以前端请求后端时，涉及到了跨域，需要解决跨域问题

springmvc中可以使用cors方式解决

(未完，后续补充axios)

十四、Vue实战项目

1.新建项目

方法同上，命令行创建项目，IDEA打开，创建组件，注册路由表，测试页面跳转情况，

这里我们创建了首页、登录组件

2.Vue整合Element UI

详情参见官方文档：https://element.eleme.cn/#/zh-CN

官网有安装指令和Vue引入Element UI的详细步骤，顺便执行一下npm install将所需的依赖自动装一遍

准备好后，找我们需要的功能模板，展开复制代码，放到我们自己组件中，通常el开头的标签都是Element UI的

比如我们复制表单模板，注意复制时保留原有的element ui该有的层级结构，否则功能出不来

将组件内的根容器加class，这样可以在下方<style>对视图做更细致的样式调整

Element UI 表单也支持设置校验规则，对输入参数进行校验，需要校验的字段需要对应标签添加prop属性指定，rules加在form数组后面即可，

提交按钮事件添加表单对象ruleform作为参数，以便在函数中进一步校验提交参数，参数名随意，只要传参就是默认表单对象

十五、Vuex的应用

待续

Vue详解+实战分析相关推荐

R语言rms包生存分析之限制性立方样条(RCS, Restricted cubic spline)分析详解实战:拟合连续性自变量和事件风险之间的关系：基于survival包lung数据
R语言rms包生存分析之限制性立方样条(RCS, Restricted cubic spline)分析详解实战:拟合连续性自变量和事件风险之间的关系:基于survival包lung数据目录
mysql之explain详解（分析索引最佳使用）
mysql之explain详解(分析索引最佳使用) mysql explain用于分析sql 语句的执行及数据库索引的使用.本文将致力于帮助大家充分理解explain所返回的各项参数,从而使大家快速掌 ...
Spring Boot 单元测试详解+实战教程
转载自 Spring Boot 单元测试详解+实战教程 Spring Boot 的测试类库 Spring Boot 提供了许多实用工具和注解来帮助测试应用程序,主要包括以下两个模块. spring ...
x264 代码重点详解详细分析
eg mplayer x264 代码重点详解详细分析分类: ffmpeg 2012-02-06 09:19 4229人阅读评论(1) 收藏举报 h.264codecflv优化initializ ...
安卓通知栏管理详解及分析 NotificationListenerService
NotificationListenerService 安卓通知栏管理详解及分析一. 方法概述在api 18前可以通过辅助功能'AccessibilityEvent.TYPE_NOTIFICATI ...
JAVA中Explain注解用法,mysql之explain详解（分析索引最佳使用）
mysql之explain详解(分析索引最佳使用) mysql explain用于分析sql 语句的执行及数据库索引的使用.本文将致力于帮助大家充分理解explain所返回的各项参数,从而使大家快速掌 ...
xvid 详解代码分析编译等
1. Xvid参数详解众所周知,Mencoder以其极高的压缩速率和不错的画质赢得了很多朋友的认同! 原来用Mencoder压缩Xvid的AVI都是使用Xvid编码器的默认设置,现在我来给大家冲 ...
89.网络安全渗透测试—[常规漏洞挖掘与利用篇5]—[文件包含漏洞详解实战示例]
我认为,无论是学习安全还是从事安全的人,多多少少都有些许的情怀和使命感!!! 文章目录一.文件包含漏洞详解 1.文件包含漏洞相关概念 2.PHP文件包含漏洞相关概念 3.PHP文件包含漏洞利用:`构 ...
2023上半年软件设计师-试题详解与分析
目录前言上午题计算机组成原理信息安全计算机相关法律软件设计语言处理操作系统软件工程软件测试面向对象编程程序设计语言数据库数据结构与算法计算机网络计算机专业英语下午题 ...