数组
| 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 4
console.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方法加不加括号
<!-- 1、事件调用的方法没有参数 -->
<button @click="btn1Click()">按钮1</button><!-- btn1 -->
<button @click="btn1Click">按钮1</button><!-- btn1 -->
<!-- 2、事件定义时，写方法省略括号，但是需要传参 -->
<button @click="btn2Click(123)">按钮2</button><!-- 123 -->
<button @click="btn2Click()">按钮2</button><!-- undefined -->
<button @click="btn2Click">按钮2</button><!-- mouseevent -->
<!-- 3、事件定义时，既需要event对象有需要其他参数 -->
<button @click="btn3Click('abc',$event)">按钮3</button><!-- -->
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)//xxj
alert('father')
}
}
// vue 组件的props属性命名支持驼峰，不支持连线符- ，绑定的时候需要用-
components: {
'sons': {
template: '#son',
props: ["fName"],//父子传递数据
methods: {
sonClick() {
this.$emit('give-son','xxj')
}
}
}
}
})
let vue = new Vue({
el: '#app',
})
插槽使用
正常组件 <sons></sons>中间是不会有内容的，如果有内容就使用了插槽用法，
组件 <sons><p>中间的内容</p></sons> sons中的内容会替换template中的slot插槽内容
如果没有 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中处理逻辑后需要进行页面跳转
<router-link to='/url'></router-link>：声明式直接跳转
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')
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
