2021SC@SDUSC
智能研究中心快递柜学习笔记7
computed和methods
computed:一旦data中的数据发生变化,就会触发计算属性的方法，会将data中属性的结果进行缓存，对比缓存中的结果是否发生变化
methods: 一调用就会触发, 和数据的变化与否无关
methods: {
fn() {
// 返回一个值
console.log('fn');
return new Date();
}
},
computed: {
comFn() {
// 计算属性，如果data中的数据变化，会重新执行，
console.log('计算属性');
return new Date();
}
}
Vue中的网络请求
在Vue.js中发送网络请求本质还是ajax，可以使用插件方便操作。
axios :不是vue的插件，可以在任何地方使用，推荐
局部组件/全局组件：自拟template，随意调用
组件注意事项
组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串
<div id="app">
<!-- 组件可以重复使用多次
因为data中返回的是一个对象所以每个组件中的数据是私有的
即每个实例可以维护一份被返回对象的独立的拷贝
-->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<!-- 必须使用短横线的方式使用组件 -->
<hello-world></hello-world>
</div>
<script type="text/javascript">
<!-- 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
但是在普通的标签模板中，必须使用短横线的方式使用组件-->
Vue.component('HelloWorld', {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '<div>{{msg}}</div>'
});
Vue.component('button-counter', {
<!-- 组件参数的data值必须是函数
同时这个函数要求返回一个对象 -->
data: function(){
return {
count: 0
}
},
<!-- 组件模板必须是单个根元素
组件模板的内容可以是模板字符串 -->
template: `
<div>
<button @click="handle">点击了{{count}}次</button>
<button>测试123</button>
# 6 在字符串模板中可以使用驼峰的方式使用组件
<HelloWorld></HelloWorld>
</div>
,
methods: {
handle: function(){
this.count += 2;
}
}
})
局部注册
只能在当前注册它的vue实例中使用
<div id="app">
<my-component></my-component>
</div>
<script>
// 定义组件的模板
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
//局部注册组件
components: {
// <my-component> 将只在父模板可用 一定要在实例上注册了才能在html文件中使用
'my-component': Child
}
})
</script>
ElementUi 布局组件
<el-container>：外层容器。当子元素中包含
<el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
将一个请求分组
@param getPromise传入一个可以获取到Promise对象的方法
@param groupId分组ID，如果不传或者为空则不分组
@param expire过期时间，默认半分钟
export function httpGroupRequest(getPromise, groupId, expire = 1000 * 30) {
if (groupId == null || groupId === '') {
console.log("--------popup----------getFrom DB-------with---no--groupId ")
return getPromise()
}
if (Vue.ls.get(groupId)) {
console.log("---------popup--------getFrom Cache--------groupId = " + groupId)
return Promise.resolve(Vue.ls.get(groupId));
} else {
console.log("--------popup----------getFrom DB---------groupId = " + groupId)
}
// 还没有发出请求，就发出第一次的请求
return getPromise().then(res => {
Vue.ls.set(groupId, res, expire);
return Promise.resolve(res);
})
}
第三方登录原理
第三方登录，就是利用用户在第三方平台上已有的账号来快速完成自己应用的登录或者注册的功能。第三方登录主要省略了很多注册流程，这对于用户而言体验更加顺畅，通过这技术可以获得大量用户，用户一般也不愿意注册过多的账号，通常习惯于将多个平台的账号密码设置成相同的方便记忆。
OAuth 就是一种授权机制，数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。
底层协议：OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此OAUTH是安全的。
/**
* 第三方登录
* @param token
* @returns {*}
*/
export function thirdLogin(token) {
return axios({
url: `/thirdLogin/getLoginUser/${token}`,
method: 'get',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
}
vue学习
使用步骤：
1. body 中,设置 Vue 管理的视图
2. 引入 vue.js
3. 实例化 Vue 对象 new Vue();
4. 设置 Vue 实例的选项:如 el、data...
5. 在<div id='app'></div>中通过{{ }}使用 data 中的数据
el
作用:当前 Vue 实例所管理的 html 视图，值:通常是 id 选择器(或者是一个 HTMLElement 实例)，不要让 el 所管理的视图是 html 或者 body
data
Vue 实例的数据对象，是响应式数据(数据驱动视图)，可以通过 vm.$data 访问原始数据对象
Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a，视图中绑定的数据必须显式的初始化到 data 中
methods
其值为可以一个对象，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是undefined
插值表达式{{}}
作用:会将绑定的数据实时的显示出来，通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
Vue 常用指令
v-text:更新标签中的内容
v-text 和插值表达式的区别
v-text 更新整个标签中的内容
插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
可以渲染内容中的 HTML 标签，注意:尽量避免使用，容易造成危险 (XSS 跨站脚本攻击)
v-if 和 v-show
作用:根据表达式的 bool 值进行判断是否渲染该元素
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-on
作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
语法: @事件名.修饰符 = “methods 中的方法名”
v-for
根据一组数组或对象的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组 /对象，当要渲染相似的标签结构时用 v-for
v-bind
作用: 可以绑定标签上的任何属性绑定 src 和 id 属性
v-model
作用: 表单元素的绑定
特点: 双向数据绑定
数据发生变化可以更新到界面，通过界面可以更改数据，v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data 选项中声明初始值
v-cloak
问题:在使用 vue 绑定数据的时候，渲染页面有时会出现变量闪烁
v-once
解决的问题:只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子
节点，都会当作静态内容并跳过，这可以用于优化更新性能。
6019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
