vue,一路走来(7)

今天描述的问题估计会有很多人也遇到过。

vue-router多个路由地址绑定一个组件造成created不执行

也就是文档描述的,如下图

我的解决方案:

created () {
     console.log(this.getStatus(this.$route.path))

     this.userpath()      //我要执行的函数

},

methods: {

      getStatus (urlStr) {

          var urlStrArr = urlStr.split(‘/‘)

          return urlStrArr[urlStrArr.length - 1]

      }

},

watch: {

    ‘$route‘ (to, from) {

         console.log(this.getStatus(this.$route.path))

         this.userpath()      //再次调起我要执行的函数

     }

}

vue之watch用法

项目中刚好也用到了需要检测某值是否发生了变化,获取最新的值。就分享一下

vue单文件组件写法:
<template>
  //观察数据为字符串或数组
   <input v-model="example0"/>
   <input v-model="example1"/>
  //当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数
   <input v-model="example2.inner0"/>
</template>
<script>
   export default {
      data(){
        return {
          example0:"",
          example1:"",
          example2:{
            inner0:1,
            innner1:2
          }
        }
      },
      watch:{
        example0(curVal,oldVal){
          console.log(curVal,oldVal);
        },
        example1:‘a‘,//值可以为methods的方法名
        example2:{
         //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
          handler(curVal,oldVal){
            conosle.log(curVal,oldVal)
          },
          deep:true
        }
      },
      methods:{
        a(curVal,oldVal){
          conosle.log(curVal,oldVal)
        }
      }
    }
</script>

项目中还遇到了需要使用md5加密,分享一个不错的网址http://blog.csdn.net/qq_35844177/article/details/70597597

时间: 2024-10-07 12:35:47

vue,一路走来(7)的相关文章

vue,一路走来(1)

2016年12月--2017年5月,接触前端框架vue,一路走来,今天才觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目,其实还有一个原因是网上大部分学习的资料视频都是以饿了么框架来演示的.同时很感谢认识的以及不认识的小伙伴为我解决项目中遇到的问题. 用webpack构建vue项目 1.需要安装node环境.(直接网上找下载就好) 2.在你想要新建项目的路径下新建文件夹,用于存放项目文件,然后shift+右键,

vue,一路走来(3)

所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不过,vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios(可自行去了解).但我在项目中用的是vue-resource,下面就来讲一下过程中遇到的问题吧! vue-resource(数据交互) 1.先安装 cnpm install vue-resource --s

vue,一路走来(12)--父与子之间传参

今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionnow)"></component-a> import componentA from './components/componentA' export default{ name:'Index', data(){ return{ positionnow:'' } } } compon

vue,一路走来(6)

微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面打开H5网页中执行JS调起支付.接口输入输出数据格式为JSON.注意:WeixinJSBridge内置对象在其他浏览器中无效. 注意:在微信支付后台正确配置授权目录后,如果还是出现当前页面的URL未注册,查看http://www.kejik.com/article/152868.html 同时下载以下文件放

vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './assets/css.css' src/assets/scss.scss $border-color:#c58f5d; .box{ width:100px; height: 100px; border:1px solid #f40; } 第一步:安装依赖 cnpm install node-sass --sa

vue,一路走来(4)

补充 今天突然发现自己前面(2)说可以调用外部js,却忘记详细介绍如何调用函数了. 1.首先在main.js里引用文件 2.然后算是和jquery框架一样需要所谓的入口函数吧 不过令我烦恼的是,在应用的文件中需要把他包含在另一个函数里,才可以调用到.看了别人的例子好像也是这么用的.暂时就先这样了. vuex 想着底部导航块有些页面并不需要呈现出来,后面看到一个案例,用了vuex的分发dispatch 安装:npm install vuex --save http://blog.csdn.net/

vue,一路走来(8)

Mint-ui的复选框列表Checklist和Radio 由于我在main.js里已经引用了全部的组件了,这里就不再按需引入了. 一直想着如何将自己的数据添加到 label 和 value里面,后面发现可以用push的方式,如下图: Mint-ui的日期时间选择器Datetime picker 我设置了当前时间为默认时间,可是不知道怎么将过期的时间设置为不可选. 这2个事件openPickerstart,openPickerend起到绑定数据值的变化,但取出来的时间戳格式不对,所以我进行了转换.

vue,一路走来(14)--短信验证码框的实现(类似支付密码框)

由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实input标签),提高层级定位在上方,最大长度为6,然后将上方真实input标签的值传给每一个单独的假input标签. <div class="phonenum-show"> <div class="getback-title">收回剩余礼金 <

2015互联网校招总结—一路走来 (移动端开发面经,另有面经汇总)

转载请注明出处:http://blog.csdn.net/ns_code/article/details/40408397 写在前面 结束了在百度的实习,是时候写下校招的总结了,再不写估计很多东西都忘了.在开源社区混迹久了,从别人的学习.求职.工作经历中越发感受到很多的正能量, 也本着攒RP的原则,向学弟学妹们,尤其非名校的学弟学妹们传递点正能量,因为博主也是非名校出身,而且在整个求职的过程中能够很明显地感受到名校学生那 种得天独厚的优势,同样的实力,名校学生进入BAT等一线互联网企业确实要容易