中
178 | { path: '', component: UserHome },
179 | ]
180 | }
181 | ]
182 | })
183 | ```
184 | **综合代码**
185 |
186 | ``` html
187 |
188 |
189 | 登录
190 | 注册
191 |
192 |
193 |
194 |
195 |
196 | ```
197 |
198 | ```javascript
199 |
200 | //定义好登录组件
201 | var loginComponent = Vue.extend({
202 | template : ' 登录
'
203 | })
204 |
205 | //定义好注册组件 注册
206 | var registerComponent = Vue.extend({
207 | template : ' 注册 --- {{username}}
',
208 | data:function(){
209 | return {
210 | username : ''
211 | }
212 | },
213 | created(){
214 | console.log(this.$route.params.username); // 通过 this.$route.params.username 获取参数
215 | this.username = this.$route.params.username;
216 | }
217 | })
218 |
219 | //创建好路由,并注册相关组件
220 | var vueRouter = new VueRouter({
221 | routes : [
222 | {name:'login',path:'/login',component:loginComponent},
223 | {name:'register',path:'/register/:username',component:registerComponent}//通过路由传递参数
224 | ]
225 | });
226 |
227 | //创建Vue对象
228 | var vue = new Vue({
229 | el:'#app',
230 | router:vueRouter
231 | });
232 | ```
233 |
234 | 
--------------------------------------------------------------------------------
/vue总结/lifecycle-标注版本.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WanYiFeng/Vue-cms/d4b07c7b3ee112c75cc9d85e9dd1850f60743bfc/vue总结/lifecycle-标注版本.png
--------------------------------------------------------------------------------
/vue总结/vue-resource.md:
--------------------------------------------------------------------------------
1 | # vue-resource
2 |
3 | ## POST请求
4 |
5 | ```javascript
6 | getData(){
7 | const url = "http://127.0.0.1:3000/postLogin";
8 | this.$http.post(url,{username: 'lisi',password:'lisi3'},{emulateJSON:true}).then(res=>{
9 | console.log(res.body);
10 | },err=>{
11 | console.log('请求失败');
12 | })
13 | }
14 | ```
15 |
16 | ## GET请求
17 |
18 | ```javascript
19 | getData(){
20 | const url = "http://127.0.0.1:3000/login?username=zhangsan&password=1233";
21 | this.$http.get(url).then(res=>{
22 | console.log(res.body);
23 | },err=>{
24 | console.log('请求失败');
25 | })
26 | }
27 | ```
28 |
29 | ## JSONP请求
30 |
31 | ```javascript
32 | getData(){
33 | const url = "http://127.0.0.1:3000/jsonpLogin?username=zhangsan&password=123";
34 | this.$http.jsonp(url).then(res=>{
35 | console.log(res.body);
36 | },err=>{
37 | console.log('请求失败');
38 | })
39 | }
40 | ```
41 |
42 | > 注意JSONP请求需要服务端支持
43 |
44 | **NODEJS支持代码设定**
45 |
46 | ```javascript
47 | //2.0 将所有api的请求响应content-type设置为application/json
48 | app.all('/api/*',(req,res,next)=>{
49 | //设置允许跨域响应报文头
50 | //设置跨域
51 | res.header("Access-Control-Allow-Origin", "*");
52 | res.header("Access-Control-Allow-Headers", "X-Requested-With");
53 | res.header("Access-Control-Allow-Methods","*");
54 |
55 | res.setHeader('Content-Type','application/json;charset=utf-8');
56 | next();
57 | });
58 |
59 | ```
60 |
61 | ```javascript
62 | route.all('/api/jsonp',(req,res)=>{
63 |
64 | var callbackFn = req.query.callback;
65 |
66 | var obj = {message:'jsonp 请求 ok'};
67 | var jsonStr = JSON.stringify(obj);
68 |
69 |
70 | res.end(`${callbackFn}('${jsonStr}')`);
71 |
72 | });
73 |
74 | module.exports = route
75 | ```
76 |
77 | > 注意需要 基于 express 在实现
78 |
79 |
--------------------------------------------------------------------------------
/vue总结/过滤器.md:
--------------------------------------------------------------------------------
1 | # 过滤器
2 |
3 | Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：
4 |
5 | ## 全局的过滤器
6 |
7 | ```javascript
8 | Vue.filter('toLowerCase',function(input){ //第一个参数为过滤器的名字 第二个参数为回调函数 在回调函数中返回过滤完成后的数据
9 | return input.toLowerCase();
10 | })
11 |
12 | var vue = new Vue({
13 | el:"#app",
14 | data:{
15 | message : 'Hello Vue'
16 | }
17 | });
18 |
19 | var vue2 = new Vue({
20 | el:"#app2",
21 | data:{
22 | msg : 'GOOD MORNING'
23 | }
24 | });
25 | ```
26 |
27 | ```html
28 |
29 | {{message | toLowerCase}} // "|"管道符 为过滤器的意思 后面跟着过滤器的名字
30 |
31 |
32 |
33 | {{msg | toLowerCase(msg,"vue2")}} // 过滤器可以传递参数一般第一个参数为为本身可以省略不写 其他参数 可以根据定义过滤器的规则进行传参
34 |
35 | ```
36 |
37 | ##私有的过滤器
38 |
39 | ```javascript
40 | var vue = new Vue({
41 | el:"#app",
42 | data:{
43 | message : 'Hello Vue'
44 | },
45 | filters:{
46 | toLowerCase:function(input){
47 | return input.toLowerCase();
48 | }
49 | }
50 | });
51 |
52 | var vue2 = new Vue({
53 | el:"#app2",
54 | data:{
55 | msg : 'GOOD MORNING'
56 | },
57 | filters:{
58 | toLowerCase:function(input){
59 | return input.toLowerCase();
60 | }
61 | }
62 | });
63 | ```
64 |
65 | ```html
66 |
67 | {{message | toLowerCase}}
68 |
69 |
70 |
71 | {{msg | toLowerCase}}
72 |
73 | ```
74 |
75 | > 私有过滤器定义在当前的Vue对象里面
76 |
77 | ## 绑定的数据过滤器
78 |
79 | ```javascript
80 | {{ message | capitalize }}
81 |
82 | {{ message | capitalize }}
83 |
84 |
85 | Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。
86 |
87 | 过滤器函数总接受表达式的值作为第一个参数。
88 | new Vue({
89 | // ...
90 | filters: {
91 | capitalize: function (value) {
92 | if (!value) return ''
93 | value = value.toString()
94 | return value.charAt(0).toUpperCase() + value.slice(1)
95 | }
96 | }
97 | })
98 | 过滤器可以串联：
99 | {{ message | filterA | filterB }}
100 | 过滤器是 JavaScript 函数，因此可以接受参数：
101 | {{ message | filterA('arg1', arg2) }}
102 | 这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
103 | ```
--------------------------------------------------------------------------------
评论列表
24 |{{item.content}}
27 |28 | {{item.user_name}} 29 | {{item.add_time | timeFilter('YYYY-MM-DD')}} 30 |
31 |