再次回顾vue
1.vue:渐进式javascript框架
2.声明式渲染=》组件系统=》客户端路由=》集中式状态管理=》项目构建
3.Vue代码运行原理分析
概述编译过程的概念（vue语法 =》原生语法）:
Vue代码=》vue框架=》原生js代码
4.v-model :指令双向数据绑定
5.v-on(缩写@） 指令用于监听DOM事件 形式如：v-on:click 缩写为 @click;
6.v-bind （缩写 :） 动态地绑定一个或多个特性、或一个组件 prop 到表达式。
7.v-bind:class，v-bind:style，样式绑定等等
5.MVVM设计思想:分而治之
-
M(model)：model模型，data中的数据
-
V(view)：视图，template模板
-
Vm(View-Model)：控制：使两者结合在一起
第二部分：vue特性： -
表单操作
-
自定义指令
-
计算属性
-
过滤器
-
侦听器
-
生命周期
第三部分：vue组件化开发
组件化规范：web components
- 我们希望尽可能多的重用代码
- 自定义组件化方式不太容易
- 多次使用组件可能导致冲突
1.组件内部通过props接收传递过来的值
Vue.component('menu-item',{
prop:['title'],
template:'{{title}}'
})
2.父组件通过属性讲值传递给子组件
<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>
3.子组件通过自定义事件向父组件传递信息
<button v-on:click="$emit("enlarge-text)">扩大字体</button>
4.父组件监听子组件的事件
<menu-item v-on:enlarge-text="fontSize += 0.1"></menu-item>
5.
6.组件插槽：
自己理解：组件模板定义了插槽，当使用组件时，组件内部就有个插槽属性，之后会渲染到页面。1.script下组件=》template中=》页面渲染。
- 父组件向子组件传递内容（主要指模板内容），之前都是从数据高度分析。
插槽位置
Vue.component('alert-box',{
template:`
<div>
<strong>error</strong>
<slot></slot>
</div>
`
})
插槽内容
<alert-box>something</alert-box>
7.具名插槽：
- 插槽定义
Vue.component('base-layout', {
template: `
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`
});
- 插槽内容
<base-layout>
<h1 slot="header">
标题内容
</h1>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot="footer">底部内容</p>
</base-layout>
8.具名插槽升级：把名字放在template当中，template只是起包裹作用
<base-layout>
<template slot='header'>
<p>标题信息1</p>
<p>标题信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template slot='footer'>
<p>底部信息信息1</p>
<p>底部信息信息2</p>
</template>
</base-layout>
8.作用域插槽：书写插槽内容时可以获取到插槽作用域的值。
还未完全理解：我晕
前端交互：
-
原生ajax
-
基于jQuery的ajax
-
fetch
-
axios
2.HTTP：请求方式 -
get 查询
-
post 添加
-
put 修改
-
delete 删除
3.promise ：
promise是异步编程的一种解决方案，从语法上讲，promise是一个对象，从它可以获取到异步操作的消息。
使用promise主要有以下好处：
1.可以避免多层异步调用嵌套问题（回调地狱）
2.promise对象提供简洁的api，使得控制异步操作更加容易
promsie:基本用法：
1.实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务
2.resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。
var p = new Promise (function (resolve,reject) {
//成功时调用resolve()
//失败时调用 reject()
})
p.then(function (ret) {
//从resolve得到正确信息
},function (ret) {
//从reject得到错误信息
})
基于promise处理ajax请求
发送多次ajax请求：
queryData()
.then(function (data) {
return queryData();
})
.then(function (data) {
return queryData();
})
.then(function (data) {
return queryData();
})
接口调用 -axios 用法
axios：是一个基于promise用于浏览器和node.js的http客户端
具有以下特征：
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON 数据
axios的响应结果
- data：实际响应回来的数据
- headers：响应头信息
- status：响应状态码
- statusText:响应状态的信息
axios的全局配置
axios.defaults.timeout = 3333 ; //超时时间
axios.defaults.baseURL = 'http://////' //默认地址
axios.defaults.['mytoken'] ='***' //设置请求头
接口调用：async/await用法
async function queryData(id) {
const ret = await axios.get('/data');
return ret ;
}
queryData.then(ret=>{
console.log(ret)
})
- async/await是es7引入的新语法，可以方便的进行异步操做
- async关键字用于函数上（async函数的返回值是promise实例对象）
- await关键字用于async函数当中（await可以得到异步的结果）
vue路由
第二次总结vue，记录。