因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还是奇奇怪怪,感觉前端是个黑盒了, 于是忍不住去学习了vue
感觉前端的框架带来的这种前后端分离变化还是特别明显的,后端确实不用再操心view层了,页面的转换有vue通过后端的切换不同的组件,后端基本上没有什么变化,但是相应数据基本上是清一色的json格式的数据了, 此外, 目前碰到的后端的安全框架 SpringSecurity的使用有了些许变化,起码认证成功还是失败,不能往指定的页面跳转了,转而使用消息+状态码提示,因为就一张index.html,还能往哪里跳转?
下面是近几天的学习笔记, 还是再整理一遍,毕竟会忘
认识MVVM框架VueMV VM分别对应着
model : 数据模型,存放后端传递过来的数据
view : 视图,其实就是html, 页面
viewModel : vue 的实例
下面是一个入门的例子: 通过这个例子可以看到:
我们new 出来vue的实例,然后把它关联在了html中id为 app的代码块,这样目的是如果我们在这个代码块中使用vue的模板语法,vue可以解析
data: 这个模块盛放的 mvvm中的第一个m
其实这也可以看出,vue的开发模式,它的出现屏蔽掉了dom操作,我们再也不用document.getElementById(), 然后innnerHtml了, 现在的工作就是把后端给的值填充进data块中的属性字段就ok,一旦发生改变,页面会自动渲染上最新的值
<body> <div> <input type="text" v-model="username"><!-- 声明式开发 dom监听 --> <p>Haha {{username}}</p> <!-- 数据绑定 --> </div> </body> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', // 元素选择器, 选出根路径 data:{ // Data Model 数据模型 username:'哈哈' } }); </script> 模板语法:双大括号 取值:
<p>{{msg}}</p> <p>{{msg.toUpperCase()}}</p> <!-- 可以调用js函数 -->嵌入文本或html
<p v-text="msg"></p> <!-- 相当于 textContent --> <p v-html="msg"></p> <!-- 相当于 innerHtml -->强制数据绑定,在原标签前添加 :
<img :src="imaUrl" alt="">绑定监听事件: @符
比较有趣的地方,如果在methods块中,js函数的定义是无参数据的, 在html代码块中可以直接写函数名,而不写小括号,因为java代码写多了,看了想笑 ,(当然(),也可以写上,但是js编程者会认为这是没事找事)
<button @click="text"> 点我111 </button> <button @click="text222('haha')"> 点我222 </button> 计算属性计算属性,说白了就是vue给我们的一块糖,让我们定制数据的变化规则,然后vue帮我们渲染在html页面上
计算属性是针对data中的字段的操作
计算属性中的每一个函数,都分两部分: getter和setter , 默认是getter,作用是把这个方法的返回值渲染进页面, setter方法,就是重新设置值, 然后getter会重新渲染html
计算属性是存在缓存的,key就是函数的名字,value就是计算得到的值
例子:
<body> <div> 姓名: <input type="text" placeholder="FirstName" v-model="secondName"> <br> 姓名1: <input type="text" placeholder="FullName1" v-model="FullName1"> <br> 姓名3: <input type="text" placeholder="FullName3" v-model="FullName3"> <br> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> // 下面的全部回调函数中， this都是vm对象 var vm = new Vue({ el: '#app', data: { firstName: 'A', secondName: 'B', }, computed: { FullName1() { return this.firstName + ' ' + this.secondName; }, // todo 通过计算属性实现双向的数据绑定, 不受其他影响 FullName3: { get() { // 计算并返回当前属性的值 return this.firstName + ' ' + this.secondName; }, set(vel) { // get 执行之后 把结果返回给 set const names = vel.split(' '); alert(names[0]); alert(names[1]); this.firstName = names[0]; this.secondName = names[1]; } } } });计算属性写在computed块中, 可以看到它常用的两种写法, 在使用是时候都是直接使用函数名就行,因为它并没有参数
函数名(){}
对象名:{ get(){} , set(){} }
上面的FullName1以函数的,这种书写格式是对 get方法的默认实现,方法的返回值会被渲染到页面上
FullName3还重写了set(val){} 方法, 如果我们在FullName3对应的输入框里面输入新的值, val就是这个新的值,在set方法中,如果对当前vue实例的data中的属性做了改动,这个改动是双向的,页面中所有使用对应字段的地方的值,都会从新渲染
事件的监听: