0910，整备区:vue >> MU

<table class="text"><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）============================版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。