js基础
运算符
// 与运算符（&&）
//前面条件满足的话就运行后面
// if(timer){
// clearTimeout(timer)
// }===timer&&clearTimeout(timer)
//或运算符（||）
// window.isNotNum = function(num) {
//前面条件不满足再运行后面！！
//判断类型，如果""与null就直接返回
// return num === "" || num == null || isNaN(num);
// };
function cc(){
return true&&true&&3//3
}
function dd(){
//第一个正确就返回第一个
// return true||true||33//true
return false||false||33
}
类型判断和call
- 最准确的方法：Object.prototype.toString.call(arg)
- 为什么要用这个，因为Object.toString会根据不同的类型[object, [[class]]]的字符串， 其中class是根据不同的类型返回不同的类型，从而做出类型判断
- 因为在数组和str等的toString方法被修改过，所以我们只能调用最原始的Object.prototype.toString.call(arg)
- 然后call的话就是代表arg.toString(最原始的方法)
- 链接：blog.csdn.net/weixin_3080…
- []和{}不等于null
findIndex的源码
//简化版findIndex源码
if(!Array.prototype.findIndex){
Array.prototype.findIndex=function(fn){
//检测是否传入了回调函数
if(typeof fn === 'function'){
//this.代表调用这个方法的数组的长度
for(var i=0;i<this.length;i++){
//如果回调函数返回的是true
//说明找到了再数组中找到就返回index
if(fn(arr[i])){
return i
}
}
return -1
}
}
}
var arr=[1,2,3,99]
//(item)=>{return item>4}
console.log(arr.findIndex((item)=>item>4));
forEach的简化源码
- var遍历传入的
- forEach使用的时候，传入一个回调函数，回调函数接受3个参数，分别是item,index,arr
Array.prototype.forEach=function(fn){
if(typeof fn ==='function'){
for(var i=0;i<this.length;i++){
fn(this[i],i,this)
}
}
}
var arr=[4,5778,66]
arr.forEach((item,index,arr)=>{
console.log(item);
console.log(index);
console.log(arr);
})
substr（）
- substr(start,length)
- substr（1）：代表从第二个开始截取到最后
- substr(0,1):第一个开始取，长度为1
- substr(-1):从倒数开始取
箭头函数的坑
- 少了一个括号，返回的结果就会不同
- 有括号默认return undefined
- 没有括号，会根据表达式的结果进行判断
fn1=(item)=>{
item>1
}
console.log(fn1(4));//因为加了括号，return默认为undefined
fn2=(item)=>item>1
console.log(fn2(4));//不加括号，代表return item>1
vue
- css文件引入不支持别名
element-vue的引入
- main.js引入：
// import {Button, Form, FormItem, Input, Select, Option,Table,TableColumn,Dialog} from "element-ui"
// Vue.use(Button)
// Vue.use(Form)
- 单独的js文件引入，结构更加清晰
!
import Vue from "vue"
import {Button} from "element-ui"
Vue.use(Button)
-也要在main.js做最后的引用，而且element如果下面是index.js文件的话，可以省略不写
//element-ui引入
import './element'
全局css的引入
- 在App组件下面引入，注意这个时候不能用@/，会报错！
/* css样式 */
@import './static/css/base.css';
二维码的插件（vue-qr）
链接：www.cnblogs.com/belongs-to-…
slice解决v-for显示（数组的方法来解决）
//v-for的显示：解决显示几个用slice
arr = [1, 2, 3, 4, 5, 6]
//包左不包右
console.log(arr.slice(0, 4));//1,2,3,4
//要取最后两个，这样写
console.log(arr.slice(4, 6) == arr.slice(-2));//5,6
vue打开页面是新页面
- 用router-link来实现
// <router-link
// tag="a"
// target="_blank"
// :to="{ name: 'ArticleShow', params: { id: item.id } }"
// >
- 用$router.resolve来实现
// let url = this.$router.resolve({
// name: "Info",
// params: {
// code: item.sapCode,
// id: item.categoryCode,
// no: item.articleNo,
// name: item.name,
// },
// });
// window.open(url.href,"_blank")
router-link的多种写法
- 可以用路由的name属性来达到跳转的目的
watch属性
var app = new Vue({
el: "#app",
data: {
ddd: "dd",
ccc: { zxx: "zxx", qq: "123" }
},
watch: {
//最基本的用法
//函数可以获得2个参数，一个数老值，另一个是新值
ddd(value,Newvalue){
console.log(value);
console.log(Newvalue);
},
//
ccc:{
//加deep代表可以监听对象的子属性的变化
deep:true,
//获得数据之后就马上监听
immediate:true,
//打印的是一个包含改变数组后的对象
handler(value){
console.log(value);
}
}
}
})
其他知识
生产环境
放到服务器上的环境，展示给用户看的
