标签：UNC pptv 新项目 key 情况 lob 特性 title button
老牌
- jquery -> 更简单的方式去操作 dom 对象（标签对象）
- extjs -> 更适合做后台管理系统
- easyui -> 模仿了 extjs 免费
新式
- vue 国内开源的js框架
- argularjs 国外js框架
他们都提倡前后台分离，下面是对前后台分离的解释：
传统的后台开发人员，需要做一下步骤：
controller -> jsp， service， dao -> 页面展示部分，需要用jsp等技术负责数据展示前后台分离之后，后台开发人员，需要做一下步骤：
service, dao -> 负责准备模型数据即可前台开发人员，负责页面之间的跳转、从后台获取模型数据，展示数据
Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架，它只关注视图层， 采用自底向上增量开发的设计，它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
* 传统 `<script src="js路径">` 成本低
* js 分模块，编译，集成less，打包，发布，npm， 成本太高
1) 引入vue.js，可以去网上下载，也可以把内容复制到本地的js文件中（也可以下载我分享的这个：https://pan.baidu.com/s/1E-e4kWlXRaR4WJZmt6Wt2g），这个文件和html文件放一块
<!-- 引入 vue.js --> <script src="vue.js"></script>2) 创建Vue对象
var vue = new Vue({ el: 视图对应的标签 data: 模型数据 methods:{ 方法1：function(){}, 方法2：funciton(){}, ... } });3) 展示模型数据
两标签之间的普通文字，要从模型中获取数据，语法使用 {{模型数据的名称}}
标签的属性需要从模型中获取值：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>当模型数据发现变化，那么视图也会跟着变动(这也叫被重新渲染(render) )
1) v-for 用来遍历一个集合
v-for="(临时变量名,下标变量) in 集合名" 其中下标变量从0开始
2) 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>3) v-show
用来进行条件判断，当条件成立（true），把此标签显示出来，如果条件不成立（false），会把此标签隐藏起来
如：v-show="hasError" ， hasError:false，所以会把此标签隐藏起来
注：这和 v-if 虽然都是可以判断之后让某些东西不显现，但是它们两个还是有 不同之处，v-if 只要不满足条件就不会生成 html 代码，而 v-show 则是生成了 html 代码，只是隐藏了而已。
7) 事件处理
传统方式处理事件，事件名称="函数()" ，如以下
<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)">，没有参数就直接写方法名。
8) 双向绑定 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>结果
从上图结果看出，如果不在el：id名 指定的id名的范围内用{{}}符号去取数据，就直接输出{{数据名}}，也就是取不到数据，这一点要注意哟。
2、v-for="(临时变量名,index) in 集合名" 的使用
<html lang="en">
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>武力</th>
<th>图片</th>
</tr>
</thead>
<tbody>
<!-- v-for="(临时变量名,index) in 集合名" index 表示下标，从0开始-->
<tr v-for="(h,index) in list">
<td>{{index+1}}</td>
<td>{{h.name}}</td>
<td>{{h.power}}</td>
<td><img style="width:80px;" v-bind:src="h.photo"/></td>
</tr>
</tbody>
</table>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
list: [
{name:"关羽", photo:"3_1.bmp", power:98},
{name:"张飞", photo:"2_1.bmp", power:99},
{name:"吕布", photo:"4_1.bmp", power:100},
{name:"赵云", photo:"10_1.bmp", power:97}
]
}
});
</script>
</body>
</html>结果
3、vue从数据库中取数据（这个例子要在存放html的包下，放入 axios.min.js 文件，下载地址：https://pan.baidu.com/s/1ZcP3iY3dFIVHwmVLZC_kJg）
储存数据
public class Hero {
private int id;
private String name;
private String sex;
private String photo;
@Override
public String toString() {
return "Hero{" +
"id=" + id +
", name=‘" + name + ‘\‘‘ +
", sex=‘" + sex + ‘\‘‘ +
", photo=‘" + photo + ‘\‘‘ +
‘}‘;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getPhoto() {
return photo;
}
public void setPhoto(String photo) {
this.photo = photo;
}
}搜索数据
import com.westos.domain.Hero;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface HeroDao {
//搜索数据库中的数据
@Select("select * from hero2 limit #{m}, #{n}")
public List<Hero> findByPage(@Param("m") int m, @Param("n") int n);
}定义接口，到时可从接口去调用实现类
import com.westos.domain.Hero;
import java.util.List;
public interface HeroService {
public List<Hero> findByPage(int page,int row);
}实现接口
import com.westos.dao.HeroDao;
import com.westos.domain.Hero;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
//交给容器管理
@Service
//实现接口
public class HeroServiceImpl implements HeroService {
//注入依赖
@Autowired
private HeroDao heroDao;
@Override
public List<Hero> findByPage(int page ,int row) {
return heroDao.findByPage(row*(page-1),row);
}
}控制类
import com.westos.domain.Hero;
import com.westos.service.HeroService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Controller
public class HeroController {
@Autowired
private HeroService heroService;
@RequestMapping("/hero/findByPage")
@ResponseBody
//@RequestParam 表示默认值
public List<Hero> findByPage(@RequestParam(defaultValue = "1") int page,@RequestParam(defaultValue = "5") int row){
return heroService.findByPage(page,row);
}
}html
<!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>
<script src="vue.js"></script>
<!--引入 axios.min.js 使用这个可以代替之前ajax代码，实现它的功能-->
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1" width="100%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>性别</th>
<th>头像</th>
</tr>
</thead>
<tbody>
<tr v-for="(h,index) in list">
<td>{{h.id}}</td>
<td>{{h.name}}</td>
<!--以下两种方法都可以判断男女，0为男，1为女，第二种方法比较灵活，可以写很多种判断在调用的方法里-->
<td>{{ (h.sex==0)?"男":"女" }}</td>
<td>{{ convertSex(h.sex) }}</td>
<!--src 后面是图片的请求地址-->
<td><img style="width:80px;" :src="‘http://localhost:8080/image/‘ + h.photo + ‘-1.bmp‘"></td>
</tr>
</tbody>
</table>
</div>
<script>
var vue = new Vue({
el:"#app",
data: {
//虽然是空的但是连接数据库后，这里就填入了属性名，在上面取值时，用这些属性名就好了
list:[] /*必须有一个初始的属性*/
},
methods: {
convertSex:function(sex) { // 把 0/1 转换为 男和女
if(sex == 0) {
return "男";
} else {
return "女";
}
},
//调用这个方法可以生成json字符串，这样页面上就可以显示这些数据了
findHero: function() {
axios.request({
url:"http://localhost:8080/hero/findByPage",
method:"get"
}).then(function(response){
vue.list = response.data;
});
}
}
});
// 使用最底层的 api 与服务器交互，这些代码都可以被上面的 axios 引出的代码替代
/*
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var array = JSON.parse(xhr.responseText);
vue.list = array;
}
xhr.open("get", "http://localhost:8080/hero/findByPage", true);
xhr.send();
*/
// 响应返回时会触发 then 中的函数调用，函数的参数是服务器返回的json结果
vue.findHero();
</script>
</body>
</html>结果
有有两张图没有，请见谅，从这个例子总可以看到一个新方法，引入 <script src="axios.min.js"></script> 可以代替以前的 ajax 代码，作用都是相同的，使代码变简洁了。
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue是一套构建用户界面的框架。在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。简单说就是对于vue中你不熟悉不太把握的模块或者功能，你可以不用它，或者你可以用你熟悉有把握的技术进行代替 。这样子看来是不是感觉很友好，相对于其他框架硬要求很少了，你可以逐渐性的使用框架。
为了实现前后端分离的开发理念，开发前端 SPA（single page web application） 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。
Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。
概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。
其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。
Vue.js的特性如下：
1.轻量级的框架（相对而言）
2.双向数据绑定
3.指令
4.插件化
优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。（国内框架，demo，文档多）
2. 快速：异步批处理方式更新 DOM。（同时进行）
3. 组合：用解耦的、可复用的组件组合你的应用程序。（功能由不同的单个功能组件构成）
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点： 1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大。
3. 不支持IE8。
4. 无成名库。
1、在即将创建项目的文件下按 shift+右键，点击打开命令窗口
2、在命令窗口中依次输入：
1) 全局安装 vue-cli
npm install –global vue-cli
2) 创建一个基于 webpack 模板的新项目
vue init webpack my-project
步骤如下：
3) 安装依赖
cd my-project(项目名称）
4) 安装 npm
npm install
全局安装 cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org
在创建好的项目下运行npm
Model 模型 - 数据
View 视图 - html 标签，样式
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上
vue中的数据和页面上标签内容是’绑定’在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为响应式框架。
例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 由两个{{}}占位，到模型中找相应的数据, 匹配的是模型数据的属性名称 -->
<div id="app">{{name}}</div>
<script>
// 每个页面要创建一个Vue对象（
var vue = new Vue({
// el 把数据和视图结合在一起，视图会在此处寻找对应的标签
el:"#app"
// 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
data: {
name: "hello, world"
},
});
</script>
</body>
</html>注意：
1. 绑定时，要把一个统一的父标签与Vue对象进行绑定
2. 不要把Vue对象和html或body标签绑定，建议和一个div标签绑定
可以在{{}}中进行简单的计算，一般情况下计算由计算属性完成，更合理
<div id="app">
<!--由计算属性完成-->
<p>{{nameReverse}}</p>
<!--简单计算也可以在{{}}中完成 -->
<p>{{age+1}}</p>
<div>
<span>{{sex}}</span>
</div>
</div>
<script>
// 每个页面要创建一个Vue对象
var vue = new Vue({
el:"#app",
computed: {
/* 计算属性*/
nameReverse : function(){
// this 代表vue对象
return this.name.split("").reverse().join("");
}
}
});
</script><div id="app">
<!-- 循环指令 v-for -->
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
list:[
{name:"商品1", price:3000.00, img:"图片名1.jpg"},
{name:"商品2", price:4000.00, img:"图片名2.jpg"},
{name:"商品3", price:2000.00, img:"图片名3.jpg"}
]
}
});
</script>条件成立，在视图上就显示此标签，否则视图上不会有这个标签
<div id="app">
<!-- 指令 循环指令 v-for -->
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
<table border="1" width="100%" v-if="list.length>0">
<tbody>
<!-- p代表数组中第i个元素，i是下标值-->
<tr v-for="(p,i) in list">
<td>{{i+1}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<td>{{p.img}}</td>
</tr>
</tbody>
</table>
<span v-else>暂无商品</span>
</div>v-show 指令 根据条件决定表示是否显示，
与v-if的区别在于，条件不成立时，标签根本不会出现
v-show是条件不成立时，隐藏了标签
v-show不能配合v-else 使用
要实现标签属性的绑定，必须使用v-bind 指令
<table border="1" width="100%" v-show="list.length>0">
<tbody>
<!-- p代表数组中第i个元素，i是下标值-->
<tr v-for="(p,i) in list">
<td>{{i+1}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
<!-- {{}} 语法只能用来占位内容，不能作为标签的属性(特性)
要绑定标签的属性，需要使用 v-bind:属性名="变量"
简化写法(省略了v-bind)：
:属性名="变量"
-->
<td><img width="110" v-bind:src=" ‘images/‘ + p.img" :title="p.title"></td>
<td><img width="110" :src=" ‘images/‘ + p.img"></td>
</tr>
</tbody>
</table><div id="app">
<!-- 格式： v-on:事件名
简化写法： @事件名
还可以实现参数传递
-->
<input type="button" value="点我" v-on:click="abc(50)">
<input type="button" value="点我" @click="abc(100)">
</div>
<script>
var vue = new Vue({
el:"#app",
data: {
},
methods: {
abc: function(i){
console.log("点击了按钮", i);
}
}
});
</script>v-bind:属性名 只能实现单向的绑定：模型的修改能够立刻反应到视图，但视图的修改不能影响模型
v-model:属性名 能够实现双向绑定：不仅有v-bind的功能，而且视图的修改也能影响模型了
标签：UNC pptv 新项目 key 情况 lob 特性 title button
原文地址：https://www.cnblogs.com/wasbg/p/11116766.html
