事件处理

基本骨架

子组件

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>
  <span v-if="optionVal=='IT类服务'">11111</span>
  <span v-else-if="optionVal=='行政办公类服务'">2222</span>

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()
}
}
}

  

 

vue常用片段的更多相关文章

  1. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  2. vue常用

    vue常用的路由的状态管理

  3. 五、vue常用UI组件

    下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...

  4. (二)Vue常用7个属性

    学习vue我们必须之到它的7个属性,8个 方法,以及7个指令.787原则 el属性 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符. data属性 用来组织从view中抽象出 ...

  5. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  6. Vue常用的GitHub项目

    Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...

  7. vue常用的修饰符

    v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...

  8. vue进阶:vs code添加vue代码片段

    如何设置? 选择或创建 配置代码 如何使用? 一.如何设置? 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configur ...

  9. Vue 常用三种传值方式

    Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...

随机推荐

  1. Google搜索引擎使用小技巧

    相信大家都知道,利用Google等搜索引擎进行信息查证是翻译过程中十分重要的一环.事实上,掌握信息搜索的技巧和方法,不仅对翻译工作大有帮助, 在网络信息时代,学会充分利用搜索引擎,在很多情况下都可以达 ...

  2. 问题 B: C++习题 对象数组输入与输出

    题目描述 建立一个对象数组,内放n(n<10)个学生的数据(学号.成绩),用指针指向数组首元素,输出第奇数(1,3,5,7)个学生的数据. 输入 n和n个学生的学号.成绩 输出 奇数学生的数据 ...

  3. 跑groud truth的disparity

    1.用这个初始化cv::Mat M(375,1242,CV_32FC1,0.0); ,就会报以下的错误: malloc(): memory corruption: 0x000000000165df40 ...

  4. Git版本控制的原理

    Git工作区域 工作目录(Working Directory) 暂存区(Stage/Index) 资源库(Repository或Git Directory) 远程的git仓库(Remote Direc ...

  5. [P1363] 幻想迷宫

    题目链接 很好的一道搜索题,应该是利用了离散化的思想我好蒟蒻呀 地图是根据给定的图无限的拼接的. 所以说暴力建图是不可取的. 其实不难看出,在跨越两张图时.我们就可以看做这个点时空穿梭一般.从底下回来 ...

  6. 【书籍连载】《STM32 HAL 库开发实战指南—基于F7》-第一章

    从今天起,每天开始连载一章<STM32 HAL 库开发实战指南—基于F7>.欢迎各位阅读.点评.学习. 第1章  如何使用本书 1.1  本书的参考资料 本书参考资料为:<STM32 ...

  7. JS浏览器的三种弹框:

    1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...

  8. 【杂题总汇】NOIP2013(洛谷P1967) 货车运输

    [洛谷P1967] 货车运输 重做NOIP提高组ing... +传送门-洛谷P1967+ ◇ 题目(copy from 洛谷) 题目描述 A国有n座城市,编号从1到n,城市之间有m条双向道路.每一条道 ...

  9. 没有CTO的Netflix有哪些值得我们学习的工程文化?

    作者介绍: 杨波,拍拍贷基础框架研发总监.具有超过 10 年的互联网分布式系统研发和架构经验,曾先后就职于:eBay 中国研发中心(eBay CDC),任资深研发工程师,参与亿贝开放 API 平台研发 ...

  10. 爱她就用python给她画个小心心 ♥(ˆ◡ˆԅ)

    from turtle import * a = Turtle() screensize(400, 300, "blue") setup(width=1300, height=65 ...