my vue study

表单域修饰符::::
number : 转化为数值
trim:去掉开始和结尾的空格
lazy:将input事件切换为change事件(v-model默认使用的是input事件,使用lazy可以改为使用change事件)

计算属性与方法的区别:
计算属性是基于它们的依赖进行缓存的
方法不存在缓存

mounted钩子函数:::这个函数一旦被触发, 代表初始化完成, 初始化完成代表页面中模板的内容已经存在了

数组中查询元素的索引::: books.findIndex(function(item){
return …
})

组件注册注意事项:::如果使用驼峰式命名组件 , 那么在使用组件的时候 , 只能在字符串模板中用驼峰的方式使用组件 , 但是在普通的标签模板中 , 必须使用短横线的方式使用组件

props属性名规则:::
…在props中使用驼峰形式 , 模板中需要使用短横线的形式
…字符串形式的模板中没有这个限制
…传递Number和Boolean类型的数据时, 使用v-bind绑定之后, 子组件可以拿到对应类型的数据;
如果没有使用v-bind绑定 , 子组件拿到的数据都是string类型
props传递数据原则:::单向数据流 . 只允许父组件向子组件中传递数据 , 不允许子组件直接操作props中的数据

子组件向父组件传值::::
1.子组件通过自定义事件向父组件传递信息
扩大字体
2. 父组件监听子组件的事件:::::

$event 接受子组件传递过来的参数

非父子组件间传值
1.单独的事件中心管理组件间的通信
var hub = new Vue();
2.监听事件与销毁事件
hub.$on{(}^{\prime }事件{名}^{\prime },参数)hub.$off(’ 销毁事件 ‘)
3.触发事件
hub . $emit(’ 事件名 ', 参数)

根据对象的id属性查询出对象在数组中的索引:::
var index = this.list.findIndex(item => {
return item.id == id;
})

接口调用方式::
1.原生ajax
2.基于Jquery的ajax
3.fetch
4.第三方库::axios

Promise是异步编程的一种解决方案 , 从语法上讲 , Promise是一个对象, 从它可以获取异步操作的消息 Promise是一个函数

var p = new Promise(function(resolve , reject){
//成功时调用 resolve()
//失败时调用 reject()
});
p.then(function(ret){
//从resolve得到正常结果
console.log(ret);
},function(ret){
//从reject得到错误信息
console.log(ret);
})

Promise常用的API::
Promise.all() 并发处理多个异步任务 , 所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务 , 只要有一个任务完成就能得到结果
Promise.all([ p1 , p2 , p3 ]) .then( result => {
console . log ( result )
})
Promise.race ([ p1 , p2 , p3 ]) .then( result => {
console . log ( result )
})

调用后台接口:::
fetch(url).then(function(data){
return data.text(); //text()方法属于fetch API的一部分, 返回Promise对象
}).then(function(data){
console.log(data):
})

前端路由:::根据不同的用户事件 , 显示不同的页面内容
前端路由负责事件监听,触发事件后通过事件函数渲染不同内容

通过注入路由器 , 可以在任何组件内通过this.$router访问路由器,也可以通过this.$route访问当前路由

ES6模块化规范中定义::::
1 . 每个js文件都是一个独立的模块;
2. 导入模块成员使用 import 关键字
3 . 暴露模块成员使用 export 关键字

当存在跨域问题时:使用token
不存在跨域问题时,使用cookie和session
登录-----token原理分析::::::
登录页面输入用户名和密码进行登录 , 服务器验证通过之后生成该用户的token并返回 , 然后客户端存储该token , 后续所有的请求都携带该token发送请求 , 服务器端验证token是否通过

git checkout -b login 创建login分支, 并切换到login分支

Vue中的全局变量是通过Vue.prototype实现的
定义全局axios:::
import axios from ‘axios’
Vue.prototype.$http = axios

路由导航守卫控制访问权限::::
如果用户没有登录 , 但是直接通过URL访问特定页面 , 需要重新导航到登录页面
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === ‘/login’) return next()
const token = window.sessionStorage.getItem(‘token’)
if (!token) {
return next(’/login’)
}
next()
})

git上传远程仓库中没有的分支:::: git push -u origin login

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
使用axios请求拦截
// 设置请求拦截器
axios.interceptors.request.use(config => {
// 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
config.headers.Authorization = window.sessionStorage.getItem(‘token’)
return config
})

v-for循环时 :index=""中间绑定的是字符串