vue组件
目录
1.Vue组件的定义、注册方式和模板使用
1.1 组件的定义
定义组件
定义组件名的方式有两种
1.2 组件的分类
1.3 引用模版
2. 组件间数据的通信
2.1 父子组件
2.2 组件间数据通信
2.2.1 子组件访问父组件的数据（父传子）
2.2.2 父组件访问子组件的数据（子传父）
2.2.3 非父子通信
2.2.4 总结组件之间的通讯
2.3 单向数据流
3.过滤器
过滤器分为两种
过滤器使用地方两个位置
全局过滤器
局部过滤器
4.路由
4.1 定义
4.2 分类
4.2.1 后端路由
4.2.2 前端路由
4.3 Vue 路由
嵌套路由
5.使用axios进行ajax操作
5.1 Axios简介
5.2 Axios特点
5.3 Axios基本用法
get和post的区别
Vue中axios中箭头函数的this和function（response）函数体中的this的区别
Axios的get请求代码示例
Axios的post请求和传参方式代码示例
编辑
后端代码
1.Vue组件的定义、注册方式和模板使用
1.1 组件的定义
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码.
vue组件是把页面（html代码，CSS代码）进行模块化
如下图所示，一个页面分四个部分，每个部分是个vue组件，而页面成了vue组件的容器。
vue.js中创建组件有三个步骤：定义组件，注册组件以及使用组件
定义组件
-
方式1：先创建一个组件构造器，然后由组件构造器创建组件.如:var myCom =Vue.extend({})
-
方式2：使用Vue.component()直接创建组件。
Vue.component('组件名称,{}');{}相当于创建vue对象传入的选项参数
定义组件名的方式有两种
-
使用 kebab-case：使用 kebab-case (短横线分隔命名) 定义一个组件（kebab发音/kI'ba:b/）my-com myCom
-
使用 PascalCase：(驼峰式命名) 定义一个组件
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
1.2 组件的分类
-
全局组件
-
局部组件
通过选项components定义，但只能在当前Vue实例中使用
1.3 引用模版
将组件内容放到中引用。
注意：template组件中，有且只有一个根元素
组件定义和使用
{{message}}
{{message}}
{{message}}
{{info}}
百度
2. 组件间数据的通信
2.1 父子组件
在一个组件内部定义另一个组件，称为父子组件
子组件只能在父组件内部使用
默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的
2.2 组件间数据通信
2.2.1 子组件访问父组件的数据（父传子）
- 在调用子组件时，绑定想要获取的父组件中的数据在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据。
- 即父组件通过props向下传递数据给子组件。
- 注：组件中的数据存在方式共有三种：data、props、computed
props传递数据两种形式
- 数组方式： props:['msg', 'username', 'age', 'userObj']
- 对象方式：该方式提供了对数据的校验、类型监测、默认值设置操作。
prop命名，可以在在组件中使用postTitle（驼峰名称），在html中是使用短横线命名post-title，如下代码示例
Vue.component('blog-post', {
// 在 JavaScript 中是驼峰命名的
props: ['postTitle'],
template: '{{ postTitle }}
'
})
父组件传子组件的代码实例
子组件访问父组件的数据（父传子）
{{message}}
{{childMessage}}
父组件传入的值：{{parentMessage}}
2.2.2 父组件访问子组件的数据（子传父）
-
第一步：在子组件中使用 vm.$emit(事件名,数据) 触发一个自定义事件，事件名自定义。
-
第二步：父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据。
-
总结：子组件通过events（事件）给父组件发送消息，实际上就是子组件把自己的数据发送到父组件
父组件访问子组件的数据（子传父）
{{info}}
2.2.3 非父子通信
创建一个Vue实例作为中央事件总线，通过它来监听($on)和触发($emit)事件。适用于组件间全部通信方式。
//实例Vue实例作为中央事件总线
var Event=new Vue();
//发送事件
Event.$emit(事件名,数据);
//监听事件
Event.$on(事件名,data => {});
假设兄弟组件有三个，分别是 A、B、C 组件，C 组件如何获取 A 或者 B 组件的数据
Title
{{msg}}
{{msg}}
{{msg}}
{{name}}
{{age}}
2.2.4 总结组件之间的通讯
2.3 单向数据流
props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来，即子组件中使用的父组件数据发生变化，无法传导给父组件。而且不允许子组件直接修改父组件中的数据，会直接报错，这样更有利于组件间的解耦
解决方式：
-
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据。
-
方式2：如果子组件想修改数据并且同步更新到父组件
-
可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐使用。
-
3.过滤器
过滤数据是我们日常开发中必然会用到的。 常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。
过滤器分为两种
-
单个组件的过滤器，也叫做局部过滤器，
-
vue实例全局的过滤器，它可以被应用在任何地方。
过滤器使用地方两个位置
-
{{ message | filterA }}双括号插值内 -
{{ message }}
过滤器也可以使用多个，会依次执行
例如：{{ message | filterA |filterB }} 这个例子中会把message 的当做参数传入A过滤器进行过滤，A过滤器过滤完的数据返回值会传入B过滤器
全局过滤器
Vue.filter("过滤器名称",函数)；
全局过滤器
{{message | upperCase}}
{{message | upperCase}}
局部过滤器
定义局部的过滤器 定义格式：fliters:{过滤器名称:函数}
Title
{{msg | capitalize}}
4.路由
4.1 定义
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。
4.2 分类
4.2.1 后端路由
例如分配一个站点，服务器地址是：http://192.168.1.200:8899，在这个网站中提供了三个界面
http://192.168.1.200:8899/index.html 主页 http://192.168.1.200:8899/about/about.html 关于我们页面 http://192.168.1.200:8899/feedback.html 反馈界面
当我们在浏览器输入 http://192.168.1.200:8899/index.html 来访问界面的时候，web 服务器就会接收到这个请求，然后把 index.html 解析出来，并找到相应的 index.html 并展示出来，这就是路由的分发，路由的分发是通过路由功能来完成的
4.2.2 前端路由
1、虽然前端路由和后端路由的实现方式不一样，但是原理都有是相同的，其中一个方式，前端路由的功能都是通过 hash 「散列值」 来实现的，hash 能兼容低版本的浏览器
2、后端路由每次访问一个页面都要向浏览器发送请求，然后服务端再响应解析，在这个过程中肯定会存在延迟，但是前端路由中访问一个新的界面的时候只是浏览器的路径改变了，没有和服务端交互「所以不存在延迟」，这个对用户体验来说是大大的提高。如下所示：
http://192.168.1.200:8080/#/index.html http://192.168.1.200:8080/#/about/about.html http://192.168.1.200:8080/#/feedback.html
由于 web 服务器不会解析 # 后面的东西[所以通过 hash 能提高性能]，但是客户端的 js 可以拿到 # 后面的东西，有一个方法是 window.location.hash 来读取，使用这个方法来匹配到不同的方法上
3、举个例子
http://www.xxx.com/path/a/b/c.html?key1=Tiger&key2=Chain&key3=abc#/path/d/e.html
我们把这个地址分析一下
http：协议 www.xxx.com：域名 /path/a/b/c.html：路由，即服务器上的资源 ?key1=Tiger&key2=Chain&key3=abc：这 Get 请求的参数 #/path/d/e.html：hash 也叫散列值，也叫锚点
上面的 hash 是和浏览器交互的，其它的都是和服务器进行交互
4.3 Vue 路由
Vue 中的路由，推荐使用官方支持的 vue-router 库
Title
跳转到main
跳转到message
跳转到mine
aaaaaaaaa
{{title}}
{{title}}
{{title}}
嵌套路由
实际应用界面，通常由多层嵌套的组件组合而成，比如，我们 “首页”组件中，还嵌套着 “登录”和 “注册”组件，那么URL对应就是/home/login和/home/register
嵌套路由
home
news
{{title}}
登录
注册
{{title}}
{{title}}
{{title}}
5.使用axios进行ajax操作
5.1 Axios简介
vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。
参考：GitHub上搜索axios，查看API文档 GitHub - axios/axios: Promise based HTTP client for the browser and node.js
5.2 Axios特点
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质上也是对原生XHR（XmlHttpRequest）的封装,只不过它是Promise 的实现版本，符合新的ES规范,有如下特点：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
5.3 Axios基本用法
axios({options})
axios.get(url,{options});
GET传参方式：
1.通过url传参
2.通过params选项传参
POST传参方式：
axios.post(url,data,{options});
默认情况下，axios将JavaScript对象序列化为JSON。要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。
传值方式:
1.自己拼接为键值对
2.使用transformRequest，在请求发送前将请求数据进行转换
3.如果使用模块化开发，可以使用qs模块进行转换
get和post的区别
Vue中axios中箭头函数的this和function（response）函数体中的this的区别
1、在methods下的函数this指向的是当前创建的vue实例，
2、axios与后台交互后回调函数的内部的this指向window而并非指向当前的vue实例，
3、若想拿到后台回传的数据更新data里的数据，不能在回调函数中直接使用this，要用外部函数定义的变量（如：_this）存储的this，也就是当前vue的实例。
4、使用箭头函数之后，箭头函数指向的函数内部的this已经绑定了外部的vue实例了
Axios的get请求代码示例
axios请求
{{value}}
{{student.id}}
{{student.name}}
{{student.age}}
{{student.email}}
Axios的post请求和传参方式代码示例
axios请求
{{value}}
{{student.id}}
{{student.name}}
{{student.age}}
{{student.email}}
后端代码
@WebServlet(urlPatterns = {"/student/list"})
public class StudentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String p1 = req.getParameter("p1");
String p2 = req.getParameter("p2");
System.out.println("p1=" + p1 + ",p2=" + p2);
//设置响应数据格式和编码
resp.setContentType("application/json;charset=utf-8");
//允许跨域请求（后台允许跨域请求）
resp.setHeader("Access-Control-Allow-Origin", "*");
//获取数据
List students = getStudents();
Result result = new Result(students);
//使用Gson把result对象转换json字符串
Gson gson = new Gson();
String json = gson.toJson(result);
//输出json字符串到前端
resp.getWriter().write(json);
}
/**
* 获取学生数据集合
*
* @return
*/
private List getStudents() {
List students = new ArrayList<>();
students.add(new Student(1L,"李四",20,"[email protected]"));
students.add(new Student(2L,"王五",21,"[email protected]"));
students.add(new Student(3L,"赵六",22,"[email protected]"));
students.add(new Student(4L,"钱七",23,"[email protected]"));
students.add(new Student(5L,"贵八",24,"[email protected]"));
return students;
}
}
public class Result {
List students;
public Result() {
}
public Result(List students) {
this.students = students;
}
public List getStudents() {
return students;
}
public void setStudents(List students) {
this.students = students;
}
}
public class Student {
private Long id;
private String name;
private Integer age;
private String email;
public Student() {
}
public Student(Long id, String name, Integer age, String email) {
this.id = id;
this.name = name;
this.age = age;
this.email = email;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}