笔记
V-ON绑定事件 V-BIND绑定属性
Network中可以查看当前发起的请求
XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中
XHR类型即通过XMLHttpRequest方法发送的请求即AJAX请求
外部JS引入当前Vue实例 函数中传this指向就好了
forEach没有返回值要有返回值的话用map
git checkout -b dev origin/dev 建立分支并且从远程拉取
APP的组件生命周期与小程序有出入
scroll view 有滑动时间并把scrollTop返回给scroll view 滑动会有抖动
页面滑动最好用
Console.log() 一个对象 浏览器显示出来的是最后结果 如果其中属性是有异步函数返回的，你将读不到那个属性
CCS3 中的Calc()函数
await等的是Promise对象
通过data-xx 绑定一个值 可以通过event获取
z-index只有在设置了position为relative,absolute,fixed时才会有效。
z-index的“从父原则”。设置了z-index的元素要在相同的根元素下菜有效
微信小程序的Console.log()可以字符串加数据也会显示对象
如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间
小程序 组件CSS优先 APP 页面CSS优先
transition 触发条件是当属性变化的时候触发
闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作 用域的变量的函数)
src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。
hasOwnProperty(property)
判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty(“name”)）
IsPrototypeOf(object)
判断该对象是否为另一个对象的原型。
//重写setData使uniapp支持setData写法
import Mixin from “./common/mixins.js”;
Vue.mixin(Mixin);
Nodejs用require 和 export.moudle 其他用Import 和export
require 是赋值过程并且是运行时才执行，
import 是解构过程并且是编译时执行。
require可以理解为一个全局方法，就意味着可以在任何地方执行。
而import必须写在文件的顶部。
require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，
而import只需要依据import中的接口在编译时引入指定模块所以性能稍高
子传父通过自定义事件，emit 触发自定义事件传值，再通过自定义事件绑定一个函数进行取值
parseInt(‘01’);
var obj = {
};
function searchResult(){
clearTimeOut(obj.g);
obj.g = setTimeout(function(){
//这里发送请求
},1000)
}
var pre = new Date();
function trol(fn,delay){
return function () {
var now = new Date();
if(now-pre >= delay){
fn();
pre = new Date();
}
}
在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 32) {
return value.slice(0,32) + '...'
}
return value
}
}
//enum 枚举
enum Gender {
Male = 0,
Female = 1,
}
let i: {
name: string, gender: Gender }
i = {
name: '孙悟空', gender: Gender.Male//0
}
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
1 rpx = 屏幕宽度/750 px
给元素设置catchtouchmove=“notmove” notmove为空的返回函数就可以阻止滚动，只有真机测试的时候才有反应，鼠标滚动仍可以滚动，uniapp没有catchtouchmove,可用@touchmove.stop.prevent代替
当tap或者click时，点击后事件默认是冒泡,当你添加.stop的时候当事件触发对应的stop后不再传播
position:fixed会在ScollView失效，Canvas也不能用position:fixed
相当于Vuex里的computed属性
getters: {
// Getter 接受 state 作为其第一个参数
weekDate: state => {
return moment(state.date).format('dddd');
}
}
不但如此，Getter 还会将 store.getters 对象暴露出去，你可以以属性的形式访问这些值：
console.log(store.getters.weekDate)
我们可以很容易地在任何组件中使用它：
computed: {
weekDate () {
return this.$store.getters.weekDate
}
}
因为Data是函数的话他可以有return然后返回一个对象,而每个对象都是独立的作用域的,相同类型的组件的data就可以区分开来
components:{
List:()=> import(’./List’)
}
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: ‘/login’, component: () => import(’@/views/login/index.vue’) },
{ path: ‘/home’, component: () => import(’@/views/home/home.vue’) }
]
export default router
1、props 和 e m i t 。 父 组 件 向 子 组 件 传 递 数 据 是 通 过 p r o p s 传 递 的 ， 子 组 件 传 递 给 父 组 件 是 通 过 emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过 emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过emit触发事件来做到的。
2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。
3、$attrs 和 l i s t e n e r s A − > B − > C 。 V u e 2.4 开 始 提 供 了 listeners A -> B -> C。Vue2.4开始提供了 listenersA−>B−>C。Vue2.4开始提供了attrs和$listeners来解决这个问题。
4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）
5、$refs 获取组件实例。
6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。
7、vuex 状态管理。
三者公共点都是隐藏。不同点：
Vue中methods声明方式与函数的声明方式
methods:{
*// 在此时定义方法，方法之间使用逗号分隔*
方法名:function(){
}
});
函数声明方式
声明 : function first（）{
}；
调用：first（）
函数表达式声明方式
声明: var second=function（）{
}；
调用：second（）
好像不需要事先设置生命周期
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
回到顶部函数
uni.pageScrollTo({
scrollTop: 0, duration: 300
});
组件引用的JS是相对于组件的位置
通常单独使用left、right、top、bottom均无效，需要在使用绝对定位CSS position样式才能生效。
一般left和right在一个样式是只能使用其一，不能left和right都设置，要么使用left就不使用right，要么使用right就不使用left，如果left和right均使用将会出现兼容问题，一个对象设置了靠左left多少距离，自然右边距离自然就有了所以无需设置左边。
相同道理，top和bottom对一个对象只能使用其一，不然会出现逻辑兼容问题。譬如一个人让你往左走，一个人让你往右走，同时发出往左往右走这个时候你也不好判断往那边走。
在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:
<body>
<div id="app">
<component :is="who"></component>
<button @click="changeComponent">changeComponent</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let componentA={
template:`<div>I am componentA</div>`
}
let componentB={
template:`<div>I am componentB</div>`
}
let componentC={
template:`<div>I am componentC</div>`
}
let app = new Vue({
el: '#app',
data:{
who:'componentB'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods: {
changeComponent(){
if(this.who=="componentA"){
this.who="componentB"
}
else if(this.who=="componentB"){
this.who="componentC"
}else{
this