MyException - 我的异常网
当前位置:我的异常网» JavaScript » vue.js基础知识小结

vue.js基础知识小结

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
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

文章评论

什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
10个调试和排错的小建议
10个调试和排错的小建议
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
每天工作4小时的程序员
每天工作4小时的程序员
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员应该关注的一些事儿
程序员应该关注的一些事儿
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
旅行,写作,编程
旅行,写作,编程
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
代码女神横空出世
代码女神横空出世
老程序员的下场
老程序员的下场
那些争议最大的编程观点
那些争议最大的编程观点
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员的鄙视链
程序员的鄙视链
程序员必看的十大电影
程序员必看的十大电影
我是如何打败拖延症的
我是如何打败拖延症的
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
如何成为一名黑客
如何成为一名黑客
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员都该阅读的书
程序员都该阅读的书
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员和编码员之间的区别
程序员和编码员之间的区别
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
 程序员的样子
程序员的样子
鲜为人知的编程真相
鲜为人知的编程真相
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Java程序员必看电影
Java程序员必看电影
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
漫画:程序员的工作
漫画:程序员的工作
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有