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>
子组件:
使用:
<bpm-radio
:appoRadioOption="appoRadioOption" //传数据
@optionChange="optionChange" //子组件派发事件
> </bpm-radio> 子组件:
接收参数:
参数验证与默认:
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-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 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.返回字符串的表达式:
:class="[className, isMsg ? 'weui-icon_msg' : ' ']"
变量和字符串混合:

:style="{ color: activeColor, fontSize: fontSize + 'px' }" //变量为data中的值
路由跳转:
声明式:<router-link :to="...">
编程式:router.push(...)
this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});
目标路由获取query:
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中使用背景图片:
nextTick:
Vue.$nextTick(function(){
console.log(vm.$el.textContent)
})
watch:
watch:{
receiveForm: {
deep: true, //data中对象的值的变化
handler: function (newVal,oldVal){
this.modify()
}
}
}
vue常用片段的更多相关文章
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- vue常用
vue常用的路由的状态管理
- 五、vue常用UI组件
下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...
- (二)Vue常用7个属性
学习vue我们必须之到它的7个属性,8个 方法,以及7个指令.787原则 el属性 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符. data属性 用来组织从view中抽象出 ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- Vue常用的GitHub项目
Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...
- vue常用的修饰符
v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...
- vue进阶:vs code添加vue代码片段
如何设置? 选择或创建 配置代码 如何使用? 一.如何设置? 进入vs code主界面-->使用快捷键“ctrl + shift + p”: 如果你是使用Preferences:Configur ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
随机推荐
- Google搜索引擎使用小技巧
相信大家都知道,利用Google等搜索引擎进行信息查证是翻译过程中十分重要的一环.事实上,掌握信息搜索的技巧和方法,不仅对翻译工作大有帮助, 在网络信息时代,学会充分利用搜索引擎,在很多情况下都可以达 ...
- 问题 B: C++习题 对象数组输入与输出
题目描述 建立一个对象数组,内放n(n<10)个学生的数据(学号.成绩),用指针指向数组首元素,输出第奇数(1,3,5,7)个学生的数据. 输入 n和n个学生的学号.成绩 输出 奇数学生的数据 ...
- 跑groud truth的disparity
1.用这个初始化cv::Mat M(375,1242,CV_32FC1,0.0); ,就会报以下的错误: malloc(): memory corruption: 0x000000000165df40 ...
- Git版本控制的原理
Git工作区域 工作目录(Working Directory) 暂存区(Stage/Index) 资源库(Repository或Git Directory) 远程的git仓库(Remote Direc ...
- [P1363] 幻想迷宫
题目链接 很好的一道搜索题,应该是利用了离散化的思想我好蒟蒻呀 地图是根据给定的图无限的拼接的. 所以说暴力建图是不可取的. 其实不难看出,在跨越两张图时.我们就可以看做这个点时空穿梭一般.从底下回来 ...
- 【书籍连载】《STM32 HAL 库开发实战指南—基于F7》-第一章
从今天起,每天开始连载一章<STM32 HAL 库开发实战指南—基于F7>.欢迎各位阅读.点评.学习. 第1章 如何使用本书 1.1 本书的参考资料 本书参考资料为:<STM32 ...
- JS浏览器的三种弹框:
1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...
- 【杂题总汇】NOIP2013(洛谷P1967) 货车运输
[洛谷P1967] 货车运输 重做NOIP提高组ing... +传送门-洛谷P1967+ ◇ 题目(copy from 洛谷) 题目描述 A国有n座城市,编号从1到n,城市之间有m条双向道路.每一条道 ...
- 没有CTO的Netflix有哪些值得我们学习的工程文化?
作者介绍: 杨波,拍拍贷基础框架研发总监.具有超过 10 年的互联网分布式系统研发和架构经验,曾先后就职于:eBay 中国研发中心(eBay CDC),任资深研发工程师,参与亿贝开放 API 平台研发 ...
- 爱她就用python给她画个小心心 ♥(ˆ◡ˆԅ)
from turtle import * a = Turtle() screensize(400, 300, "blue") setup(width=1300, height=65 ...