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 · 2912 阅读 · 0 评论 -
Vue 组件
component 标签 通过:is属性动态渲染组件 在替换过程中不用的组件被销毁。会重新触发mouted方法原创 2021-08-10 11:06:08 · 89 阅读 · 0 评论 -
Vue 生命周期
beforeCreate 初始化了事件和生命周期 不能访问data中的数据 created 可访问data数据 模板未渲染 beforeMounted 可访问data数据 模板未渲染 mouted 第一次页面渲染之后 刷新数据可以在这里使用 一般在这里进行ajax beforeUpdate和updated 访问到的data属性都是修改后的 beforeDestory和destoryed 可以手动调用vue实例.$destory实现 ...原创 2021-08-10 10:22:09 · 79 阅读 · 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 · 78 阅读 · 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 · 93 阅读 · 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-8 axios.post(url,{ name:zs, p原创 2021-08-03 16:41:26 · 81 阅读 · 0 评论 -
Vue 插槽
组件内部定义 slot name=“插槽名” 外部使用 template template 标签属性slot=“插槽名” 或者 #插槽名 作用域插槽 使用作用域插槽可以操作通过props传递过去的数据 外部可用 template 标签属性slot-scope=“数据别名（任意）” template标签内使用插值表达式或v-text指令 数据别名.属性名 获取数据 比如：组件内 <li v-for="item in list"> <slot :info='item'></s原创 2021-08-03 14:56:29 · 77 阅读 · 0 评论 -
Vue 组件
data必须是函数 模板根元素只能一个 模板props中的属性 字符串数组形式 如果是驼峰命名，父组件传值是短横线命名 传值 或 传事件 : props中的属性=“父组件数据” @子组件事件=“父组件事件” 子组件向父组件传值 因为props中的数据是单向传递的，所以修改不影响父组件数据 子组件调用时，设置：@子组件事件=“父组件事件” this.$emit(子组件事件函数名（字符串类型），参数) ...原创 2021-08-03 12:01:25 · 70 阅读 · 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 · 66 阅读 · 0 评论 -
Vue 数组
数组的变异方法 因为js中数组的原始方法都不是响应式，所以Vue创造了同名变异方法 修改原数组 push pop shift unshift splice sort reverse 返回新数组 filter concat slice splice和slice 除了返回原数组和新数组 splice的第二个参数是截取数量 slice的第二个参数是索引 修改响应式的数组 错误的：数组[索引]=新值 （数组改变了，但是页面没有重新渲染） 正确的：Vue.set(数组，索引，新值) 或者在Vue内部操作thi原创 2021-08-02 21:53:51 · 106 阅读 · 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 · 106 阅读 · 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 · 115 阅读 · 0 评论 -
Vue基础指令
插值表达式和v-cloak 或 v-text [v-cloak]{ display:none } ... <div v-cloak>{{msg}}</div> v-html v-pre 跳过数据渲染 v-once 不可更改的单向渲染 v-bind 或 ： 可更改的单向渲染 比如：处理类名 类名以对象形式 .red{ background-color:red } ... <div v-bind:class="{red:true/false}"></div>原创 2021-08-02 20:44:54 · 76 阅读 · 0 评论