11-SpringBoot2整合Vue最简入门

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 >
    <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 >

    {{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>