vue开发总结

# vue 初始化项目

Vue cli3 初始化项目

npm install -g @vue/cli
vue create my-project
npm run serve

以图形化界面创建和管理项目：

vue ui

Vue cli2 初始化项目

npm install -g @vue/cli-init
vue create my-project
npm run dev

# 项目总结

# 1. vue 手机端输入法把底部顶上去

(底部 fixed 定位)

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

1
2
3

watch:{
  showHeight: 'inputType'
},
mounted() {
  // window.onresize监听页面高度的变化
  window.onresize = () => {
    return (() => {
      window.screenHeight = document.body.clientHeight;
      this.showHeight = window.screenHeight;
    })();
  };
},
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)
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

也可以改成相对定位

# 2. vue 遮罩

<div v-show="showInfo" class="clothesInfo" @touchmove.prevent="">
  <!--遮罩层-->
  <div class="top_info"></div>
  <!--校服信息-->
  <div class="all_info"></div>
</div>

1
2
3
4
5
6

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;
   }
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 3. vue watch 监听对象属性

 watch: {
    "childInfo.recordTime": {
      handler: function() {
      },
      immediate: true
    }
  },

1
2
3
4
5
6
7

# 4. 监听回车事件

不封装的组件用 @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);
  }
}

1
2
3
4
5
6
7
8

# 5.vue 路由跳转

router-link 标签跳转

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

1
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}});
this.$router.replace(location) 不能回退替换掉当前 history
路由回退： this.$router.go(-1); go(-1)回退时传参可用 sessionStorge

# 6. Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：
- 对象语法：

  < div v - bind: class = "{ active: isActive, 'text-danger': hasError }" > < /div>

  data: {
    isActive: true,
    hasError: false
  }

1
2
3
4
5
6

数组语法：

    < div v - bind: class = "[isActive ? activeClass : '', errorClass]" > < /div>

    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }

1
2
3
4
5
6

Style 也可以通过对象语法和数组语法进行动态绑定：
- 对象语法：

  < div v - bind: style = "{ color: activeColor, fontSize: fontSize + 'px' }" > < /div>

  data: {
    activeColor: 'red',
    fontSize: 30
  }

1
2
3
4
5
6

数组语法：

  < div v - bind: style = "[styleColor, styleSize]" > < /div>

  data: {
    styleColor: {
      color: 'red'
    },
    styleSize: {
      fontSize: '23px'
    }
  }

1
2
3
4
5
6
7
8
9
10

更新时间: 2/11/2022, 11:23:32 AM

← vue知识点总结 vue3汇总→