1. 前端框架介绍
老牌
jQuery -> 更简单的方式去操作 dom 对象 (标签对象)
extjs -> 更适合做后台管理系统
easyui -> 模仿了 extjs 免费
新式
vue 国内开源的 JS 框架
argularjs 国外 JS 框架
他们都提倡前后台分离, 下面是对前后台分离的解释:
传统的后台开发人员, 需要做一下步骤:
controller -> jsp, service, dao -> 页面展示部分, 需要用 jsp 等技 术负责数据展示
前后台分离之后, 后台开发人员, 需要做一下步骤:
service, dao -> 负责准备模型数据即可
前台开发人员, 负责页面之间的跳转, 从后台获取模型数据, 展示数据
2.VUE
vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架, 它只关注视图层, 采用自底向上增量开发的设计, 它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.
简单来说其实就是:
vue 是一套构建用户界面的框架. 在我看来, 渐进式代表的含义是: 主张最少. 每个框架都不可避免会有自己的一些特点, 从而会对使用者有一定的要求, 这些要求就是主张, 主张有强有弱, 它的强势程度会影响在业务开发中的使用方式. 简单说就是对于 vue 中你不熟悉不太把握的模块或者功能, 你可以不用它, 或者你可以用你熟悉有把握的技术进行代替 . 这样子看来是不是感觉很友好, 相对于其他框架硬要求很少了, 你可以逐渐性的使用框架.
3. 使用
引入 vue.JS, 可以去网上下载, 也可以把内容复制到本地的 JS 文件中
- <!-- 引入 vue.js -->
- <script src="vue.js">
- </script>
创建 Vue 对象
var vue = new Vue({
el: 视图对应的标签
data: 模型数据
methods:{
方法 1:function(){},
方法 2:funciton(){},
- ...
- }
- });
展示模型数据
两标签之间的普通文字, 要从模型中获取数据, 语法使用 {{模型数据的名称}}
标签的属性需要从模型中获取值: v-bind: 属性名 (v-bind 绑定指令), 也可以被简化为 : 属性名
例子如下, 绑定图片属性, 获得图片地址:
- <!-- 视图 -->
- <div id="app">
- <!-- 给文本赋值 用 {{模型变量名}}-->
- <h1 > 姓名:{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>
- <!-- 给属性赋值需要用 v-bind 指令 -->
- <img v-bind:src="photo">
- </div>
- <script>
- // el -> element
- var vue = new Vue({
- el: '#app', /*vue 对象对应的视图是 id 为 App 的标签 */
- data: { /*data 中包含的是模型数据 */
- name:'zhangsan',
- age: 18,
- photo: '2_1.bmp'
- }
- });
- </script>
vue 的一些常用指令
v-for 用来遍历一个集合
v-for="(临时变量名, 下标变量) in 集合名" 其中下标变量从 0 开始
v-if
用来进行条件判断, 当条件成立, 才会渲染视图, 如果条件不成立, 不会生成 html 代码
例子如下, 因为 hasError 后面是 false, 所以不会输出用户名不正确这一行字:
- <div id="app">
- <h3 v-if="hasError"> 用户名不正确 </h3>
- </div>
- <script>
- var vue = new Vue({
- el:"#app",
- data:{
- hasError:false /* 没有错误 */
- }
- });
- </script>
- v-show
用来进行条件判断, 当条件成立 (true), 把此标签显示出来, 如果条件不成立 (false), 会把此标签隐藏起来
如: v-show="hasError" , hasError:false, 所以会把此标签隐藏起来
注: 这和 v-if 虽然都是可以判断之后让某些东西不显现, 但是它们两个还是有 不同之处, v-if 只要不满足条件就不会生成 HTML 代码, 而 v-show 则是生成了 HTML 代码, 只是隐藏了而已.
事件处理
传统方式处理事件, 事件名称 ="函数 ()" , 如以下
<input type="button" onclick="函数 ()">
vue 来处理事件 格式: v-on: 事件名称 ="方法名", 也可以被简化为 @事件名称 ="方法名", 事件名称前不需要再加 on 了, 加 v-on, 如以下
- <input type="button" v-on:click="方法名">
- <input type="button" v-on:mouseout="方法名">
- 如果方法有参数的话就在方法名后面加上括号里面写上参数, 如
- <input type="button" v-on:click="方法名 (12)">
- , 没有参数就直接写方法名
双向绑定 v-model
v-bind 模型数据发生了改变, 视图也会重新渲染, 模型会影响视图, 而反之不行
v-model, 不仅是数据改变影响视图, 而且视图改变也会影响数据, 尤其配合表单使用
代码演示
1,v-bind 和语法使用 {{模型数据的名称}} 的使用
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <!-- 引入 vue.js -->
- <script src="vue.js">
- </script>
- </head>
- <body>
- <!-- 视图 -->
- <div id="app">
- <!-- 给文本赋值 用 {{模型变量名}}-->
- <h1>
- 姓名:{{name}}, 年龄: {{age}}, 图片 {{photo}}
- </h1>
- <!-- 给属性赋值需要用 v-bind 指令 -->
- <img v-bind:src="photo">
- <img :src="photo">
- </div>
- {{name}}
- <script>
- // el -> element
- var vue = new Vue({
- el: '#app',
- /*vue 对象对应的视图是 id 为 App 的标签 */
- data: {
- /*data 中包含的是模型数据 */
- name: 'zhangsan',
- age: 18,
- photo: '2_1.bmp'
- }
- });
- </script>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/43ca3cf2d544