Vue学习笔记

最新推荐文章于 2022-09-21 12:03:31 发布

xianyuLuo.

最新推荐文章于 2022-09-21 12:03:31 发布

阅读量116

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/Free_time_/article/details/107754176

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习Vue之前

学习之前要先了解以下概念

HTML
css
Javascript
Ajax

Vue特点

Javascript 框架
简化Dom操作
响应式数据驱动

Vue概念

el挂在点
data数据
事件修饰符，如@keyup.enter（当按下键盘回车键时）

vue实例的作用范围是什么？
Vue会管理el熟悉命中的元素，及其内部的子元素（html和body标签除外）

Vue网络请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios

get请求
axios.get("utl").then(function(response){ }, function(err){ })

post请求
axios.post("url", {args: "xxx"}).then(function(response){ }, function(err){ })

注意事项⚠️

axios 回调函数中的this已经改变，无法访问data中的值。需要先使用that=this将this保存起来！

get和post方法基本使用

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>axios使用</title>
</head>

<body>
    <input type="button" value="get请求" id="get">
    <input type="button" value="post请求" id="post">

    <!--官网提供的 axios cdn地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1：随机笑话
            地址：https://autumnfish.cn/api/joke/list
            方法：get
            参数：num（表示笑话条数）
            响应内容：随机笑话
        */
        document.querySelector("#get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=4").then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

        /*
            接口2：用户注册
            地址：https://autumnfish.cn/api/user/reg
            方法：post
            参数：username（用户名，字符串）
            响应内容：注册结果成功或者失败
        */
        document.querySelector("#post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg", {username: "德国后卫"}).then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>
</body>
</html>

vue中使用axios

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>axios使用</title>
</head>

<body>
    <div id="joke">
        <input type="button" value="讲个笑话吧" @click="getJoke">
        <p>
            {{ jokes }}
        </p>
    </div>
    
    <!--官网提供的 axios cdn地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口1：随机笑话
            地址：https://autumnfish.cn/api/joke
            方法：get
            响应内容：1条随机笑话
        */
        var app = new Vue({
            el: "#joke",
            data: {
                jokes: "哈哈哈，真好笑😂"
            },
            methods: {
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        console.log(response.data);
                        that.jokes = response.data;
                    },function(err){
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>
</html>

Vue指令

指令	功能
`v-text`	设置匹配标签的文本！
`v-html`	设置所选标签的`innerHTML`
`v-on`	为元素绑定事件
`v-show`	根据表达式的真假，让元素显示或者隐藏
`v-if`	根据表达式的真假来切换元素的显示/隐藏（直接操作DOM元素）。表现出来和`v-show`效果一致，只是底层原理不一样，`v-show`操作样式，`v-if`操作DOM元素
`v-bind`	设置元素的属性（比如：src、title、class）
`v-for`	根据数据生成列表结构
`v-model`	双向绑定表单元素

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

v-text
设置匹配标签的文本！

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue-data基础</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="info"></h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello !",
                info: "V-text指令"
            }
        })
    </script>
</body>
</html>

v-html
设置所选标签的innerHTML

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue-data基础</title>
</head>

<body>
    <div id="app">
        <h2 v-text="content"></h2>
        <h2 v-html="content"></h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='http://www.qq.com'>你好腾讯！</a>"
            }
        })
    </script>
</body>
</html>

v-on
为元素绑定事件

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>v-on事件</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on事件1" v-on:click="doit">
        <input type="button" value="v-on事件2" @click="doit">
        <h2 @click="changefood">{{ food }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "水煮牛肉！"
            },
            methods: {
                doit:function(){
                    alert("Just do it")
                },
                changefood:function(){
                    this.food+="nice!"
                }
            }
        })
    </script>
</body>
</html>

v-show
根据表达式的真假，让元素显示或者隐藏

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-show</title>
</head>

<body>
    <div id="app">
        <h2 v-show="isShow">Hello!</h2>
        <input type="button" value="显示/隐藏" @click="changeIsShow">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow: false
            },
            methods: {
                changeIsShow:function(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>

v-if
根据表达式的真假来切换元素的显示/隐藏（直接操作DOM元素）。表现出来和v-show效果一致，只是底层原理不一样，v-show操作样式，v-if操作DOM元素

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-show</title>
</head>

<body>
    <div id="app">
        <h2 v-if="isShow">Hello!</h2>
        <input type="button" value="显示/隐藏" @click="changeIsShow">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow: false
            },
            methods: {
                changeIsShow:function(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>

v-bind
设置元素的属性（比如：src、title、class）

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-show</title>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!--
        v-bind: 设置元素的属性（比如：src、title、class）

        :class="{active:isClass}"含义：active样式是否生效，取决于isClass的值是否为真
    -->
    <div id="app">
        <img v-bind:src="imgSrc" v-bind:title="imgTitle">
        <br>
        <img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isClass}" @click="changeClass">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc: "https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png",
                imgTitle: "Vue学习笔记",
                isClass: false
            },
            methods: {
                changeClass:function(){
                    this.isClass = !this.isClass
                }
            }
        })
    </script>
</body>
</html>

v-for
根据数据生成列表结构

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-for</title>
</head>

<body>
    <!--
        v-for: 根据数据生成列表结构
    -->
    <div id="app">
        <ul>
            <li v-for="item,index in arr">{{ index+1 }}: {{ item }}</li>
        </ul>
        <h4 v-for="item in objArr">
            {{ item.name }}
        </h4>
        <input type="button" value="加菜" @click="add">
        <input type="button" value="减菜" @click="remove">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "深圳", "广州"],
                objArr: [
                    {name: "红烧牛肉"},
                    {name: "番茄炒蛋"}
                ]
            },
            methods: {
                add:function(){
                    this.objArr.push({name: "梅菜扣肉!"});
                },
                remove:function(){
                    this.objArr.shift();
                }
            }
        })
    </script>
</body>
</html>

v-model
双向绑定表单元素

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-model</title>
</head>

<body>
    <!--
        v-model: 获取和设置表单元素的值。为双向绑定！
    -->
    <div id="app">
        <input type="text" v-model="message">
        <input type="button" value="设置message" @click="setM">
        <h2>
            {{ message }}
        </h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hi Nginx!"
            },
            methods: {
                setM:function(){
                    this.message = "Hi Kubernetes!"
                }
            }
        })
    </script>
</body>
</html>