Vue快速入门实例

最新推荐文章于 2023-07-07 16:55:54 发布

Youmans_station

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量83

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_46071647/article/details/122354964

版权

单向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 插值表达式-->
        {{msg}}
    <div v-bind:style="msg">单向绑定</div>
    <div :style="msg">单向绑定</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'color:blue;'
            }
        })
    </script>
</body>
</html>

双向绑定

<div id="app">
        {{keyword}}
        <br/>
        <input type="text" :value="keyword"/>
        <br/>
        <input type="text" v-model="keyword"/>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword:'尚硅谷'
            }
        })
    </script>

事件绑定

<div id="app">
    <button v-on:click="show()">事件绑定1</button>
    <button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            show() {
                console.log("show.....")
            }
        }
    })
</script>

条件指令

<div id="app">
    <input type="checkbox" v-model="ok"/>
    <br/>
    <div v-if="ok">选中了</div>
    <div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok:false
        }
    })
</script>

循环遍历

<div id="app">
    <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
    <div v-for="(user,index) in userList">
    <!-- 带排序的遍历-->
        {{index}} -- {{user.name}} -- {{user.age}}
    </div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
          userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
        }
    })
</script>

生命周期
在这里插入图片描述

<div id="app">
    {{msg}}
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'hello'
        },
        created() { //在页面渲染之前执行
            debugger<!-- 断点-->
            console.log('created.....')
        },
        mounted() {//在页面渲染之后执行
            debugger
            console.log('mounted.....')
        }
    })
</script>

axios实例

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

2.4编写js
<div id="app">
    <table>
        <tr v-for="user in userList">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        created() { //在页面渲染之前执行
            //调用方法，得到返回json数据
            this.getList()
        },
        methods:{
            getList() {
                //使用axios方式ajax请求
                axios.get("user.json")
                    .then(response => {//请求成功
                        //console.log(response)
                        this.userList =  response.data.data.items
                        console.log(this.userList)
                    }) 
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            }
        }
    })
</script>

同一包中的数据

{
    "code":200,
    "message":"成功"
    ,"data":{
        "items":[
            {"name":"lucy","age":20},
            {"name":"mary","age":30},
            {"name":"jack","age":40}
    ]
    }
}

Youmans_station

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门实例

单向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
复制链接

扫一扫