0910，整备区:vue >> MU

<tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

> {{ 诶，这个暂时没有深入的研究... }} ? VUE主线 vue ? VUE全家桶： vue Devtools ?vue调试 ? ?[了解即可 - F12] Element UI ? ?vue界面/UI 【完全 OK】 vue-router vuex vue-resource vue-CLI ? ? ? vue-CLI ? ?[了解-可面 深入更佳!!!!!] ? ======================（VUE 快速）============================ ? VUEX VUE状态管理 *********************************************** 用npm 安装 >> npm install vuex 专为vuejs应用程序开发的状态管理模式 ? >> 采用"集中式存储".管理应用的所有组件的状态，并以相应的规则.保证状态以一种可预测的方式进行变化 #### 4 核心 #### the state tree 单一状态树 >> 用一个对象(store)包含全部的应用层级状态 getter 用来从store获取vue数据 mutators ?事件处理器..用来驱动状态的变化 >>mutations actions ? 可以给组件使用的函数..>>>> 以此,来驱动事件处理器mutations #### 代码示例 #### const store = new Vuex.Store({ ? state: { count: 0 },? mutations: { ? ? increment (state) { ? ? ? state.count++ ? ? } ? } }) store.commit('increment') ? ? ? ?// 通过store.commit 触发状态变更 console.log(store.state.count) ? // 通过store.state 获取当前状态 ------------------------ #### nio VUEX运用 #### 统一在store文件夹/store.js下,?store.js文件如下: import Vue/Vuex from "vue/vuex" import 其他比如homeState/vuex-persistedState 文件夹/模块.. Vue.use(Vuex) ? ? ? ? ? ? ? ? ? ? ? // 用Vue.use()明确地【安装】vuex export default new Vuex.Store({ ? plugins:[createPersistedState,] ?// vuex状态持久化模块.用localStorage ? modules:{ ? ? 'homeState': homeState // modules里面放..各模块 ? } }) ========================= VUE-ROUTER VUE路由 *********************************************** 用npm 安装 >> npm install vue-router （nio项目中，就是router文件夹下的index.js） #### 代码示例 #### import Vue from "vue" import Router from "vue-router" import 各组件(for 路由) Vue.use(Router) ?// 安装哈!!! const router = new Router({ ? linkActiveClass: 'active' ?// 传入linkActiveClass,来改变router选中时添加的class名 ? routes:[ ? ? path: "/home",? ? name: "home",? ? component: homePage ? ] }) export default router ?//最后,export出去 ---- 使用: ========================= VUE-RESOURCE VUE路由 *********************************************** 用npm 安装 >> npm install vue-resource 安装并引入vue-resource后，可以基于全局的Vue对象 或 基于某个Vue实例使用 http #### 用法: this.$http.get('/api/xxx').then(response => { xxsuccxx },response => { xxfailxx }) **** 注意: 上面的then中，两个参数: ①响应成功回调函数,②响应失败回调函数 &&&& 补充: vue-resource的请求API是按照REST风格设计的,提供了7种请求API ? get/head/delete/jsonp(url,[option]) ? post/put/patch(url,[body],[option]) ========================= +++++++++++++++++++++++++ 【三个主文件】 App.vue ? ? 根组件...所有子组件都将在这里被引用 index.html ?整个项目的入口文件.将会引用 "根组件"App.vue main.js ? ? "入口文件"的js逻辑 >> webpack打包之后将被注入到index.html中 ========================= +++++++++++++++++++++++++ 【computed 计算属性 （+与method对比）】 ①如出现会使模板变得混乱的复杂逻辑（例如基于动态变化的变量所得出的"总额"），推荐使用计算属性。 ②计算属性 VS 方法：计算属性.基于依赖进行缓存,（比如上面）只有变量变化时,计算属性才会重新计算。 ? ? 若变量未变,则计算属性立即返回之前的计算结果.不必再次执行计算 ========================= +++++++++++++++++++++++++ 【vue模板】 双大括号插入文本..用v-html插入纯HTML内容..使用v-bind(:xxx)插入对象..v-on(@xxx)监听..v-if/show/for... 【过渡效果】 用transition组件封装目标组件: ? **** 注意：这里,通过name,来声明过渡效果名称 ) *****（参考）*************************************************** https://blog.csdn.net/zhenghao35791/article/details/67639415 ? ? [ 再好好研究一下 nio-路由 问题!!! ] （问题： export/export default 区别?） （问题：jsonp 了解一下） ======================（VUE）============================ ? ? ? ======================（vuex）============================ ? ? ? ======================（vue-router）============================ ? ? ? ======================（vue-resource）============================（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

<table class="text">