vue（vue.js） 框架 介绍及简单应用

前端框架介绍

老牌

• jquery -> 更简单的方式去操作 dom 对象（标签对象）
• extjs  -> 更适合做后台管理系统
• easyui -> 模仿了 extjs 免费

新式

• vue 国内开源的js框架
• argularjs 国外js框架

他们都提倡前后台分离，下面是对前后台分离的解释：

传统的后台开发人员，需要做一下步骤：
controller -> jsp， service， dao -> 页面展示部分，需要用jsp等技术负责数据展示

前后台分离之后，后台开发人员，需要做一下步骤：
service, dao  -> 负责准备模型数据即可

前台开发人员，负责页面之间的跳转、从后台获取模型数据，展示数据

VUE

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) )

vue的一些常用指令

1) v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名"          其中下标变量从0开始

2) v-if

用来进行条件判断，当条件成立，才会渲染视图，如果条件不成立，不会生成html代码

例子如下，因为hasError后面是false，所以不会输出用户名不正确这