# vue_cli_201125 **Repository Path**: tianyucoder/vue_cli_201125 ## Basic Information - **Project Name**: vue_cli_201125 - **Description**: vue_cli_201125 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-04-01 - **Last Updated**: 2021-05-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 1.Vue脚手架说明 1.文件结构分析 |-- node_modules |-- public |-- index.html: 主页面文件 |-- src |-- components:存放组件的文件夹 |-- App.vue:外壳组件 |-- main.js: 应用入口js |-- babel.config.js: babel的配置文件 |-- .gitignore: git版本管制忽略的配置 |-- package.json: 应用包配置文件 |-- README.md: 应用描述说明的readme文件 2.关于h函数说明 vue.runtime.common.js(项目中用的多) : 1.不包含模板解析器,打包后体积小 2.配置项中的不能写template,要用render: h => h(App)代替 vue.js : 1.包含解模板析器,打包后体积大 2.配置可以写template ## 2.一个简单的Hello组件 自己动手写几个简单的组件 ## 3.样式scoped属性、组件name配置、eslint语法检查 (1).scoped可以让样式在当前组件生效 (2).name可以给组件命名 (3.)语法检查配置 第一种方式:/*eslint-disable-next-line*/ 第二种方式:vue.confog.js中配置 ## 4.ref与props 1.ref的用法: (1).给组件标签指定ref:,获取到的是Demo组件的实例对象——vc (2).给html标签指定ref:,获取到的是真实DOM节点 (3).通过this.$refs.xxxx获取 2.props的用法 (1).传递props: (2).接收props: 第一种方式(只声明): props:['userName'] 第二种方式(限制类型): props:{ userName:Number } 第三种方式(限制类型、属性,指定默认值): props:{ userName:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } } 关于props与watch 1.props是只读的,(Vue底层会监测你对props的修改,如果进行了修改,就会报错) 备注:;Vue监测props修改时对于对象类型的数据,是判断地址值。 2.watch中配置的监视属性名,可以是vc或vm身上任何一个属性 ## 5.todoList案例 (1).组件data中的数据、接到的props、methods中的方法、computed中的属性,通过vc均可读取。 (2).使用计算属性时,只是读取用get即可,修改记得要用set (3).methods、computed、watch并没有严格意义上的界定,视具体功能而定,有时用什么都可以实现。 ## 6.深度监视 (1).使用watch时根据数据的具体结构,决定是否采用深度监视 (2).深度监视: (1).Vue中watch中配置的监视,默认只能监测自身一层的数据 (2).配置deep:true可以检测所有层次的数据 ## 7.浏览器本地存储(webStorage) (1). Cookie、SessionStorage、LocalStorage均被用来在浏览器端存储数据,且都是字符串类型的键值对! (2). 注意:session和SessionStorage不是一个概念!!! 在服务端有一种存储方式叫做:session会话存储,常常被简称session。 SessionStorage和LocalStorage都是浏览器本地存储,统称为Web Storage。 (3). 存储内容大小一般支持5-10MB (4). 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 (5). 相关API: 1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 2. var data = xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数,返回键名对应的值。 3. xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数,并把该键名从存储中删除。 4. xxxxxStorage.clear() 调用该方法会清空存储中的所有键名 (6).备注: 1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。 2.LocalStorage存储的内容,需要手动清除才会消失。 3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getItem的返回值是null 4.JSON.parse(null)的结果依然是null ## 8.自定义事件 一种组件间通信的方式,适用于:子 ===> 父 (1).绑定自定义事件: 第一种方式: 第二种方式: mounted中:this.$refs.demo.$on('haha',this.test) (2).触发自定义事件: this.$emit('haha',数据) (3).前提:A是父 B是子 1.A组件想接收B组件传递的数据,那就:在A组件中给B组件绑定自定义事件,事件的回调在是在A组件自身 2.自定义事件的回调在哪,哪才能接收到数据 3.适用于 子 ===> 父 ## 9.全局事件总线(GlobalEventBus) 一种组件间通信的方式,适用于任意组件间通信 (1).安装全局事件总线,在main.js中配置 new Vue({ ..... beforeCreate() { Vue.prototype.$bus = this //安装事件总线 }, ...... }) (2).A组件想接收数据,则在A组件中给$bus绑定自定义事件,回调留在A组件自身 mounted() { this.$bus.$on('xxxx',this.yyyyy) } 备注:上方的yyyy是回调,yyy需要配置在组件的methos属性中,切勿直接写回调 (3).要提供数据的组件中触发事件:this.$bus.$emit('xxxx',数据) (4).备注: 1.谁接数据,谁就$on('xxx-xxx',this.yyy) 2.谁发数据,谁就$emit('xxx-xxxx',数据) 3.记得在beforeDestroy中解绑事件,用$off去解绑 ## 10.总结pubsub 一种组件间通信的方式,适用于任意组件间通信 (1).安装pubsub:yarn add pubub-js (2).引入使用: import pubsub from 'pubsub-js' (3).需要接收数据的组件中,订阅消息: 在组件的mounted钩子中: this.订阅的id = pubsub.subscribe('xxx',this.yyy) 上方的yyy: 1.是需要配置在methods中的方法 2.yyy啥时候调用?有人发布xxx消息时,yyy被调用 3.yyy会收到什么参数?msg,data; 其实msg是消息名(一般不用)、data是数据 (4).需要把数据提供给别人的组件中,发布消息 pubsub.publish('xxx',数据) ## 11.插槽(slot) 也算是一种组件间通信的方式,适用于 父===>子,且传递的是html结构 (1).作用:父组件向子组件指定位置中插入html结构 (2).分类: 第一种:默认插槽: 第二种:命名插槽: 第三种:作用域插槽:后期项目中会讲到 (3).使用: 父组件中: 子组件中: ## 12.求和案例vuex版 (1).项目根目录创建:vuex/store.js (1.1)应用Vuex插件 (1.2)创建store并管理:state、actions、mutations对象 (2).组件中读取状态:$store.state.xxxx (3).组件中更新状态:$store.dispatch('动作名',数据) (4).actions中可以写业务逻辑、开启异步任务,若actions中没有任何逻辑, 可以在组件中直接$store.commit()去直接对话mutations进行更新状态 (5).mutations中尽量不写业务逻辑,不写异步任务,只负责加工状态。 ## 13.Vuex中的getters (1).作用:Vuex中的数据想要经过处理后再使用,可以使用getters (2).写法: const getters = { bigSum(state){ return state.sum * 100 } } (3).备注:getters不是必须要用,也可以用computed、methods、过滤器实现 ## 14.四个mapXxxx的使用 使用:mapState、mapGetters自动生成原本我们亲自在computed中写的属性 使用:mapMutations、mapActions自动生成原本我们亲自在methods中写的回调 注意:以上所有mapXxxx方法在使用时: 1.若组件中用的名字 等于 actions、state、mutations、getters中的名字可以简写成数组 2.若组件中用的名字 不等于 actions、state、mutations、getters中的名字要写成对象 ## 15.路由的基本使用 (1).用到的插件库:vue-router (2).创建路由器: router/index.js new VueRouter({ mode:'history' //默认值是hash模式 routes: [ { path: '/about', component: About } ] }) (3).注册路由器: main.js import router from './router' new Vue({ router }) (4).使用路由组件标签: 首页 //导航区 //展示区 ## 16.路由的其他配置项 1.路由链接点击高亮: 2.调整路由工作模式:mode:'history' //hash 3.模糊匹配: { path:'/home*', component:Home } 4.重定向(兜底): { path:'/*', redirect:'/about' } ## 17.多级路由(嵌套路由) routes:[ { path:'/home', component:Home, children:[ { path:'message', component:Message, }, { path:'news', component:News } ] } ] ## 18.路由params参数 (1).注册路时声明接收params: path:'detail/:id' (2).路由链接: 点我 (3).路由组件中接收: this.$route.params.id ## 19.路由query参数 (1).注册路时无需声明接收params: path:'detail' (2).路由链接: 点我 (3).路由组件中接收: this.$route.query.id ## 20.命名路由 配置: { name:'xinwen' //路由名 path:'news', component:News, } 作用:简化跳转与传参 传统写法:点我 简化写法: 点我 备注:路由如果配置了name属性,且to写成对象形式,那么params可以不用占位符了,即: 不配置name属性: { name:'xiangqing', path:'detail/:id', //一定要声明接收id component:Detail } 配置name属性: { name:'xiangqing', path:'detail', //id可以不用声明了 component:Detail }