vue开发总结

 

1.监听回车事件

不封装的组件用  @keyup.enter  
封装的组件如el-input用  @keyup.enter.native
例：searchComplete: function (e) {
  var keyCode = window.event? e.keyCode:e.which;
  // console.log('回车搜索',keyCode,e);
  if(keyCode === 13){
    this.isShowSearchIcon = false;
    this.$refs.water.searchPoster(this.posterName);
  }
}

 

2.防止冒泡事件

@click.stop="editText()"

 

3.父子组件传值

父组件代码中 <water_falls  @getWaterfallsPosterNum="getPosterNum" ref="water"></water_falls>

父组件事件中  this.$refs.water.searchPoster(this.posterName);
searchPoster为子组件事件，this.posterName 子组件获取父组件的值
子组件中：
searchPoster: function (posterName) {
  this.posterName = posterName;
  console.log("this.posterName:" + this.posterName);
}

子组件调用父组件事件：

子组件事件中： this.$emit('getWaterfallsPosterNum', _this.sumPosterNum);
父组件事件获取子组件的值
父组件中：
getPosterNum: function (data) {
  console.log("data:::::" + data);
  this.totleList = data;
},

4.全局使用插件

例：lodash

main.js中：
import _ from 'lodash'
Vue.prototype._ = _;
使用：this._.cloneDeep

5.vue遮罩：

<div v-show="showInfo" class="clothesInfo" @touchmove.prevent="">
  <!--遮罩层-->
  <div class="top_info">

  </div>
  <!--校服信息-->
  <div class="all_info">
  </div> 
</div>

css:

.clothesInfo {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  .top_info {
    width: 100%;
    height: 10%;
    opacity: 0.3;
    filter: alpha(opacity=30);
    background-color: #000;
  }
  .all_info {
    width: 100%;
    height: 90%;
    background-color: white;
   }
 }

6.vue访问url去除#

router/index.js页面中代码

//mode 可选的参数有 hash 和  history;
//hash: 默认为hash, 如果使用hash的话，页面的地址就会加上 # 号就会比较不好看，如我们的地址变成如下：http://localhost:8080/#/
//history: 我们使用history的话，那么访问页面的时候就和平常一样，不带井号的；如下地址也可以访问 http://localhost:8080/
let router = new Router({
  base: contextPath || '/',// 配置单页应用的基路径
  mode: 'history',// 访问路径不带井号
  routes: routerConfig.routeConfig
});

7.vue路由跳转

1.router-link标签跳转

<router-link :to="{path:'/view/posterDetail',query:{id:item.id}}">
</router-link>

2.$router.push  传参方式query和params  query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。　
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，
前者在浏览器地址栏中显示参数，后者则不显示

this.$router.push({path: '/view/article', query: {bookcaseId: bookcase._id}});

3.this.$router.replace(location) 不能回退 替换掉当前history

4.路由回退：
 this.$router.go(-1);

8. $set 给data对象新增属性，并触发视图更新

例：给poster新增src属性并赋值触发视图更新 this.$set(poster, 'src', url);

9.vue build构建路径问题

（1）history模式：config下的index.js ：

        assetsPublicPath: '/'

        hash模式: config下的index.js ：

        assetsPublicPath: './'

(2)build下的utils.js添加代码：

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'  // 添加的代码
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

（3）build下的webpack.prod.conf.js添加代码：

 output: {
  publicPath: './',
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },

10.手机端预览vue项目

修改config下的index.js :

host: '0.0.0.0', // 手机预览调试 host需改为0.0.0.0

 

11.vue手机端输入法把底部(底部 fixed定位)顶上去问题

isShowFooter:true,
docHeight: document.documentElement.clientHeight,  //一开始的屏幕高度
showHeight: document.documentElement.clientHeight,   //一开始的屏幕高度

watch:{
  showHeight: 'inputType'
},
methods: {
// 检测屏幕高度变化
inputType() {
  if (!this.timer) {
    this.timer = true;
    let that = this;
    setTimeout(() => {
      if (that.docHeight > that.showHeight) {
        //显示class
        this.isShowFooter = false;
      } else if (that.docHeight <= that.showHeight) {
        //显示隐藏
        this.isShowFooter = true;
      }
      that.timer = false;
    }, 20)
  }
},
}

也可以改成相对定位

 

12.手机端预览vue项目看日志

index.html中

<script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole(); // 手机端日志查看vConsole实例化
</script>