Vue前端框架的简单使用

最新推荐文章于 2024-04-04 21:17:47 发布

起个名字都给占用了

最新推荐文章于 2024-04-04 21:17:47 发布

阅读量224

点赞数

文章标签： vue node.js java spring jpa

本文链接：https://blog.csdn.net/qq_39979501/article/details/105434084

版权

目录篇
1.环境的搭建
2.vue的简单使用
对前端开发的简单介绍：
① 早期的网页以HTML为主，是纯静态的网页，网页是只读的，信息流只能从服务端到客户端单向流动，开发人员只关心页面的样式和内容
② 1995年，javascript诞生，我们可以操纵页面上的DOM元素以及样式，页面有了一些动态的效果，但是以静态为主；
③ ajax盛行
书写html页面，ajax与后端交互，通过js操作DOM元素实现页面动态效果，流行
框架jquery典型代表;
④ MVVM 关注模型和视图
M：即Model，模型，包括数据和一些业务逻辑操作
V：即View，视图，页面渲染结果
VM：即ViewModel，模型和视图之间的双向操作

1.环境搭建

我们所用的环境：node.js
2009年，在Chrome V8引擎的基础上，发布了基于事件循环的异步IO框架，Node.js即js运行的环境
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写
Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

vue也发布在npm上；

所以，我们在使用vue时，要先安装node.js，node.js自带NPM组件。

①在安装完node.js后，打开我们的dos窗口

1.检查node.js版本

node -v

2.检查npm版本

npm -v

3.安装切换镜像的工具nrm

npm install nrm -g

4.查看当前使用的镜像仓库

nrm ls

5.使用淘宝的镜像仓库

nrm use taobao

6.测试从仓库下载的速度

nrm test npm

到这里我们就完成基本的环境搭建，要完成下面的vue的简单练习需要下载idea，从网下下载即可。

2.vue的简单使用

1.创建一个空的项目，选择使用静态网页进行模块的搭建；
2.将新建的项目下拉到idea的terminal中

①进行npm的初始化，输入指令：

npm init -g

②安装vue
vue
npm install vue --save
bootstrap
npm install bootstrap@3.3.7 --save
jquery
npm install jquery@2.2.3 --save

这样我们就将vue挂载到了模块下，

创建html

1.视图模型的双向数据绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入vue库-->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

</head>
<body>

    <div id="d1" class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>vue测试</h4>
                </div>
            </div>
        <input type="text" v-model="msg"> <br>
        {{msg}}
        <br>
        <br>
          <!---->
            <!--v-on:绑定的是事件，也可以用@来代替-->
        <input type="button" v-on:click="add(1)" value="+">{{num}}
        <input type="button" @click="add(-1)" value="-">
        <br>
        <br>
        <!--1.v-text:只输出文本-->
        <span v-text="text"></span>
        <br>
        <!--v-html:解析html-->
        <span v-html="text"></span>
        <br>
        <br>
        你喜欢的水果是：<br>
        <!--数据双向绑定-->
        <input type="checkbox" v-model="fruit" value="香蕉"> 香蕉<br>
        <input type="checkbox" v-model="fruit" value="苹果"> 苹果<br>
        <input type="checkbox" v-model="fruit" value="梨">  梨<br>
        <input type="checkbox" v-model="fruit" value="火龙果"> 火龙果
        <br>
        你选择了：{{fruit}} <br>
          <!--1.阻止冒泡 .stop-->
        <div name="layer1" style="width: 400px;height: 400px;border: solid;border-color: blue;margin:auto;" @click="a()">
            <div name="layer2" style="width: 300px;height: 300px;border: solid;margin:auto;" @click.stop="b()">
                <div name="layer3" style="width: 200px;height: 200px;border: solid;margin:auto;" @click.stop="c()">

                </div>
            </div>
        </div>
        <br>
     
        按下空格键：<input v-on:keyup.13="a()">
        <br>
        按下空格键：<input @keyup.enter="b()">
        <br>
        按下ALT+C:<input @keyup.alt.c="a()">
        <br>
        按下ALT+C:<input @keyup.alt.67="a()">
        <br>
        按下ALT+C:<input @keyup.alt.C="a()">
        <br>
        ctrl+点击:<input @click.ctrl="b()">
        <div class="panel-body">
            <table class="table table-bordered table-striped table-hover">
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>颜色</td>
                    <td>价格</td>
                </tr>
                <tr v-for="(a,index) in list">
                    <td>{{index+1}}</td>
                    <td>{{a.name}}</td>
                    <td>{{a.color}}</td>
                    <td>{{a.price}}</td>
                </tr>
            </table>
        </div>
        </div>
    </div>
