0
点赞
收藏
分享

微信扫一扫

vue其他之“vue常用方法1”

夏木之下 2022-03-12 阅读 27

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

举报

相关推荐

0 条评论