vue常用片段

事件处理

基本骨架

子组件

axios

v-if

v-for

路由

设置style

计算属性

动态class

路由跳转

store

nextTick

事件处理：

直接写表达式：

@click="counter += 1"

调用方法：

   @click="greet"
   @click="greet(index)"

获取事件对象：

   @click="warn('no', $event)"

事件修饰符:

   @click.stop.prevent="doThat"

按键修饰符：

   @keyup.13="submit"

基本骨架：

<script type="text/ecmascript-6">
import axios from 'axios'
export default {
   data(){
      return {
          useId:''
      }

   },
   created(){
        ..............
   },
   methods:{
       loginReq(){
            ............
       }
   },
   components: {
        XInput
   }
}
</script>

子组件：

父组件：

声明：import BpmRadio from '@/parts/radio'

  使用：
    <bpm-radio 
      :appoRadioOption="appoRadioOption"  //传数据
      @optionChange="optionChange"   //子组件派发事件
    >       

    </bpm-radio>


子组件：
  接收参数：

props:{

appoRadioOption:Array

//默认空数组：

selectedIds:{

type: Array,

default: function () {

return []

}

this.$emit('optionChange',this.appoRadioOption[index]) //派发事件并传参


  参数验证与默认：

    num: {
      type: Number,
      default: 100
    },

axios-post请求：

 axios.post('xxxxxxxxxxx',{
          userId:this.useId
        }
 ).then((res)=>{
           this.$vux.loading.hide()
           if(res.data.state==0){
               
           }else{
              this.$vux.alert.show({
                   title:'提示',
                   content:res.data.message
              })
           }
  })

或者：

axios({

method:'POST',

url:'xxxxxxxx',

data:{

queryKey:queryKey

headers:{

"token": "1531798043804ORANMALLEELL"

}

}).then((res)=>{

axios-get请求：

 axios({
      method:'Get',
      url:'xxxxxxxxxx/oorder/getDtl?orderId='+orderId,
 }).then((res)=>{

v-if：

<div class="btnBox" v-if="orderStateNum==2">
</div>
<div v-else>
   <divider>暂无留言</divider>
</div>

v-for：

遍历数组：

<div class="orItem" v-for="item in orderInfo" @click="clickItem(item.orderId)">
        <div class="orItemHeader vux-1px-b">{{statusTag[item.orderState]}}
        </div>
        <div class="orItemBody vux-1px-b" v-for="proitem in item.orderList">
               <div class="txtBox">
                    <p class="tit">2222222222</p>
                    <p>2222222222</p>
                    <p>2222222222</p>
               </div>
        </div>
</div>

带index：

<li class="sliderItem" v-for="(item,index) in recomment">{{index}}.{{item.picUrl}}</li>

遍历对象：

 <li v-for="value in object">
    {{ value }}
 </li>

&获取键名：

   v-for="(value, key) in object"

&获取索引：

   v-for="(value, key, index) in object"

一定范围的取值：

   <span v-for="n in 10">{{ n }} </span>

&与v-if混合使用：

  <li v-for="todo in todos" v-if="!todo.isComplete">  //v-for优先级更高，v-if作用于每一个for循环
     {{ todo }}
  </li>

路由方法：

this.$router.push({path:`/order/`+orderId})
this.$router.push({name:'catalogDtl',params:{id:item.Fsinger_id},query:{keyworth:'123lxf'}})
this.$router.push({path:`/page20/${item.Fsinger_id}`})

行间：

@click=“$router.go(-1)”

使用计算属性：

动态class：

1. 对象内表达式：

 如下模板:
     <div class="static"     v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
 如下 data:
     data: {  isActive: true,  hasError: false}
 渲染为:
     <div class="static active"></div>

:class="{'active':index==serverType,'radioItem':true}"

2.返回字符串的表达式：

3.数组内表达式：

:class="[className, isMsg ? 'weui-icon_msg' : ' ']"

变量和字符串混合：

:class="[

'el-link',

type ? `el-link--${type}` : '',

disabled && 'is-disabled'

设置style：

对象语法：

  :style="{ color: activeColor, fontSize: fontSize + 'px' }"  //变量为data中的值

路由跳转：

声明式：<router-link :to="...">
编程式：router.push(...)
this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});

目标路由获取query：

this.$route.query.id

store:

直接获取store：

 this.$store.state.wordId

async await:

   methods:{
      async checkBatchOpRight(){ 
        let res = await getLabelUsers('1001')   //等一个resolve
        ...
      }
  }

Promise:

export function getLabelUsers (tagId) {
    return new Promise((resolve, reject) => {
              .........
              resolve({
                   reqSuccess:true,
                   userList:res.data.userList
              })
              .........
    })
}

变量与表达式：

为dom元素添加事件：

css中使用背景图片：

background:url('../../assets/cjbg.png');


nextTick：

Vue.$nextTick(function(){
    console.log(vm.$el.textContent) 
})


watch:

watch:{
      receiveForm: {
            deep: true,  //data中对象的值的变化
            handler: function (newVal,oldVal){
                    this.modify()
            }
      }
}