20220721

建一个maven模块如下图

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

    4.0.0

    org.example
    brand-demo
    1.0-SNAPSHOT

    war

    
        8
        8
    


    
        
            org.mybatis
            mybatis
            3.5.10
        
        
            mysql
            mysql-connector-java
            8.0.29
        
        
            javax.servlet
            javax.servlet-api
            4.0.1
            provided
        
        
            javax.servlet.jsp
            jsp-api
            2.2
            provided
        

        
        
            jstl
            jstl
            1.2
        
        
            taglibs
            standard
            1.1.2
        
        
        
            com.alibaba
            fastjson
            2.0.7
        

    

    
        
            
                org.apache.tomcat.maven
                tomcat7-maven-plugin
                2.2
            
        
    

然后建第一个html

    
    


{username}}
-->


    
    {{username}}
    


    
    
    Click here

不用开tomcat，直接idea右上角选择浏览器打开

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

第二个html

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

第三个html

    
    




    span1
    span2
    span3
    

    span v-show
    

    

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

第四个html

    
    




    
        {{addr}}

    
    

    
        {{i}}.){{addr}}

    

这段是演示生命周期的mounted方法，和v-for指令

第五个html

    
    




    
        {{addr}}

    
    

    
        {{i}}.){{addr}}