</body>
</html>
<script>
    var vs = new Vue({
        // 1.el 元素的名称
        el:'#d1',
        // 2.在这个元素内的数据
        data:{
            msg:'这是第一个vue模型',
            num:1,
            text:"<h1>欢迎使用vue前端框架</h1>",
            fruit:["香蕉"],
            list:[
                {name:'香蕉',price:12,color:'yellow'},
                {name:'苹果',price:12,color:'red'},
                {name:'梨',price:12,color:'green'}
            ]
        },
        // 3.方法
        methods:{
            add(x){
                this.num = this.num + x;
                if(this.num < 1){
                    this.num = 1;
                }
            },
            a(){
                alert("a");
            },
            b(){
                alert("b");
            },
            c(){
                alert("c");
            }
        },
        // 4.钩子函数
        created() {
            console.log("你好，这是一个创建时出现的函数");
            console.log(this);
        }


    })
</script>

vue的生命周期

在这里插入图片描述
事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件发生
.capture 使用事件捕获模式
.self 只有元素自身触发事件才执行
.once 只执行一次

按键修饰符

keyup 表示按下某个键
为常用的按键提供了别名
keyup.enter
全部的按键别名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

组合按键
.ctrl
.alt
.shift
例 @keyup.alt.enter

遍历数组

v-for

v-for  = "(item,index) in items"

v-if
让控件在页面中消失

v-show
将display的样式设为none

v-else
v-if 的其他情况，还有v-else-if

**v-bind **

这个主要是用来绑定class，样式
举一个错误的示范

<div class="{{isActive}}" ></div>

这种样式是识别不了的；
vue对class属性进行了特殊处理，可以接收数组或者对象格式

我们可以借助于v-bind来实现：

<div v-bind:class="isActive"></div>

data:{
	isActive:['active','hasError']
}

渲染后变成了

<div class="active hasError"></div>

我们的v-bind也可以和class属性一起用， 效果就相当于加上class
简写
v-bind:class可以简写为:class

计算属性

可以在new Vue()中添加一个新的属性，和methods同级；

computed:{
	value(){
		// 1.进行计算，计算完后返回
		return XXX;
	}
}

在页面中直接使用{{value}}即可，

watch属性

watch:{
	// 被监控的属性,第一个参数是新值，第二个参数为旧值
	message(newValue,oldValue){
		
	}
}

