1.加上冒号,就说明这里面是js去解析,加`说明你写的是字符串,而且是模板字符串,而且里面还混入了js--${}
2.import { nanoid } from 'nanoid'安装唯一id
3.在vue中使用active-class='active'可以改变默认选中的状态色
4.关于vuex注意的
he(){
return this.$store.state.sum
},
1>对象中{ 还需要添加一个对象{需要怎么操作呢?} },可以{...{对象}},可以把对象里面的方法,展示出来
2>...mapState({he:'sum',xuexiao:'school',xueke:'subject'})这里的he:'sum'
he其实是'he':'sum' he是方法名 sum是state中定义的值
3>.使用数组的方法可以更简单...mapState(['sum','school','subject']),sum必须是state中定义的值,不然是错误的
5. 对象中{ 还需要添加一个对象{需要怎么操作呢?} },可以{...{对象}},可以把对象里面的方法,展示出来
6:安装npm i vuex@3的时候要vue2.0要安装3版本的
安装npm install --save vue-router@3
7.v-model.number="n"写法中的.number意思是转为Number类型
8.vue常用
1.引用bootstrap.css的方式,有2种
1>.推荐 在pulic文件中放置文件,在html文件中去引用
2>.不推荐 这种存在一个问题,font字体如果缺少,会报错 在assets文件中放置文件,在vue文件中去引用 import '../assets/css/bootstrap.css'
2.关于在''号中,添加动态的值,比如:'https://api.github.com/search/users?q=text'text如果是动态的要怎么处理
(`https://api.github.com/search/users?q=${this.keyWord}`)可以'模板字符串'解决-常用
3.ES6合并,通过比较2个数据,进行合并this.info = {...this.info,...dataObj}-常用
4.子组件接收多个数据,可以使用this.info = value 原理是this._data.info = value
9.获取焦点
this.$refs.inputTitle.focus()
10.判断我的身上有没有这样一个属性 hasOwnProperty
// if(todo.edit){//这个判断存在-重复调用问题
if(todo.hasOwnProperty('edit')){//完美解决-重复调用问题
todo.edit = true
}else{
console.log('身上没用edit')
this.$set(todo,'edit',true)//set添加
}
11.vue中插件的位置摆放,要放最前面
12.delTodo(_,id) {}在vue中如果参数不需要,可以用_代替
13.获取时间戳方法
Date.now()
if(e.target.value.trim()){//校验数据
14.reduce条件统计
this.todos.reduce((pre,current)=>{
},0)//函数(上一个的值,当前值),和初始值
15.return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0), 0)//函数体只有一句,而且还是箭头函数,return可以不写,花括号可以省略
16.<input type="checkbox" :checked="doneNum === todos.length "/>单选框的选中状态
17.转为大写
{{name.toUpperCase()}}
18.在F12可以在console中输入获取
document.querySelector('input').value
Vue.config
19. Object有个属性keys可以把对象,中的所有的属性名,提取出来变成一个数组
console.log(Object.keys(person))
20.方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(obj, prop, descriptor)
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
value:18
})
//打印出来,age是灰色,灰色的意思是,不可以被枚举的(不参与遍历)
21.获取键盘编码,获取键盘名称
if(e.keyCode === 13){
console.log(e.target.value)
console.log(e.keyCode)//获取键盘编码
console.log(e.key)//获取键盘名称
}
22.配合keydown使用ctrl、alt、shift、meta、tab
其他的配合keyup使用
23.截取字符串0,1,2位
firstname.slice(0,3)
24. split 函数是用于按指定字符(串)或正则去分割某个字符串,结果以字符串数组形式返回;
let arr = value.split('-');
['赵', '四']
25.异步和同步
同步和异步的概念对于很多人来说是一个模糊的概念,是一种似乎只能意会不能言传的东西。其实我们的生活中存在着很多同步异步的例子。
比如:你叫我去吃饭,我听到了就立刻和你去吃饭,如果我没有听到,你就会一直叫我,直到我听见和你一起去吃饭,这个过程叫同步;
异步过程指你叫我去吃饭,然后你就去吃饭了,而不管我是否和你一起去吃饭。而我得到消息后可能立即就走,也可能过段时间再走。
如果我请你吃饭,就是同步,如果你请我吃饭就用异步,这样你比较省钱。
26.生成0、1、2这3个数的随机数
Math.floor(Math.random()*3)
Math.floor是向下取整
Math.random() 0(含)和 1(不含)之间的随机数
27.移除数组的第一项
shift() 方法移除数组的第一项
28.在数组中的0坐标添加数据
this.persons.unshift(p)
29.filter过滤方法的使用, indexOf判断 !=-1存在的意思,, indexOf('')空字符串的时候,返回的是0,所以这就存在一个问题
注意:他不会改变原数组
this.perstwo = this.persone.filter((p)=>{
return p.name.indexOf(val) != -1
})
30.indexOf('')空字符串的时候,返回的是0,所以这就存在一个问题
31.排序,返回新的数组,升序、降序
arr.sort((p1,p2)=>{
return this.sortType === 1? p1.age-p2.age:p2.age-p1.age
32. 判断是否存在
sortType默认为0
if(this.sortType)初始如果为0,则显示为false ,不为0则显示true
33.替换截取
this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
34.数组的常用方法
push在数组的最后一个位置新增元素
pop删除一个元素
shift删除第一个元素
unshift在数组前面添加一个元素
splice数组指定位置,删除,插入,替换元素
sort数组排序
reverse反转数组
35.打断点的方式
// debugger;
36.vue基础学习第三天有2个js基础要搞懂
1.关于VueComponent:(需要了解构造函数)
一个重要的内置关系(要会原型基础)
2.暴露
37.查看vue组件对象的方法vc
console.dir(hello)
38.ES6的一种写法
// render(createElent){//考虑到你引入的是个残缺版的vue.js 返回的是个函数
// return createElent('h1','你好啊')
// }
.render:q=> q('h1','你好啊')写法问题,因为只有一句省略了return