数组
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
|---|---|
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
数组方法一
-
push()：可以向数组的末尾添加一个或多个元素，返回值：数组的新长度
var arr = ['孙悟空', '猪八戒', '沙悟净']; var res1 = arr.push('唐僧', '白龙马') console.log(res)//5 console.log(arr)//["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马"]var res2 = arr.pop() console.log(res2)//白龙马 console.log(arr)//["孙悟空", "猪八戒", "沙和尚", "唐僧"]var res3 = arr.unshift('观音菩萨') console.log(res)//5 console.log(arr)//["观音菩萨","孙悟空", "猪八戒", "沙和尚", "唐僧"]var res4 = arr.unshift() console.log(res)//观音菩萨 console.log(arr)//["孙悟空", "猪八戒", "沙和尚", "唐僧"] -
pop()：删除最后一个元素，返回值：被删除的元素
-
unshift()：向数组开头添加元素，返回值：数组新长度
-
shift()：删除第一个元素，返回值：被删除的元素
数组方法二
-
slice(a,b) 提取指定元素，返回值：提取到的元素,不改变元数组
参数：a截取开始的位置的索引，包含开始索引
b截取结束的位置索引，不包含结束索引
索引可以传递一个负值，如果传递一个负值，则从后往前计算
-1是倒数第一个，-2是倒数第二个
//方法一 var arr = ["孙悟空","猪八戒","沙格尚","白龙马","唐僧"] var res1 = arr.slice(0,2) console.log(res)//"孙悟空" "猪八戒" console.log(arr)//"孙悟空","猪八戒","沙格尚","白龙马","唐僧" //方法二 var res2 = arr.splice(1,1) consoloe.log(res2)//猪八戒 console.log(arr)"孙悟空","沙格尚","白龙马","唐僧"var res3 = arr.splice(1,1,"替换") console.log(res3)//沙格尚 console.log(arr)"孙悟空","替换","白龙马","唐僧"var res4 = arr.splice(1,0,"插入") console.log(res3)//[] 空 console.log(arr)"孙悟空","插入","替换","白龙马","唐僧" -
splice(a,b,c)：返回值：删除的内容，可删除—可替换—可插入，会影响原数组
a：表示开始位置的索引 包含 索引都是从0开始
b：表示删除个数
c：插入的内容，可替换-可插入
遍历-forEach
由我们创建但是不由我们调用，我们称为回调函数。数组中有几个元素，函数就会执行几次，每次执行，浏览器会将遍历到的元素，以形参的形式传递进来，我们可以来定义实参，来读取这些内容。
浏览器会在回调函数中传递三个参数：
第一个参数value：就是当前正在遍历的元素
第二个参数index：就是当前正在遍历的元素的索引(即数字0开始)
第三个参数obj：就是当前正在遍历的数组
var arr = ["孙悟空","猪八戒","沙格尚","白龙马","唐僧"];
arr.forEach(function(value,index,obj) {console.log(value)//孙悟空 猪八戒 沙格尚 白龙马 唐僧 --遍历一次console.log(index)//0 1 2 3 4console.log(obj)//遍历5次数组
})
字符串方法
| indexOf() | 检索字符串。 |
|---|---|
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| match() | 找到一个或多个正则表达式的匹配。 |
| replace() | 替换与正则表达式匹配的子串。 |
| search() | 检索与正则表达式相匹配的值。 |
字符串填充
- str.padStart(length,string)：使用指定字符串填充到目标字符串前面，达到目标长度
- str.padEnd(length,string)：使用指定字符串填充到目标字符串后面，达到目标长度
VUE命名规范
计算属性computed 需要return 不需要() methods括号可要可不要
组件名
组件名每个单词首字母大写(MyComponent)，或者小写用 - 连接(my-component)，在DOM中使用的时候，全改为小写，单词之间用 - 连接
<my-component></my-component>
<script>Vue.component('myComponent',{})
</script>
props
声明prop的时候，使用驼峰命名(myProps)，模板中使用的时候，用 - 连接 (my-props)
<my-component :my-name="name"></my-component>
<script>props: ['myName','myAge']
</script>
methods方法加不加括号
<button @click="btn1Click()">按钮1button><button @click="btn1Click">按钮1button><button @click="btn2Click(123)">按钮2button><button @click="btn2Click()">按钮2button><button @click="btn2Click">按钮2button><button @click="btn3Click('abc',$event)">按钮3button>
methods: {btn1Click() {console.log("btn1");},btn2Click(event) {console.log("btn2", event);},btn3Click(abc, event) {console.log("btn3", abc, event);}}
自定义事件$emit
用 - 连接
<my-component @my-event="fun"></my-component>
<script>this.$emit('my-event')
</script>
父子传递数据 、父子传递方法、子父传递数据
<div id="app"><father></father>
</div>
<template id="fat"><div><button @click="fat">按钮father</button><!--父子传递方法与数据--><sons @give-son="fat" :f-name="name"></sons></div>
</template >
<template id="son"><div><button @click="son">按钮son</button></div>
</template>
Vue.component('fathers', {template: '#father',data: function () {return {name: 'ysc',age: 18}},methods: {fat(data) {alert(data)//xxjalert('father')}} // vue 组件的props属性命名支持驼峰，不支持连线符- ，绑定的时候需要用-components: {'sons': {template: '#son',props: ["fName"],//父子传递数据methods: {sonClick() {this.$emit('give-son','xxj')}}}}})let vue = new Vue({el: '#app',})
插槽使用
正常组件
组件 中间的内容
如果没有 slot=“name”，那就是匿名插槽，都可以替换，如果是具名插槽，那就要具名的替换，其他不动
运行的过程就是： 首先template->info中的中的内容 去替换给 template->son 中的slot，
然后，template->son中的div整个去代替,最后template->info中的div整个去代替 app->
template下面一定要有一个大的div
<div id="app"><far></far>
</div>
<template id="info"><div><!--father组件中 sons中的所有都会替换到 slot中 子slot会写到父template中 --><sons><p>我是插入内容</p><!-- 只会寻找普通的slot --><p slot="name1">我是插入内容1</p><!-- 会寻找name1的slot --><p slot="name2">我是插入内容2</p><!-- 会寻找name2的slot --></sons></div>
</template>
<template id="son"><div><p>我是子</p><slot name="name1"></slot><slot name="name2"></slot></div>
</template>
作用域插槽 -将子组件的数据让父组件拿到
父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译
作用域插槽用处场景：子组件提供数据，父组件决定如何渲染
子组件暴露数据：v-bind :自定义1=“子组件数据名”
父组件接收数据：slot-scope slot-scope=“自定义2”
作用域插槽改变状态
//作用域插槽
<template slot-scope="scope">// slot-scope接收数据{{scope.row}}//代表该行的内容数据对象，里面有很多值<el-switch v-model="scope.row.mg_state"></el-switch>
</template>
使用： 自定义2.自定义1，即可获取
<div id="app"><fat><template slot-scope="item">{{item.age}}//ages数组<li v-for="(value,index) in item.age">{{value}}--{{index}}</li></template></fat></div><template id="father"><div><slot :age="ages"></slot></div></template><script>let vue = new Vue({el: '#app',data: {},components: {'fat': {template: '#father',data: function () {return {name: 'ysc',ages: [18, 23, 43, 546, 76, 34]}}}}})
v-slot作用域插槽：用v-slot替代 slot跟slot-scope
v-slot的简写：# v-slot需要在template中使用
<template id="father"><div><sons><template #ages="ages"><li v-for="(item,index) in ages.age">{{item}}---{{index}}</li><template></sons></div>
</template>
过滤器使用
{{name | id}} 前者：vue数据中将要过滤的数据，后者：过滤器名称
注意：只能在插值语法和v-bind中使用，过滤器可以连续使用
全局注册过滤器：
<div id='app'>{{name | formart}}</div>
Vue.filter('formart',function(value){value = value.replace(/学院/g,'大学')return value//一定要return
})
let vue = new Vue({el:'#app',data:{name:'新余学院'}
})
局部注册过滤器：
<div id='app'>{{name | formart}}</div>
let vue = new Vue({el:'#app',data:{name:'新余学院'},filters:{"formart": function(value) {value = value.replace(/学院/g,'大学')return value}}
})
时间过滤器
<!-- 需要使用一个template插槽，用slot-scope接收数据 --><template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>
Vue.filter('formart', function(value,fm) {let date = new Date(value)let year = date.getFullYear()let month = date.getMonth()+1+''let day = date.getDate()+''let hour = date.getHours()+''let minute = date.getMinutes()+''let second = date.getSeconds()+''//padStart接收字符串的方法，2位数字，不足在前面补0 月份需要加1，从0开始的return `${year}--${month.padStart(2,'0')}--${day.padStart(2,'0')} ${hour.padStart(2,'0')}:${minute.padStart(2,'0')}:${second.padStart(2,'0')}}`
})
同步与异步
同步：在主线程上排队执行任务，只有前一个任务执行完成，才会进入下一个任务
异步：所有同步任务都在主线程上执行，形成一个执行栈，主线程之外还有一个任务 队列，只要异步任务有结果，就会放置在任务队列中，一旦执行栈中的所有同步任务执行完成，就会去任务队列中读取，那些任务队列就会结束等待状态，进入执行栈，开始执行
任务队列：是一个先进先出的数据结构，当执行栈的任务执行完，就会去任务队列中读取第一位的事件，让他进入执行栈，还有定时器，某些事件只有规定的时间才能返回主线程
回调函数：会被主线程挂起来的代码，异步任务必须指定回调函数，因为当主线程开始执行异步任务的时候，就是执行的回调函数
sessionStorage
sessionStorage里面的数据在页面会话结束时会被清除
localStorage里面的数据没有过期时间设置
//保存数据到sessionStorage key：键 vlaue：值
sessionStorage.setItem('key', value)
window.sessionStorage.setItem('token',res.data.token)
//从sessionStorage获取数据
let data = sessionStorage.getItem('key')
//删除保存的数据
sessionStorage.removeItem('key')
//sessionStorage 删除所有保存数据
sessionStorage.clear()
路由嵌套
//嵌套路由不要写一级路由。也不要写/
const routes = [{path:'/',redirect:'/two'},{path: '/one',component:one,children:[{path:'oneson1',component:oneson1},{path:'oneson2',component:oneson2}]}{path: '/two',component:two}
]
编程式导航
声明式导航直接渲染到页面
编程式导航用于在js中处理逻辑后需要进行页面跳转
this.$router.push('/url')：编程式导航都起跳转的作用，比如我们判断用户名和密码正确时，需要跳转到用户中心，都用到编程式导航
路由导航守卫–router.js
路由导航守卫控制访问权限，如果用户没有登录，但直接通过url访问页面，需要重新导航到登录页面
router.beforeEach((to, form, next)=>{//to 将要访问，from从哪里跳转来，next一个函数，表示放行if(to.path==='/login') return next()const tokenStr = window.sessionStorage.getItem('token')if(!tokenStr) return next('/login')//不存在token，强制跳转登录页面next()//存在token，放行
})
axios请求拦截器–main.js
通过axios请求拦截器添加token，保证拥有获取数据的权限
//axios请求拦截
axios.interceptors.request.use(config=>{//为请求头对象，添加Token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')return config//一定要
})//axios响应拦截器
axios.interceptors.response.use(config=>{//在接收响应做些什么，例如跳转登录页面return config
})//移除拦截器
var myInterceptor = axios.interceptors.request.use(config=>{})
axios.interceptors.request.eject(myInterceptor)
退出登录
只要清空token就可以退出，清空token跳转login页面
//清空token
window.sessionStorage.clear()
//跳转到登录页
this.$router.push('/login')