vue前端设计的一个小表（包括了分页查询，CRUD等）

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-helper">
            <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="title">
                    <h2>学生列表</h2>
                </div>
            </div>
            <div class="panel-body">
                <table class="table">
                    <td colspan="9" class="text-left">
                            <input type="button" class="btn btn-danger btn-sm" value="批量删除" @click="del()">
                            <input type="button" class="btn btn-info btn-sm" value="添加学生" @click="addUI()">
                    </td>
                    <tr>
                        <td>是否选中</td>
                        <td>序号</td>
                        <td>学号</td>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>年龄</td>
                        <td>住址</td>
                        <td>所在班级</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(stud,index) in students">
                        <td>
                            <input type="checkbox" :value="stud.sid" v-model="selectIds">
                        </td>
                        <td>{{index+1}}</td>
                        <td>{{stud.sid}}</td>
                        <td>{{stud.sname}}</td>
                        <td>{{stud.sex}}</td>
                        <td>{{stud.age}}</td>
                        <td>{{stud.addr}}</td>
                        <td>{{stud.classes.cname}}</td>
                        <td>
                            <input type="button" value="修改" @click="updateUI(stud)">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="9">
                            --{{entity}}
                            <form class="form-inline">
                                <div class="form-group">
                                    <label>姓名:</label>
                                    <input type="text" v-model="entity.sname" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>住址:</label>
                                    <input type="text" v-model="entity.addr" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>班级:</label>
                                    <select class="form-control"  v-model="entity.cid">
                                        <option value="0">所有班级</option>
                                        <option  v-for="c in classes" :value="c.cid">{{c.cname}}</option>
                                    </select>
                                </div>
                                <button @click="search(page)" class="btn btn-default">查询</button>
                            </form>
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li>
                                        <a href="#" @click="addPage(-1)" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li v-for="p in totalPages" :class="p == page ? 'active':''"><a href="#" @click="search(p)">{{p}}</a></li>
                                    <li>
                                        <a href="#" @click="addPage(1)" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="panel-footer text-right">
                vue+axios开发
            </div>
        </div>
        </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">学生信息</h4>
                </div>
                --{{studentEntity}}
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="studentEntity.sname" placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <!--<div class="radio">-->
                                <!--<label class="radio-inline">-->
                                    <!--<input type="radio" v-model="studentEntity.sex"> 男-->
                                <!--</label>-->
                                <!--<label class="radio-inline">-->
                                    <!--<input type="radio" v-model="studentEntity.sex"> 女-->
                                <!--</label>-->
                                <!--</div>-->
                                <div class="radio">
                                    <label>
                                        <input type="radio" v-model="studentEntity.sex" value="男">男
                                    </label>
                                    <label>
                                        <input type="radio" v-model="studentEntity.sex" value="女" >女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="studentEntity.age" placeholder="年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="studentEntity.addr" placeholder="地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <select v-model="studentEntity.cid" id="cid" class="form-control">
                                    <option v-for="c in classes" :value="c.cid">{{c.cname}}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="save()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    new  Vue({
        el:'.container',
        data:{
            students:[],
            classes:[],
            studentEntity:{},
            selectIds:[],
            entity:{cid:0},
            page: 1,
            pageSize: 3,
            totalPages: 0
        },
        // 当视图挂起完毕后，调用显示的方法
        mounted(){
            //this.findStudents();
            this.findClasses();
            //this.findPage(this.page,this.pageSize);
            this.search(this.page);
        },
        methods:{
            // 1.找到所有的学生列表
            findStudents(){
                axios.get("student/findAll").then(response=>{
                    this.selectIds = [];
                    this.students = response.data;
                })
            },
            // 2.找到所有的班级列表
            findClasses(){
                axios.get("classes/findAll").then(response=>{
                    this.classes = response.data;
                })
            },
            // 3.到更新页面
            updateUI(stud){
                // 1.显示出模态框
                $(".modal").modal("show");
                // 2.
                this.studentEntity = stud;
            },
            // 4.到添加页面
            addUI(){
                this.studentEntity = {};
                $(".modal").modal('show')
            },
            // 5.批量删除
            del(){
                axios.get("student/delete?ids="+ this.selectIds ).then(response=>{
                    if(response.data.success){
                        this.search(this.page);
                    }else{
                        alert(response.data.message);
                    }
                })
            },
            // 6.添加或修改
            save(){
                let url = "student/add";
                if(this.studentEntity.sid){
                    url = "student/update";
                }
                axios.post(url,this.studentEntity).then(response=>{
                    if(response.data.success){
                        this.search(this.page);
                    }else{
                        alert(response.data.message);
                    }
                    $(".modal").modal("hide");
                })
            },
            // 单纯分页的方法
            findPage(page,pageSize){
                axios.get("student/findPage?page="+page+"&pageSize="+pageSize).then(response=>{
                    this.selectIds = [];
                    this.students = response.data.rows;
                    this.totalPages = response.data.total;
                })
            },
            // 这里是分页导航栏左右两个箭头的方法
            addPage(v){
                let i = v + this.page;
                if(i < 1){
                    i = 1;
                    return;
                }
                if(i > this.totalPages){
                    i = this.totalPages;
                    return;
                }
                this.page = i;
                this.search(i);
            },
            // 分页查询
            search(p){
                axios.post("student/search?page="+p+"&pageSize="+this.pageSize,this.entity)
                    .then(response=>{
                        this.page = p;
                        this.selectIds = [];
                        this.students = response.data.rows;
                        this.totalPages = response.data.total;
                    })
            }
        }
    })
</script>

我们在其中引入了**Axios ，它是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。**就相当于在angularjs中的$http组件，用来发送请求。

安装axios

npm install axios --save

这个http库，我们可以到下面的网址去学习：

axios中文说明

这里我们只摘取一段后端比较复杂的代码。以供以后翻阅

 // 6.分页查询
    public PageResult search(int page, int pageSize, Student student) {
        // 1.构建分页参数
        Pageable pageable = PageRequest.of(page-1,pageSize);
        // 2.创建查询对象
        Specification<Student> spec = createSpecification(student);
        // 3.得到分页对象
        Page<Student> studentPage = studentDao.findAll(spec,pageable);
        // 4.返回封装对象
        return new PageResult(studentPage.getContent(),studentPage.getTotalPages());
    }
    // 创建一个查询条件
    private Specification<Student> createSpecification(Student student) {
        return new Specification<Student>() {
            @Override
            public Predicate toPredicate(Root<Student> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder cb) {
                // 1.定义查询对象集合
                List<Predicate> predicateList = new ArrayList<>();
                // 2.添加具体的查询条件
                if(student != null){
                    if(StringUtils.isNotBlank(student.getSname())){
                        System.out.println("打印姓名");
                        predicateList.add(cb.like(root.get("sname").as(String.class),"%" + student.getSname()+"%"));
                    }
                    if(StringUtils.isNotBlank(student.getAddr())){
                        System.out.println("打印地址");
                        predicateList.add(cb.like(root.get("addr").as(String.class),"%" + student.getAddr() + "%"));
                    }
                    if(student.getCid() != 0){
                        System.out.println("打印班级");
                        predicateList.add(cb.equal(root.get("cid").as(int.class),student.getCid()));
                    }
                }
                // 3.根据集合大小定义数据
                Predicate[] arr = new Predicate[predicateList.size()];
                // 4.将集合中的数据放入空数组中
                Predicate[] predicates = predicateList.toArray(arr);
                // 5.返回
                return cb.and(predicates);
            }
        };
    }