vue.js基础知识总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js基础知识总结相关的知识,希望对你有一定的参考价值。

初始化一个项目

  • npm init -y

安装一些依赖

  • npm install 名称 --save

  • 例如 npm install vue axios bootstrap --save

  • --save 表示开发和上线都要用

  • --save dev 表示开始时候用,上线丢掉

vue总结

1.指令

  • v-show 切换显示隐藏,频繁显示使用

  • v-if 根据条件语句可以显示隐藏,不频繁显示隐藏使用

  • v-else 前面有v-if 配合使用,如果前面v-if不成立情况下

  • v-model 双向数据绑定的关键所在,视图变化

  • v-cloak 防止闪烁css中定义一下[v-cloak]{display:none}

  • v-once 控制绑定的内容不会再次被监测变化通常是配合v-model使用

  • v-html 解析数据里面的标签,插入到绑定节点里面去

  • v-text 绑定数据 ,和{{}}等价,但可以防闪烁

  • v-for 循环 语法- 不带索引写法 item in arr 语法二 带索引写法 (item,index) in arr v-for可以嵌套

  • v-on 用于监听dom事件 ,简写@

  • v-bind 用于绑定属性 ,简写:

  • v-style 写内嵌样式,基本没有什么作用

阻止冒泡

  • e.cancelBubble=true;

  • e.stopPropagation();

  • @click.stop

修饰符

  • 时间后面可以加一些修饰符号

  • @click.stop 阻止冒泡

  • @click.capture 时间捕获,先捕获到目标再冒泡

  • @click.self 只有在自己身上点击才会触发函数,其他冒泡,会跳过这个函数

  • @click.prevent 阻止默认事件,例如a标签点击跳转,加上这个@click.prevent,就阻止了默认属性href跳转了

ref="wo" 给节点绑定一个标识

  • 后期调用绑定的标识

    • this.$refs.wo

创建实例之后,再添加一个数据上去

  • Vue.set(data,‘sex‘, ‘男‘)

2 实例化一个Vue生命周期

