随笔分类 -  Vue.js

摘要:4.Vuex核心概念 4.5 Modules Vuex实例允许划分为多个模块。 每个模块包含自己的state、mutations、actions、getters、嵌套modules。 // store/index.js import Vue from 'vue' import Vuex from ' 阅读全文
posted @ 2021-02-03 11:21 gzhjj 阅读(89) 评论(0) 推荐(0) 编辑
摘要:4.Vuex核心概念 4.4 Actions Actions不直接改变Vuex实例中的状态,而是提交mutation。 // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export defau 阅读全文
posted @ 2021-02-03 11:20 gzhjj 阅读(129) 评论(0) 推荐(0) 编辑
摘要:4.Vuex核心概念 4.3 Mutations 改变Vuex实例中的状态的唯一方法是提交mutation。 在Vuex学习总结(2)的Vuex入门这里已经演示了如何提交mutation。 在提交mutation时可以带参数。 // store/index.js import Vue from 'v 阅读全文
posted @ 2021-02-03 11:18 gzhjj 阅读(71) 评论(0) 推荐(0) 编辑
摘要:4.Vuex核心概念 4.2 Getters Vuex实例的getters相当于计算属性,getters的结果根据其依赖关系进行缓存,并且在其依赖发生更改时才重新计算。 getters将Vuex实例的state作为第一个参数。 // store/index.js import Vue from 'v 阅读全文
posted @ 2021-02-03 11:16 gzhjj 阅读(118) 评论(0) 推荐(0) 编辑
摘要:4.Vuex核心概念 4.1 State 使用mapState。 import {mapState} from 'vuex' export default { name: "Counter", // computed: { // count() { // return this.$store.sta 阅读全文
posted @ 2021-02-03 11:15 gzhjj 阅读(107) 评论(0) 推荐(0) 编辑
摘要:2.状态管理 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style></style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </ 阅读全文
posted @ 2021-02-02 17:03 gzhjj 阅读(78) 评论(0) 推荐(0) 编辑
摘要:1.创建Vue.js项目 使用Vue CLI创建Vue.js项目:Creating a Project | Vue CLI vue create vuex-demo1 注意项目名称不能包含大写字母。 手动选择特性,选上Router和Vuex。 创建完成。 启动项目。 使用WebStorm打开刚才创建 阅读全文
posted @ 2021-02-02 17:01 gzhjj 阅读(59) 评论(0) 推荐(0) 编辑
摘要:1.官方路由 对于大多数单页面应用,都推荐使用官方支持的 vue-router 库。 1.1 入门 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .router-link-active { color: red; } </s 阅读全文
posted @ 2021-01-22 17:27 gzhjj 阅读(127) 评论(0) 推荐(0) 编辑
摘要:1.介绍 使用Vue.component定义全局组件,使用new Vue({ el: '#container '})为每个页面指定一个容器元素。 这种方式的缺点是: 每个组件的命名不得重复 字符串模板缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的\ 当HTML和JavaScript组件化时,C 阅读全文
posted @ 2021-01-22 16:13 gzhjj 阅读(139) 评论(0) 推荐(0) 编辑
摘要:插件通常用来为 Vue 添加全局功能。 添加全局方法或者属性。 添加全局资源:指令/过滤器/过渡等。 通过全局混入来添加一些组件选项。 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-route 阅读全文
posted @ 2021-01-22 15:39 gzhjj 阅读(119) 评论(0) 推荐(0) 编辑
摘要:1. 计算属性和侦听器 1.1 计算属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </he 阅读全文
posted @ 2021-01-22 15:19 gzhjj 阅读(106) 评论(0) 推荐(0) 编辑
摘要:1.模板语法 1.1 双大括号 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> < 阅读全文
posted @ 2021-01-22 15:10 gzhjj 阅读(173) 评论(0) 推荐(0) 编辑
摘要:1.自定义指令 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 阅读全文
posted @ 2021-01-22 11:51 gzhjj 阅读(151) 评论(0) 推荐(0) 编辑
摘要:1.混入 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </h 阅读全文
posted @ 2021-01-22 11:33 gzhjj 阅读(145) 评论(0) 推荐(0) 编辑
摘要:4.模板定义的替代品 4.1 内联模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .baseCss { border: 5px solid red; padding: 2rem; } </style> <script s 阅读全文
posted @ 2021-01-22 11:27 gzhjj 阅读(122) 评论(0) 推荐(0) 编辑
摘要:1.访问元素 & 组件 1.1 访问根实例 我们可以通过$root属性访问根实例。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.jsdelivr.net/ 阅读全文
posted @ 2021-01-22 11:24 gzhjj 阅读(211) 评论(0) 推荐(0) 编辑
摘要:1.动态组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app { font-size: 0 } .dynamic-component-demo-tab-button { padding: 6px 10px; bord 阅读全文
posted @ 2021-01-22 10:50 gzhjj 阅读(778) 评论(0) 推荐(0) 编辑
摘要:1.插槽 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </h 阅读全文
posted @ 2021-01-22 10:31 gzhjj 阅读(295) 评论(0) 推荐(0) 编辑
摘要:1.自定义事件 1.1 事件名 v-on事件监听器在 DOM 模板中会被自动转换为全小写(因为 HTML 是大小写不敏感的),所以v-on:myEvent将会变成v-on:myevent——导致myEvent不可能被监听到。 因此,我们推荐你使用短横线分隔命名的事件名。 1.2 自定义组件的v-mo 阅读全文
posted @ 2021-01-21 17:53 gzhjj 阅读(403) 评论(0) 推荐(0) 编辑
摘要:1.4 单向数据流 所有的prop都是从父组件传递到子组件中,反过来则不行。 每次父组件发生更新时,子组件中的所有prop都将会刷新为最新的值。 我们不应该在子组件内部改变prop。 两种常见的试图改变prop的情形: ① 这个prop用来传递一个初始值;这个子组件将其作为一个本地的prop数据来使 阅读全文
posted @ 2021-01-21 16:49 gzhjj 阅读(308) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示