11-SpringBoot2整合Vue最简入门

最新推荐文章于 2024-07-26 19:50:42 发布

原创最新推荐文章于 2024-07-26 19:50:42 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

SpringBoot2.X整合专栏收录该内容

21 篇文章

订阅专栏

本文介绍了VueJS的基本入门步骤，包括环境搭建、数据绑定和事件处理。通过示例展示了如何创建Vue对象，设置数据和方法，并利用`v-if`和`v-show`进行条件渲染。此外，还演示了如何修改数据并实时更新视图。

vuejs入门

环境搭建

在这里插入图片描述
》1：导入文件

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

》2：准备 app视图

<!--        1,使用div-->
<div id="app">
    <h1>单向绑定：就是取值</h1>
    {{name}}
    {{url}}
    <br/> <a v-bind:href="url">百度一下</a>
    <br/> <a :href="url">百度一下</a>
    <br/>  <input type="text" v-bind:value="name" >
    <h2>双向绑定：可以取值也可以赋值</h2>
    <br/>  <input type="text" v-model:value="name" >
    <br/>  <button v-on:click='show1' >点我试试44</button>
    <br/>  <button @click="show2($event,10)">点我试试44444</button>
</div>

》3：创建Vue对象

<!--2创建vue对象 -->
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: { //1，保存页面的数据  2，将后台数据保存
            name:'hello',
            url:'https://www.baidu.com'
        },
        methods:{
            show1:function(){
                alert('show1')
            },
            show2:function(event,num){
                alert('show2')
                console.log(event)
                console.log(num)
            }
        }
    })
</script>

重点在
（1）el指定作用范围
（2）data为视图显示的数据
（3）methods为可调用的js方法

示例：

src\main\resources\static\demo02vif.html
》1：导入

 <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

》2：准备视图

<!--        1,使用div-->
<div id="app">

    {{n}}
    <br/>  <button @click="change()">修改n</button>

<!--    1显示按钮  1  2 显示按钮2  3 显示其他-->
<!--    <br/>  <button v-if="n == 1" >按钮1</button>-->
<!--    <br/>  <button v-if="n == 2">按钮2</button>-->
<!--    <br/>  <button v-if="n == 3">其他</button>-->

<!--    <br/>  <button v-if="n == 1" >按钮1</button>-->
<!--    <br/>  <button v-else-if="n == 2">按钮2</button>-->
<!--    <br/>  <button v-else>其他</button>-->
    <br/>  <button v-show="n == 1" >按钮1</button>
    <br/>  <button v-show="n == 2" >按钮1</button>
    <br/>  <button v-show="n == 3" >按钮1</button>
</div>

》3：编写vue的data，methods


<!--2创建vue对象 -->
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            n:0
        },
        methods:{
            change:function(){
                //this.n ++
                vue.n ++
            }
        }
    })
</script>