20220721_Vue框架基本语法的代码存档

最新推荐文章于 2023-11-24 11:40:15 发布

原创最新推荐文章于 2023-11-24 11:40:15 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #java #前端

JavaWeb 专栏收录该内容

32 篇文章

订阅专栏

本文通过五个HTML示例详细介绍了Vue.js的基本语法，包括v-model、v-bind:href、v-on:click、v-if/v-show指令及生命周期的mounted方法和v-for循环。每个示例都清晰展示了Vue特性在实际应用中的效果，帮助读者快速掌握Vue前端开发。

建一个maven模块如下图
在这里插入图片描述
在如图路径导入vue.js文件，可以去官网下载，一万多行，贴不了
pom.xml我复制之前的模块，在本例中很多坐标是用不着的，将就用吧

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>brand-demo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>


    <dependencies>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.10</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.29</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>

        <!--jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
        <!--JSON-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>2.0.7</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>

</project>

然后建第一个html

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div id="app">
    <input name="username" v-model="username">
    &lt;!&ndash;插值表达式&ndash;&gt;
    {{username}}
</div>-->

<div id="app">
    <input v-model="username">
    {{username}}
    <br>

    <input v-model="url">
    <!--<a v-bind:href="url">Click here</a>-->
    <a :href="url">Click here</a>
</div>

<script src="js/Vue.js"></script>

<script>
    //create vue core object
    new Vue({
        el:"#app",
        /*data:function (){
            return{
                username:""
            }
        }*/

        data:{ username:"",
                url : "https://www.google.com"
        }
    })
</script>
</body>
</html>

不用开tomcat，直接idea右上角选择浏览器打开
请添加图片描述

这段代码的效果是v-model和v-bind:href演示，网页第一行框内输入啥，旁边空白显示啥
第二行不输入，点击超链接跳转谷歌，输入任意地址，跳转任意地址，可以打开开发者工具看变化
请添加图片描述

第二个html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--<input type="button" value="aButton" v-on:click="show()">-->
    <input type="button" value="aButton" @click="show()">
</div>

<script src="js/Vue.js"></script>

<script>
    //create vue core object
    new Vue({
        el:"#app",

        data:{ username:"",
                url : "https://www.google.com"
        },

        methods:{
            show() {alert("I was clicked~~~")}
        }

    })
</script>
</body>
</html>

这段的效果是演示v-on:click指令，用了一个show方法，点击button会弹出一个提示框
请添加图片描述

第三个html

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

<div id="app">
    <span v-if="count == 3">span1</span>
    <span v-else-if="count == 4">span2</span>
    <span v-else>span3</span>
    <hr>
    <span v-show="count == 3">span v-show</span>
    <br>
    <input v-model="count">
</div>

<script src="js/Vue.js"></script>

<script>
    //create vue core object
    new Vue({
        el:"#app",

        data:{ username:"",
                url : "https://www.google.com",
                count:7
        },

        methods:{
            show() {alert("I was clicked~~~")}
        }

    })
</script>
</body>
</html>

这页是演示v-if和v-show指令，分别输入3，4，和任意数字看显示的文本变化
请添加图片描述

第四个html

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

<div id="app">
    <span v-for="addr in addrs">
        {{addr}}<br>
    </span>
    <hr>
    <span v-for="(addr,i) in addrs">
        {{i}}.){{addr}}<br>
    </span>
</div>

<script src="js/Vue.js"></script>

<script>
    //create vue core object
    new Vue({
        el:"#app",

        data:{ username:"",
                url : "https://www.google.com",
                count:7,
                addrs:["beijing","tianjin","xian"]
        },

        methods:{
            show() {alert("I was clicked~~~")}
        },

        /*mounted:function (){}*/
        mounted(){
            alert("load finished")
        }

    })
</script>
</body>
</html>

这段是演示生命周期的mounted方法，和v-for指令
请添加图片描述

第五个html

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

<div id="app">
    <span v-for="addr in addrs">
        {{addr}}<br>
    </span>
    <hr>
    <span v-for="(addr,i) in addrs">
        {{i}}.){{addr}}<br>
    </span>
</div>

<script src="js/Vue.js"></script>

<script>
    //create vue core object
    new Vue({
        el:"#app",

        data:{ username:"",
                url : "https://www.google.com",
                count:7,
                addrs:["beijing","tianjin","xian"]
        },

        methods:{
            show() {alert("I was clicked~~~")}
        }

    })
</script>
</body>
</html>