登录
当前位置： 首页 > 工具软件 > JavaWeb_Vue_Pro > 使用案例 >

14_JavaWeb——Vue

马阳晖
2023-12-01

Vue

Vue概述

  • Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
  • 官网：https://cn.vuejs.org/

MVC：只能实现模型到视图的单向展示
MVVM：可以实现数据的双向绑定

Vue快速入门

  1. 新建HTML页面，引入Vue.js文件
  2. 在JS代码区域，创建Vue核心对象，进行数据绑定
  3. 编写视图
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--3-->
<div id="app">
    <input name="username" v-model="username">
    <!--插值表达式-->
    {{username }}
</div>
<!--1-->
<script src="js/vue.js"></script>
<script>
    //2
    new Vue({
        //选择器
        el:"#app",
        //数据
        data(){
            return{
                username:""
            }
        }
    });
</script>
</body>
</html>

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。
常用指令

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true则渲染，判定为false则不渲染
v-else条件性的渲染某元素，判定为true则渲染，判定为false则不渲染
v-else-if条件性的渲染某元素，判定为true则渲染，判定为false则不渲染
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

v-bind

<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <!--简化书写-->
    <a :href="url">点击一下</a>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"http://www.baidu.com"
            }
        }
    });
</script>
</body>

v-model

<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <!--简化书写-->
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"http://www.baidu.com"
            }
        }
    });
</script>
</body>

v-on

<body>
<div id="app">
    <input type="button" value="btn" v-on:click="show()">
    <!--简化书写-->
    <input type="button" value="btn" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("clicked");
            }
        }
    });
</script>
</body>

v-if & v-else-if & v-else

<body>
<div id="app">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                count:3
            }
        }
    });
</script>
</body>

v-show

<body>
<div id="app">
    <div v-show="count==3">div v-show</div>
    <input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                count:3
            }
        }
    });
</script>
</body>

v-for

<body>
<div id="app">
    <div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    <!--加索引-->
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}}<br>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                addrs:["beijing", "shanghai", "jinagsu"]
            }
        }
    });
</script>
</body>

Vue生命周期

  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
    状态阶段周期
    beforeCreate创建前
    created创建后
    beforeMount载入前
    mounted挂载完成
    beforeUpdate更新前
    updated更新后
    beforeDestroy销毁前
    destroyed销毁后
  • mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
    • 发送异步请求
<!--使用方法-->
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        mounted:function(){
            alert("vue挂载完毕");
        },
        //简化书写
        mounted(){
            alert("vue挂载完毕");
        }
    });
</script>

案例

使用Vue简化品牌列表数据查询和添加功能

<!--brand.html-->
<body>
    <div id="app">
        <input type="button" value="add" id="add"><br>
        <table border="1" cellspacing="0" width="800" id="brandTable">
            <tr>
                <th>ID</th>
                <th>品牌</th>
                <th>公司</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!--遍历，使用v-for-->
            <tr v-for="(brand,i) in brands" align="center">
                <td>{{i + 1}}</td>
                <td>{{brand.brandName}}</td>
                <td>{{brand.companyName}}</td>
                <td>{{brand.statusStr}}</td>
                <td><a href="#">编辑</a> <a href="#">删除</a></td>
            </tr>
        </table>
    </div>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    brands:[]
                }
            },
            mounted(){
                //页面加载完成后，发送异步请求，查询数据
                //提取Vue的this对象
                var _this = this;
                axios({
                    method:'get',
                    url:'http://localhost:8080/Demo7/selectAllServlet'
                }).then(function (response){
                    //this.brands = response.data;  此处的this是axios的this对象
                    _this.brands = response.data;
                })

            }
        })
    </script>
    <script>
        document.getElementById("add").onclick = function () {
            window.location.href = "/Demo7/addBrand.html";
        }
    </script>
</body>

<!--addBrand.html-->
<body>
    <div id="app">
        <h3>添加品牌</h3>
        <form action="/Demo7/addServlet" method="post">
            brandName:<input type="text" name="brandName" id="brandName" v-model="brand.brandName"/><br>
            companyName:<input type="text" name="companyName" id="companyName" v-model="brand.companyName"/><br>
            status:
            <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="submit" value="提交" @click="submitForm" id="btn"/>
        </form>
    </div>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    brand:{}
                }
            },
            methods:{
                submitForm(){
                    //发送ajax请求
                    var _this = this;
                    axios({
                        method:"post",
                        url:"http://localhost:8080/Demo7/addServlet",
                        data:_this.brand
                    }).then(function (response){
                        if(response.data == "success"){
                            location.href = "http://localhost:8080/Demo7/brand.html";
                        }
                    })
                }
            }
        })
    </script>
</body>

案例资源

Element

Element：基于Vue的网站组件库，用于快速构建网页
组件：组成网页的部件，例如：超链接、按钮、图片、表格等
官网：https://element.eleme.cn/#/zh-CN

Element快速入门

1. 引入Element的css、js文件和Vue.js

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2. 创建Vue核心对象

<script>
    new Vue({
        el:"#app"
    })
</script>

3. 官网复制Element组件代码

<div id="app">
    <el-button type="danger">危险按钮</el-button>
</div>

Element布局

1. Layout布局

通过基础的24分栏，迅速简便地创建布局

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app"
    })
</script>
</body>

2. Container布局

用于布局地容器组件，方便快速搭建页面的基本结构

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>
            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
</body>

Element组件

在Element官网上找需要的组件，加以修改便可使用。

具体使用详见综合案例

 类似资料：

相关阅读

vue2 v-model/v-text 中使用过滤器的方法示例Redux和vuex有什么区别？如何在Vue.js中使用/ deep /或>>>？设置Vuetify选择器的样式单击Vue.js切换类

相关文章

Vue.js 过渡 & 动画Vue.js 路由Vue.js 自定义指令Vue.js 组件 - 自定义事件Vue.js 组件

相关问答

Vue&quasar：如何读取quasar项目之外的文件(zip)如何从文件加载json，并在VUE中将其设置为全局变量？在vue组件中导入laravel中的json文件如何在VueJS上允许请求头字段access-control-allow-origin如何解释Vue.js中console.log（）的这种奇怪行为呢？[副本]

相关文档

Vue 2.0 中文文档Electron-vue 中文文档Vuex 中文教程Vue.js 教程Vue 入门教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.