Java web(七):Vue&Element

文章目录

  • 一、Vue
    • 1.1 基本介绍
    • 1.2 常用指令
    • 1.3 生命周期
    • 1.4 案例Vue+Axios
  • 二、Element
  • 三、综合案例【Vue+Element+Axios+Servelt+Mybatis】


一、Vue

1.1 基本介绍

Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。
Java web(七):Vue&Element_第1张图片
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。
Java web(七):Vue&Element_第2张图片
vue的使用需要引入脚本 在webapp目录下建一个js/vue.js

1.2 常用指令

Java web(七):Vue&Element_第3张图片
演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">{{username}}<br>

    <a v-bind:href="url">演示v-bind:href</a><br>
    <a :href="url">也可以这么写</a><br>
    <input v-model="url"><br>

    <input type="button" value="演示v-on:click" v-on:click="show()"><br>
    <input type="button" value="演示v-on:click简写" @click="show()"><br>

    <div v-if="count==3">v-if</div>
    <div v-else-if="count==4">v-else-if</div>
    <div v-else="">v-else</div>
    <div v-show="count==3">v-show</div>
    <input v-model="count"><br>

    <div v-for="addr in addrs">{{addr}}<br></div>
    <div v-for="(addr,i) in addrs">{{i}}---{{addr}}<br></div>



</div>

</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        // el:用来指定哪儿些标签受 Vue 管理
        el: "#app",

        // data:用来定义数据模型
        data() {
            return {
                username: "演示v-model",
                url: "https://www.baidu.com",
                count: 4,
                addrs:["北京","天津"]
            }
        },

        // method:用来定义函数
        methods: {
            show() {
                alert("演示v-on:click")
            }
        },

        // mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。而以后我们会在该方法中发送异步请求,加载数据
        mounted:{

        }
    });
</script>
</html>

1.3 生命周期

Java web(七):Vue&Element_第4张图片

Java web(七):Vue&Element_第5张图片

1.4 案例Vue+Axios

brand.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<div id="app">
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td v-if="brand.status == 0">禁用</td>
            <td v-else-if="brand.status == 1">启用</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>


    </table>
</div>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted() {
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/selectAllServlet"
            }).then(function(resp){
                _this.brands=resp.data;
            })
        }
    });


</script>


</body>
</html>

addBrand.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<div id="app">
    <form action="" method="post">
        品牌名称:<input id="brandName" name="brandName" v-model="brand.brandName"><br>
        企业名称:<input id="companyName" name="companyName" v-model="brand.companyName"><br>
        排序:<input id="ordered" name="ordered" v-model="brand.ordered"><br>
        描述信息:<textarea rows="5" cols="20" id="description" name="description"
                           v-model="brand.description"></textarea><br>
        状态:
        <input type="radio" name="status" value="0" v-model="brand.status">禁用
        <input type="radio" name="status" value="1" v-model="brand.status">启用<br>

        <input type="button" id="btn" value="提交" @click="submitForm">
    </form>
</div>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        data(){
          return{
              brand:{}
          }
        },
        methods:{
            submitForm(){
                var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/vue-demo/addServlet",
                    data:_this.brand
                }).then(function (resp){
                    if(resp.data == "success"){
                        location.href="http://localhost:8080/vue-demo/brand.html"
                    }
                })
            }
        }
    });

</script>
</body>
</html>

二、Element

  1. 将资源 element-ui 文件夹直接拷贝到项目的 webapp 下
    Java web(七):Vue&Element_第6张图片

  2. 创建页面,并在页面引入Element 的css、js文件 和 Vue.js

<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  1. 创建Vue核心对象,Element 是基于 Vue 的,所以使用Element时必须要创建 Vue 对象
<script>
	new Vue({
		el:"#app"
	})
</script>
  1. 官网复制Element组件代码 https://element.eleme.io/

三、综合案例【Vue+Element+Axios+Servelt+Mybatis】

你可能感兴趣的:(Java,web,前端,java,vue.js)