简单vue入门

最新推荐文章于 2024-07-26 20:46:33 发布

00后小白

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量240

点赞数

文章标签： javascript vue java spring boot

本文链接：https://blog.csdn.net/Dem0_0/article/details/123078982

版权

引入vue

v-model

绑定data中的username
{{key}}直接输出值

 <input name = "username" v-model = "username">
    {{username}}

在这里插入图片描述

v-bind

两种写法，绑定data中url使用

<a v-bind:href = "url">dianji</a>
<a :href = "url">dianji</a>

v-if

跟data中count比较 true 显示false不显示
配合input v-model修改count的值

  <div v-if="count ==3 ">div1</div>
    <div v-else-if="count == 4" >div2</div>
    <div v-else>div3</div>
    <div v-if="count < 4 ">div4</div>
    <div v-if="count!= 4 ">div5</div>
    <div v-show="count == 2">v- show</div>
    <input v-model="count" >

在这里插入图片描述

v-on

 <input type="button"  v-on:click="show()" value="点击事件"><br>
    <input type="button"  @click="show()" value="点击事件">

在这里插入图片描述

v-for

索引

 <table>
        <tr v-for="(stus,i) in stus" align="center">
            <td>{{i+1}}</td>
            <td>{{stus.id}}</td>
            <td> {{stus.name}}}</td>
            <td> {{stus.age}}}</td>
            <td> {{stus.address}}}</td>
        </tr>
    </table>



    <table>
        <tr v-for="stus in stus" align="center">

            <td>{{stus.id}}</td>
            <td> {{stus.name}}}</td>
            <td> {{stus.age}}}</td>
            <td> {{stus.address}}}</td>
        </tr>
    </table>

在这里插入图片描述

script具体代码

<script src="../js/axios-0.18.0.js"></script>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
//         data(){
//             return {
//                 username:""
// ,                url:"http://www.baidu.com"
//                 ,addrs:["beijing","shanghai","guangzhou"]
//             }
//         },

        data:{
            username:"",
            url:"http://www.baidu.com",
            addrs:["beijing","shanghai","guangzhou"],
            count:2,
            stus:[]
        },

		//生命周期,自动调用这个
        created() {
            this.getAll();
        },

        methods:{
            //写着简便，axios异步请求
            getAll(){
                axios.get("/students").then((res)=>{
                    this.stus = res.data.data
                })
            },

            // getAll(){
            //     axios({
            //         method:"get",
            //         url: "http://localhost/students"
            //     }).then((res)=>{
            //         console.log(res.data)
            //         this.stus = res.data.data;
            //     })
            //
            //
            //
            // },

            show(){
                alert("点击事件");
            }
        }
    });



</script>