Vue学习笔记——第二部分
Vue组件的定义、注册方式和模板使用
组件的定义
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码.
vue组件是把页面（html代码，CSS代码）进行模块化
如下图所示，一个页面分四个部分，每个部分是个vue组件，而页面成了vue组件的容器。
vue.js中创建组件有三个步骤：定义组件，注册组件以及使用组件
定义组件
-
方式1：先创建一组件构造器，然后由组件构造器创建组件。如：var myCom = Vue.extend({})
-
方式2：使用Vue.component()直接创建组件。
定义组件名的方式有两种：
-
使用 kebab-case：使用 kebab-case (短横线分隔命名) 定义一个组件（kebab发音/kI’ba:b/）
-
使用 PascalCase：(驼峰式命名) 定义一个组件
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
组件的分类
-
全局组件
-
局部组件
通过选项components定义，但只能在当前Vue实例中使用
引用模版
将组件内容放到中引用。
注意：template组件中，有且只有一个根元素
代码示例
全局组件和局部组件
{{message}}
{{message}}
{{message}}
{{info}}
百度
组件间数据的通信
父子组件
在一个组件内部定义另一个组件，称为父子组件
子组件只能在父组件内部使用
默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的
组件间数据通信
子组件访问父组件的数据（父传子）
-
在调用子组件时，绑定想要获取的父组件中的数据在子组件内部，使用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}}
子组件内部数据（child-message）：{{childMessage}}
子组件外部数据(props-parentMessage)：{{parentMessage}}
父组件访问子组件的数据（子传父）
- 第一步：在子组件中使用 vm.$emit(事件名,数据) 触发一个自定义事件，事件名自定义。
- 第二步：父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据。
- 总结：子组件通过events（事件）给父组件发送消息，实际上就是子组件把自己的数据发送到父组件
非父子通信
创建一个Vue实例作为中央事件总线，通过它来监听( o n ) 和 触 发 ( on)和触发( on)和触发(emit)事件。适用于组件间全部通信方式。
//实例Vue实例作为中央事件总线
var Event=new Vue();
//发送事件
Event.$emit(事件名,数据);
//监听事件
Event.$on(事件名,data => {});
假设兄弟组件有三个，分别是 A、B、C 组件，C 组件如何获取 A 或者 B 组件的数据
A组件：{{name}}
B组件：{{age}}
C组件：{{name}}，{{age}}
总结组件之间的通讯
单向数据流
props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来，即子组件中使用的父组件数据发生变化，无法传导给父组件。而且不允许子组件直接修改父组件中的数据，会直接报错，这样更有利于组件间的解耦
解决方式：
- 方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据。
- 方式2：如果子组件想修改数据并且同步更新到父组件
- 可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐使用。
过滤器
过滤数据是我们日常开发中必然会用到的。
常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。
过滤器分为两种：
- 单个组件的过滤器，也叫做局部过滤器，
- vue实例全局的过滤器，它可以被应用在任何地方。
过滤器使用地方两个位置：
{{ message | filterA }}双括号插值内{{ message }}
过滤器也可以使用多个，会依次执行：
例如：{{ message | filterA |filterB }} 这个例子中会把message 的当做参数传入A过滤器进行过滤，A过滤器过滤完的数据返回值会传入B过滤器
全局过滤器：Vue.filter(“过滤器名称”,函数)；
我是app1：{{message | upperCase}}
我是app2: {{message | upperCase}}
局部过滤器：定义局部的过滤器 定义格式：fliters:{过滤器名称:函数}
我是子组件，使用了局部过滤器{{msg|capitalize}}
路由
定义
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。
分类
后端路由
例如，分配一个站点，服务器地址是：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 并展示出来，这就是路由的分发，路由的分发是通过路由功能来完成的
前端路由
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 是和浏览器交互的，其它的都是和服务器进行交互
Vue 路由
Vue 中的路由，推荐使用官方支持的 vue-router 库
main
message
mine
{{title}}
{{title}}
{{title}}
嵌套路由
实际应用界面，通常由多层嵌套的组件组合而成，比如，我们 “首页”组件中，还嵌套着 “登录”和 “注册”组件，那么URL对应就是/home/login和/home/register
首页
新闻
{{title}}
登录
注册
{{title}}
{{title}},{{this.$route.query.id}}
{{title}},{{this.$route.params.name}}
使用axios进行ajax操作
Axios简介
vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。
参考：GitHub上搜索axios，查看API文档 https://github.com/axios/axios
Axios特点
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质上也是对原生XHR（XmlHttpRequest）的封装,只不过它是Promise 的实现版本，符合新的ES规范,有如下特点：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
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模块进行转换
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请求代码示例
{{message}}
编号
姓名
年龄
邮箱
{{student.id}}
{{student.name}}
{{student.age}}
{{student.email}}
Axios的post请求和传参方式代码示例
{{message}}
编号
姓名
年龄
邮箱
{{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<Student> 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<Student> getStudents() {
List<Student> 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<Student> students;
public Result() {
}
public Result(List<Student> students) {
this.students = students;
}
public List<Student> getStudents() {
return students;
}
public void setStudents(List<Student> 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;
}
}
ult(List students) {
this.students = students;
}
public List getStudents() {
return students;
}
public void setStudents(List students) {
this.students = students;
}
}
```java
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;
}
}