实例化一个Vue函数 new Vue({})

  • 周期里面的属性

  • el -绑定vue用的范围,id和class都可以

    • 语法1: 内部:el:"#app"或el:".app

    • 语法2:外部:vm.$ount(‘‘#app‘)

    • 语法2:其实没有必要外部挂载范围

  • data:{ }

    • 绑定vue全局的数据,是一个对象

    • 语法 : data:{ }

  • created(){}

    • 实例已经创建完成之后被调用的函数

    • 通常用数据请求

  • methods:{}

    • ,实例上去之后,获取真实的dom元素,调用这个对象

    • 基本所有的方法,函数都丢在这个函数里面

  • directives:{}

    • 自定义指令方法,里面写指令函数,名称可以不带v-;但是外部必须带v-

      • 指令函数里面有两个参数,第一个(ele)是当前元素,第二个(bind)是当前元素的对象

    • 语法 directives:{auto(ele,bind){

      } }

  • filters:{}

    • 过滤器,过滤管道(|)左边值的操作

    • 过滤器里面过滤方法auto

    • 第一个参数是左边要过滤的值,

    • 第二个参数是过滤方法里面传的参数

    • 语法

    • filters:{

      auto(e,prem){   
      }

      }

  • computed:{}

    • 计算属性

    • 计算属性里面不支持异步编程,比如计时器呀,ajax等

      • 默认get()函数,意思就是根据别人数据,得到自己计算的数据

      • set()函数,意思是根据自己,影响别人数据,很少用

  • watch:{}

    • 监控属性,返回回调函数

    • 监控的数据,必须和data里面定义是一样的

    • 默认是handler(){} 方法

    • deep:true 是深度监控,值发生变化,也能监控

  • beforeDestroy(){}

    • 销毁实例的Vue

不常用的vue里面的属性

  • beforeCreate(){}

    • 数据没有被挂载,方法也没有被挂载的时候

    • 基本不用

  • beforeMount(){}

    • 判断有没有el属性,这时候,有模板template,就用模板,没有就用#app节点内部渲染

    • 基本不用

  • beforeUpdate(){}

  • 当页面数据发送变化时候,执行,前提是页面用到了这个数据

  • 基本不用 computed{} 计算属性基本全部搞定

  • destroyed(){}

    • 销毁vue实例,

    • 基本不用

localStorage缓存

  • localStorage.setItem(‘缓存的名字‘,‘缓存的值‘);

  • localStorage.getItem(‘缓存的名字‘)

  • 我们平常缓存时候,将对象想变成字符串缓存JSON.stringify()

    • JSON.stringify()

      • 将一个对象变为字符串

  • 然后取出缓存数据再将字符串转为json对象JSON.parse()

    • JSON.parse

      • 将一个字符串变为json对象

异步编程之一 Promise

  • 解决回调地狱

  • 同步请求,依次等待

  • Promise 有三种状态,成功,失败,等待

  • Promise 有两个参数,其实是两个函数类型

    • 第一个参数 resolve ,代表成功

    • 第二个参数 reject 代表失败

  • Promise 自带then方法,

    • then 方法有两个函数

      • 第一个函数成功

      • 第二个函数失败

数组常见操作

  • reverse()倒序数组

  • [1,2,3,4].reverse()

    • [4,3,2,1]

  • join()

  • 接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串

    • ["red","green","blue"].join("|")

      • red|green|blue

  • pop()

    • 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

    • [1,2,3].pop()

    • [1,2]

  • concat()

    • 合并数组

    • [1,2].concat([3,4])

    • [1,2,3,4]

  • map 映射

    • 结果生产一个新数组,不影响原来的数组

    console.log(arr=[1,1,3].map(function(item){
        return item+1;
    }))
    • 结果[2,2,4],不影响上一个数组

  • forEach 循环

  • 循环数组

  • filter 过滤

  • 根据条件过滤一个数组,返回过滤后的数组

 console.log([1,2,3].filter(function(item){
      if(item>1){
      return item
  }
}))
  • 结果就是[2,3],之前的[1,2,3]就不在了

  • find 查找

    • 用于找出第一个符合条件的数组元素,有就返回该元素,没有就undefined

    console.log([1,2,3].find(function(item){
            if(item==1){
            return item;
                }
    }))
    • 结果找到 1

  • includes 方法

    • 判断当前数组是否包含某个指定的元素,如果有true,没有false

    console.log([1,2,3].includes(1))
    • 结果true 当中包含1

  • some 方法

  • 判断当前数组有没有符合条件的,有就返回ture,没有就false

  console.log([1,2,3,6].some(function(item){
      if(item>1){
          return item    
      }
}))
  • 结果为true 当前有元素大于1

  • every 方法

    • 判断当前数组里面是不是每一个元素符合条件,都符合返回true,有一个不符合返回false

    console.log([1,2,3].every(function(item){
            if(item>1){
                return item        
            }
    }))
    • 结果为false ,当前有元素1不大于1

    • reduce 方法

    • 累加结果,其实循环累加,=+

    • 有4个参数

      • 第一个参数 是当前元素上一次累加的值

      • 第二个参数 是当前元素

      • 第三个参数 是当前索引值

      • 第四个参数 是数组本身

    • 为了每次累加没有出现undefined,默认添加一个第一项为0

    console.log([1,2,3].reduce(prev,next,index,arr){
            return prev+next;
    })
     
    • 过程,第一次选项值为0,加上第一项的值为1

      • 0+1 //1

    • 第二次,前一个累加的值为1,加上第二项的值为2

      • 1+2 //3

    • 第三次 前面累加的值为3 ,加上第三项的值为3

      • 3+3-全部长度就是3个元素,结束,此时return 最后的结果为6

    -所以结果为6

以上是关于vue.js基础知识总结的主要内容,如果未能解决你的问题,请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

vue.js基础知识总结

vue知识总结及开发技巧

Vue基础知识总结:基础篇

vue基础教程总结篇,用最短的时间入门vue.js(持续更新...)

vue基础教程总结篇,用最短的时间入门vue.js(持续更新...)