Vue学习笔记

学习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){ })

注意事项⚠️

  1. axios 回调函数中的this已经改变,无法访问data中的值。需要先使用that=thisthis保存起来!

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>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页