vue2学习

vue版本

vue --version

全局安装：vue-cli

npm install -g @vue/cli

命令行运行单个vue文件：

npm install -g @vue/cli-service-global

升级全局的 Vue CLI 包:

npm update -g @vue/cli

创建项目

vue create my-project

GUI创建

vue ui

vue3.0使用Element Plus。

"element-plus": "^1.3.0-beta.5",

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(store).use(router).mount('#app')

// main.ts

ts.config.json

"types": ["element-plus/global"]

列表循环

<ul class="c-header-nav">
      <li v-for="(item, index) in navData" :key="index">
        {{item.value}}
      </li>
</ul>

动态绑定class

 <ul class="c-header-nav">
      <li :class="{'c-header-nav-li': true, 'c-header-nav-li-active': index === 0 }"
          v-for="(item, index) in navData"
          :key="index">
        {{item.value}}
      </li>
    </ul>

yapi: 一个好用的在线接口测试管理工具：YApi-高效、易用、功能强大的可视化接口管理平台

打死都不能用的innerHtml: v-html;

vue生命周期：

ts报错

Argument 'event' should be typed

解决：script 加上 类型

vue手写轮播图

<template>
  <div class="slideShow">
    <div
      class="slideShow-frame shake"
      @touchstart= "start"
      @touchmove= "move"
      @touchend= "end"
      :style="{transform: 'translateX('+ (canTranslateX ? (pathDistance+'px') : currentIndex+'00%)'),
      transition: 'all' + (canTranslateX ? ' 0s ' : ' 0.65s ') + 'ease 0s'}"
    >
      <div
        v-for="(item, index) in items"
        class="slideShow-frame-item"
        :key="index"
        :style="{backgroundImage: 'url('+ item +')'}"
      >{{item}}</div>
    </div>
    <ul class="slideShow-dots">
      <li
        :class="{'active': currentIndex === -index }"
        v-for="(item, index) in items" :key="index"
        @click="switchTo(index)"
      >{{index}}</li>
    </ul>
  </div>
</template>
<script lang="ts">
import Im1 from '../images/img1.jpg'
import Im2 from '../images/img2.jpg'
import Im3 from '../images/img3.jpg'
import Im4 from '../images/img4.jpg'
import Im5 from '../images/img5.jpg'
import Im6 from '../images/img6.jpg'
export default {
  name: 'SlideShow',
  data (): void {
    return {
      items: [Im1, Im2, Im3, Im4, Im5, Im6],
      startAbscissa: 0,
      pathDistance: 0,
      endAbscissa: 0,
      canTranslateX: false,
      currentIndex: 0
    }
  },
  methods: {
    start (event: any):void {
      this.$data.startAbscissa = event.touches[0].clientX
    },
    move (event: any):void {
      this.$data.canTranslateX = true
      const l = event.changedTouches[0].clientX - this.$data.startAbscissa
      if ((this.$data.currentIndex === 0 && l > 0) || (this.$data.items.length === (-this.$data.currentIndex + 1) && l < 0)) {
        this.$data.canTranslateX = false
      }
      if (this.$data.currentIndex === this.$data.items.length && l < 0) {
        this.$data.canTranslateX = true
        this.$data.currentIndex++
      } else {
        this.$data.pathDistance = l + (event.target.offsetWidth * this.$data.currentIndex)
        // 处理当前容器的move横坐标和已经translateX的差值从而计算容器移动的相对位移
      }
    },
    end (event: any):void {
      this.$data.canTranslateX = false
      const l = event.changedTouches[0].clientX - this.$data.startAbscissa
      if (l <= -100 && -this.$data.currentIndex !== this.$data.items.length - 1) {
        this.$data.currentIndex--
      }
      if (l > 100 && this.$data.currentIndex !== 0) {
        this.$data.currentIndex++
      }
    },
    switchTo (index: any):void {
      this.$data.canTranslateX = false
      this.$data.currentIndex = -index
    }
  },
  beforeMount () {
    console.log('init')
  }
}
</script>
<style scoped lang="less">
.slideShow{
  position: relative;
  height: 180px;
  box-sizing: border-box;
  overflow: hidden;
  &-frame{
    display: flex;
    flex-direction: row;
    //overflow: hidden;
    height: 100%;
    box-sizing: border-box;
     &-item{
      width: 100%;
      flex-shrink: 0;
      height: 100%;
      box-sizing: border-box;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  &-dots {
    position: absolute;
    bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #0dc3c3;
    & li {
      margin: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      background: white;
      border-radius: 50%;
      cursor: pointer;
    }
    & .active {
      background: #dcdc45;
    }
  }
}
</style>

vue中的this

 this中的data属性

动态绑定样式·：

使用：单个dom可以绑定多个class属性 <div class="" :class="" />

:class=“{"value": isShow}”

:class="{styleObj}"

:class="styleArr"

:class="styleString"

动态内联绑定

 :style="{backgroundImage: 'url('+ item +')'}"
 :style="styleObject"
 :style="styleArrayObject"

vue中less的使用

 

由图可以看出less媒体查询，覆盖嫡传 

<div class="entry-header-navMask" @click="switchMenu"  v-if="$store.state.pageMode === 'pc'? true: isOpenMenu ">

//if判断

this.$parent.method //调用父元素方法

console.log(this.$parent.a)
console.log(this.$parent.$root)
console.log(this.$parent.$refs)

v-model="" value="" 双向绑定