因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还是奇奇怪怪,感觉前端是个黑盒了, 于是忍不住去学习了vue
感觉前端的框架带来的这种前后端分离变化还是特别明显的,后端确实不用再操心view层了,页面的转换有vue通过后端的切换不同的组件,后端基本上没有什么变化,但是相应数据基本上是清一色的json格式的数据了, 此外, 目前碰到的后端的安全框架 SpringSecurity的使用有了些许变化,起码认证成功还是失败,不能往指定的页面跳转了,转而使用消息+状态码提示,因为就一张index.html,还能往哪里跳转?
下面是近几天的学习笔记, 还是再整理一遍,毕竟会忘
认识MVVM框架Vue
MV VM分别对应着
- model : 数据模型,存放后端传递过来的数据
- view : 视图,其实就是html, 页面
- viewModel : vue 的实例
下面是一个入门的例子: 通过这个例子可以看到:
- 我们new 出来vue的实例,然后把它关联在了html中id为 app的代码块,这样目的是如果我们在这个代码块中使用vue的模板语法,vue可以解析
data: 这个模块盛放的 mvvm中的第一个m
其实这也可以看出,vue的开发模式,它的出现屏蔽掉了dom操作,我们再也不用document.getElementById(), 然后innnerHtml了, 现在的工作就是把后端给的值填充进data块中的属性字段就ok,一旦发生改变,页面会自动渲染上最新的值
Haha {{username}}
模板语法:
双大括号 取值:
{{msg}}
{{msg.toUpperCase()}}
嵌入文本或html
强制数据绑定,在原标签前添加 :
绑定监听事件: @符
- 比较有趣的地方,如果在methods块中,js函数的定义是无参数据的, 在html代码块中可以直接写函数名,而不写小括号,因为java代码写多了,看了想笑 ,(当然(),也可以写上,但是js编程者会认为这是没事找事)
计算属性
计算属性,说白了就是vue给我们的一块糖,让我们定制数据的变化规则,然后vue帮我们渲染在html页面上
- 计算属性是针对data中的字段的操作
- 计算属性中的每一个函数,都分两部分: get和set , 默认是get,作用是把这个方法的返回值渲染进页面, set方法,就是重新设置值, 然后get会重新渲染html
- 计算属性是存在缓存的,key就是函数的名字,value就是计算得到的值
例子:
姓名:
姓名1:
姓名3: