Vue
关注
分享
扫一扫
文章平均质量分 50
Tom10097
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ElementUi 解决在table中使用el-switch无效
elementui表格中使用switch时，插槽一定要标明slot-scope=“scope”//正常切换<template slot-scope="scope"> <el-switch v-model="value"> </el-switch></template>//无效切换<template slot-scope="scope"> <el-switch v-model="value"> &原创 2021-11-26 15:38:19 · 2971 阅读 · 0 评论 -
Vue 组件
component 标签通过:is属性动态渲染组件在替换过程中不用的组件被销毁。会重新触发mouted方法原创 2021-08-10 11:06:08 · 108 阅读 · 0 评论 -
Vue 生命周期
beforeCreate初始化了事件和生命周期不能访问data中的数据created可访问data数据模板未渲染beforeMounted可访问data数据模板未渲染mouted第一次页面渲染之后刷新数据可以在这里使用一般在这里进行ajaxbeforeUpdate和updated访问到的data属性都是修改后的beforeDestory和destoryed可以手动调用vue实例.$destory实现...原创 2021-08-10 10:22:09 · 94 阅读 · 0 评论 -
Vue Vuex
Vuex.store对象Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state, n) { state.count += n } }})state存放数据1.组件中访问this.$store.state.数据名2.导入import {mapState} from ‘vuex'组件computed:{ ...m原创 2021-08-04 18:58:55 · 98 阅读 · 0 评论 -
Vue vue-router
VueRouter对象redirect重定向children嵌套router-link标签<router-link to="路由地址"> </router-link>router-view标签路由占位符<router-view> </router-view>案例 //组件 const User = { template: '<h1>User 组件</h1>' }原创 2021-08-03 18:18:46 · 119 阅读 · 0 评论 -
axios
get参数直接拼接url通过params对象传参 （后端使用req.query接收）另外：restful形式的url api/:id （后端使用req.params接收）axios.get(url,params:{ id:1})delete和get请求类似post参数传递（后端使用req.body接收）默认是json格式请求头信息：Content-Type: application/json;charset=UTF-8axios.post(url,{ name:zs, p原创 2021-08-03 16:41:26 · 108 阅读 · 0 评论 -
Vue 插槽
组件内部定义 slot name=“插槽名”外部使用 templatetemplate 标签属性slot=“插槽名” 或者 #插槽名作用域插槽使用作用域插槽可以操作通过props传递过去的数据外部可用 template 标签属性slot-scope=“数据别名（任意）”template标签内使用插值表达式或v-text指令数据别名.属性名 获取数据比如：组件内<li v-for="item in list"> <slot :info='item'></s原创 2021-08-03 14:56:29 · 93 阅读 · 0 评论 -
Vue 组件
data必须是函数模板根元素只能一个模板props中的属性字符串数组形式如果是驼峰命名，父组件传值是短横线命名传值 或 传事件: props中的属性=“父组件数据”@子组件事件=“父组件事件”子组件向父组件传值因为props中的数据是单向传递的，所以修改不影响父组件数据子组件调用时，设置：@子组件事件=“父组件事件”this.$emit(子组件事件函数名（字符串类型），参数)...原创 2021-08-03 12:01:25 · 89 阅读 · 0 评论 -
Vue watch
先看一段代码<template> <div> <ul> <li v-for="item in list" :key="item" v-text="item"></li> </ul> <el-button type="primary" @click="handle">+1</el-button> <el-button type="primary" @click="handle2"&原创 2021-08-03 09:30:46 · 83 阅读 · 0 评论 -
Vue 数组
数组的变异方法因为js中数组的原始方法都不是响应式，所以Vue创造了同名变异方法修改原数组pushpopshiftunshiftsplicesortreverse返回新数组filterconcatslicesplice和slice除了返回原数组和新数组splice的第二个参数是截取数量slice的第二个参数是索引修改响应式的数组错误的：数组[索引]=新值 （数组改变了，但是页面没有重新渲染）正确的：Vue.set(数组，索引，新值)或者在Vue内部操作thi原创 2021-08-02 21:53:51 · 141 阅读 · 0 评论 -
Vue 表单操作
表单数据不能用插值表达式统一使用v-model，不用v-text，v-once，v-bind等互斥的radio 或 同组checkbox 绑定同一个数据对象select和option组 在select中绑定对象单选的数据对象是单个值，当select的multiple属性为true（多选），数据对象是数组<html lang="en"><head> <meta charset="UTF-8"> <title>Document</titl原创 2021-08-02 21:13:50 · 120 阅读 · 0 评论 -
Vue v-for案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab ul l原创 2021-08-02 20:55:11 · 137 阅读 · 0 评论 -
Vue基础指令
插值表达式和v-cloak 或 v-text[v-cloak]{ display:none}...<div v-cloak>{{msg}}</div>v-htmlv-pre跳过数据渲染v-once不可更改的单向渲染v-bind 或 ：可更改的单向渲染比如：处理类名类名以对象形式.red{background-color:red}...<div v-bind:class="{red:true/false}"></div>原创 2021-08-02 20:44:54 · 96 阅读 · 0 评论