后端小白的VUE入门笔记, 前端高能慎入

因为项目需要前后端分离,后端竟然不用控制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:

你可能感兴趣的:(后端小白的VUE入门笔记, 前端高能慎入)