vue学习随记.zip_vue_vuex_vue学习知识点笔记_图片上传插件封装

1：作用域插槽中的自定义属性 不能用name :name = "" 不可以 2：路由进阶： 1) 跳转 $router 属于vueRouter路由实例 $router.push() $route 属于路由对象 可以拿到名字属性路径等 $route.params $route.query 路由跳转两个方式 声明式 <router-link to="">和编程式$router.push('路由地址') 编程式：this.$router.push('/list')或者 this.$router.push({path:'/list'})或者this.$router({name:'list'}) 声明式：<router-link to="/other"></router-link> 2) 返回 原生:window.history.go(-1) 返回上一级 不能指定的路由 3）子路由 chidren:[{ path:"路由地址"， component:()=>important("组件地址") }] 子路由的展示必须在父路由里面写<router-view> 4）声明式传参 第一种 { path:'/home/info/:id' //在配置路由的时候 路径必须有个：id匹配接收一个参数的传递 } <router-link to="/home/info/100">100为我要传的值<router-link/> 获取展示这个值 $route.params.id 第二种 { path:'/home/info' //路由中定义/home/info?100这种方式的时候是不需要传id } <router-link to="/home/info?100">100为我要传的值<router-link/> 获取展示这个值 $route.query.id 区别： query的方法是不需要事先在路由里面定义的 5）动态路由 /参数变量 <router-link :to="{path:'/home/info',query:{id:id}}">100为我要传的变量值<router-link/> 或者 <router-link :to=" '/home/info/'+id">100为我要传的值<router-link/> 6) 编程式传参 第一种 this.$router.push ({path:'/home/info',query:{id:id}}) 第二种 注意 这里面一定添加名字 要用名字进行匹配 不可以用path路径进行匹配！！ 因为提供了path后 params会被忽略掉 很重要！！！！！！！ this.$router.push ({name:'home',params:{id:id}}) 3：ref定义在普通的元素上，获取当前的dom元素 ref定义在组件上的时候，获取的是当前组件vue实例 <input type="text" ref="input" /> this.$refs.input.focus() //成为焦点 <h1 ref="h1">h1</h1> this.$refs.h1.innerHtml = "h2" 传参 子组件数据title 传给 父组件 <TestB ref="testB"></TestB> this.$refs.testB.title = "2" //title为子组件的一个数据 this.$refs.testB.fun() = "2"//fun()为子组件的一个方法 4：计算属性 作用：存储 处理数据 在{{}}模板中放入太多逻辑 让模板难以维护 归根结底是一个属性 不是一个方法 里面一定要有返回值 不需要添加括号{{total}} 与mothods区别： 1：方法需要事件触发 计算属性不需要 2：方法是每一次出发都要被调用 计算属性监听的值如果没有变化是不触发的 修改计算属性的值: 计算属性的返回值是不能被直接修改的 如果修改必须进到计算属性的set（）方法 读取一个变量会触发get方法 修改一个值会触发set方法 5：watch监听 写法： watch:{ name:function(newValue,oldValue){//name 是写在data里面的数据源 console.log('新的名字'+newValue+'之前的名字'+oldValue) this.age ="18"//监听name的值 name变化 的时候 age就跟着改变 } } 与computed的区别： 数据变化的情况用计算属性很多，但是监听是可以找到这个值的前后变化的历史 计算属性是多对一 影响计算属性的任何一个值变化 计算属性都会变化 而监听是一对一只关注一个值的变化 监听路由 watch:{ $route(to,from){ console.log(to.path); } } 深度监听： data(){ return{ user:{ name:'abc' } } } watch:{ //关于数据在一个对象中进行该数据的监听，或者该数据源的写法有两种 //第一种写法 user.name(newValue,oldValue){ } //第二种写法 'user.name'(newValue,oldValue){ } //第三种写法 user{ //handler是监听对象的默认方法 handler:(newValue,oldValue)=>{ } //deep是监听对象的内置属性 深度监听 主要应用于监听源是 对象！！！！！！！ 很重要 否则不会触发 deep:true } } 6VUE特性：$set /$delete 用法： $set是新增属性并赋值 一定注意是 新增属性 而不是原有的属性数据 $delete是删除已有对象数据的底层属性及属性值 <h1>{{user.name}}</h1> <h1>{{user.age}}</h1>//age是没有设置的新属性 没有预先设置 <button @click="add()">查询年纪</button> <button @click="del()">删除</button> data(){ return{ user{ name:"abc" } } } methods:{ add(){ /**** this.user.age = 18*****/ //这种方式 因为数据里面没有age这个数据源 这样的直接改的方式可以改变数据底层增加这个age属性 但是不会去出发试图更新 this.$set(this.user , 'age' ,18) = 18 //这种先增加age属性 然后 赋值为18 } del(){ /**** delete this.user.age= 18*****/ //这种方式 因为数据里面没有age这个数据源 这样的直接改的方式可以改变数据底层删除这个age属性 但是不会去出发试图更新 this.$deletet(this.user, 'age') } } 7：axios 8：生命周期 定义： 简单理解组件从创建到销毁的过程 钩子函数： 严格来说 钩子函数是回调函数的一种 钩子函数与回调函数都是事件处理函数 钩子函数是指windows的消息处理机制下，捕获消息的时候立即执行 9：vuex状态管理 组件的关系过于复杂 组件的通信很麻烦 相当于一个全局对象 store:vue实例对像 State:数据源 Getter: Mutation:唯一可以改变状态/数据的 同步 Action: 异步处理 提交的 mutation 简单使用： 1：下载vuex并且 引用 vuex import vuex from ' vuex' 2：使用 vue.use(vuex) 3：var store = new vuex.store({ //实例 store //初始化 state state:{ flag:100 } }) 4：注入 store new Vue({ store }) 5：页面中使用vuex {{$store.state.flag}} 常用使用： 1：创建文件夹 store文件夹 添加 index.js配置文件 //注意是js文件 2：引用vue 引用vuex 使用 vuex 实例 初始化 数据和方法 3：导出 export default store;//导出 整个实例化对象 4：页面中使用 main.js import store/index.js 变成全局变量 一定再main.js中使用 5：页面中使用vuex {{$store.state.flag}} 6：改变state的值 //改变state的值 必须通过mutation,但是想要唤起mutation 必须通过store下面的commit进行唤起 a.vue中