Java --- Vue

最新推荐文章于 2024-03-10 22:43:05 发布

两袖清短丶

最新推荐文章于 2024-03-10 22:43:05 发布

阅读量801

点赞数 1

本文链接：https://blog.csdn.net/qq_38830201/article/details/98627786

版权

Vue是什么？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的特点：

易用
已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！
灵活
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
高效
超快虚拟 DOM 、最省心的优化

准备Vue

官网：https://cn.vuejs.org/
首先，我们要在官网上找到Vue，并且下载下来。在这里插入图片描述

下载好之后，我们解压压缩包即可
压缩好之后，我们需要的是vue.js和vue-resource.js

使用Vue

我们创建一个普通的Java项目，删除src目录，并且创建一个lib目录

我们将vue.js插件导入lib目录下，顺便导入bootstrap.css和animate.css，这两个css文件是用来渲染我们的html页面
创建一个Code目录，用来存放我们的html
这样我们在Code目录下创建html页面就可以使用我们的Vue

引入Vue

在Code目录下创建一个html，我们用script标签引入我们的vue.js

<script src="../lib/vue.js"></script>

仅仅是引入是不够的，我们还要使用vue，那就需要创建一个vue对象出来。

<script>

    var vm = new Vue({
        
        el:"#app",
        
        data:{
            
        },
        
        methods:{
            
        }


    })
</script>

el：用来指明Vue的挂载元素
data：是用来存放我们的数据
methods：是用来存放方法

插值表达式

插值表达式是用来获取我们在data里面存放的数据。

<div id="app">

    <p>{{msg}}</p>
</div>


<script src="../lib/vue.js"></script>
<script>

    var vm = new Vue({

        el:"#app",

        data:{
            msg:"Hello,Vue"
        },
    })
</script>

这样，我们Vue对象中的msg的数据就可以被取出来，但是这样做会导致有一个Bug，那就是闪烁，在网速慢的情况下，页面首先会出现{{msg}}，之后才会出现我们msg具体的值，这种现象我们称为闪烁。

闪烁解决办法：

v-cloak
v-cloak标签的本质是将我们的插值表达式{{msg}}隐藏起来，这样就不会出现网速慢先看见插值表达式的情况。但是如果网速慢，那么会出现白屏现象。

<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>

<div id="app">

    <p v-cloak>{{msg}}</p>
</div>


<script src="../lib/vue.js"></script>
<script>

    var vm = new Vue({

        el:"#app",

        data:{
            msg:"Hello,Vue"
        },
    })
</script>
</body>

v-text
v-text是直接用标签来显示我们的数据，它不使用插值表达式

<div id="app">
    <p v-text="msg"/>
</div>

这个方法体现了我们Vue的语义化标签的特点。

另外，我们还可以在data中写入Html语言，使用v-html标签，Vue能够自动解析，并且显示到页面上

<div id="app">
    <p v-html="msg2"/>
</div>
<script src="../lib/vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            msg2:"<h1>Hello,vue</h1>"
        },
    })
</script>

v-bind v-on标签

v-bind是用来绑定我们在data中所写的数据，可以通过v-bind:标签将值取出来放在输入框中，v-bind标签也可以用英文的冒号 : 表示。

<div id="app">

    <input type="text" name="username" v-bind:value="msg"/> </br>

    <input type="text" name="username" :value="msg"> <br>

    <input type="text" name="username" :value="msg+'你好'">  <br>
</div>

当然，我们还可以在取出的值后面加上自己想要的字符串
在这里插入图片描述

v-on标签用来绑定一个事件，事件就是一个函数，写在methods中，v-on标签大多数用在绑定一个按钮上，和v-bind标签一样，v-on也可以用@符号代替。

    <div>
        <button v-on:click="f(name)">点击1</button>
        <button @click="f(name)">点击2</button>
    </div>

在这里插入图片描述

用Vue实现跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
</head>
<body>

<div id="app">
    <button @click="start()">start</button>
    <button @click="stop()">stop</button>
    <h3 v-html="info"></h3>
</div>
<script src="../lib/vue.js"></script>
<script>

    var vm = new Vue({

        el: "#app",
        data: {
            info: "感谢我不可以拥抱你的背影，所以才能变成你的背影",

            lightIntervalID: null
        },
        methods: {
            start: function () {
                if (this.lightIntervalID !== null) {
                    return;
                }
                var _this = this;
                this.lightIntervalID = setInterval(function () {
                    _this.info = _this.info.substring(1).concat(_this.info.charAt(0));
                }, 200);
            },
            stop() {
                clearInterval(this.lightIntervalID);
                this.lightIntervalID = null;
            }
        }
    });
</script>
</body>
</html>

用Vue实现简单的计算器功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="num1">
    <select v-model="pro">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="num2">
    <button @click="calc()">=</button>
    <span v-text="sum"></span>

</div>
<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({

        el:"#app",

        data:{
            num1:1,
            num2:1,
            pro:"+",
            sum:0
        },

        methods:{
            calc:function () {
                switch (this.pro) {
                    case "+":
                        this.sum = parseInt(this.num1)+parseInt(this.num2);
                        break;
                    case "-":
                        this.sum = parseInt(this.num1)-parseInt(this.num2);
                        break;
                    case "*":
                        this.sum = parseInt(this.num1)*parseInt(this.num2);
                        break;
                    case "/":
                        this.sum = parseInt(this.num1)/parseInt(this.num2)
                }
            }
            }
    })
</script>
</body>
</html>

两袖清短丶

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Java --- Vue

Vue是什么？Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue的特点：易用已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！...
复制链接

扫一扫