随手记前端小知识，快速了解Vue的基础语法，网络请求库axios的基本使用

生成 HTML 文档初始结构HTML文档需要包含一些固定的标签，比如 doctype、html、head、body 以及 meta 等等，现在你只需要1秒钟就可以输入这些标签。比如输入 i 或html:5，然后按 Tab 键.input-num快速出现简单实例<div id="app">{{ message }}</div><script src="https://c

jun…

154人浏览 · 2021-07-06 17:06:45

jun… · 2021-07-06 17:06:45 发布

生成 HTML 文档初始结构

HTML文档需要包含一些固定的标签，比如 doctype、html、head、body 以及 meta 等等，现在你只需要1秒钟就可以输入这些标签。比如输入 i 或html:5，然后按 Tab 键

.input-num快速出现

vue简单实例

<div id="app">
    {{ message }}
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        // 挂载点 ，id选择器用# class选择器用. 
        // vue会管理el选中及其内部的元素
        // data里可以添加复杂数据
        el: '#app',   
        data: {
        message: 'Hello Vue!'
        }
    })
</script>

vue 指令

v-text: 这个指令不会解析标签，但是会替换标签里的所有文本
v-html：可以解析标签
v-on:一、后面的值是一个方法，为元素绑定数据，简写@，绑定的方法定义在methods属性中，方法内部通过this找数据简写@ v-on:click=“myclick” 二、事件的后面加上.修饰符就可以对事件进行限制 .enter的修饰为回车
v-show：切换元素显示状态（操控的是display）
v-if：根据表达式的真假，切换元素的显示隐藏（操纵dom元素）
v-bind：用于绑定数据和元素属性简写：
v-for：（item，index）in 数据
v-model：获取和设置表单元素的值（双向数据绑定）

计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问</title>
</head>
<body>
    <div id="app">
        <!--计数器 -->
        <div class="input-num">
            <button @click="add">+</button>
            <span>{{num}}</span>
            <button @click="sub">-</button>
        </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',   
            data: {
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++
                    }else{
                        alert("最大")
                    }       
                },
                sub:function(){
                    if(this.num>0){
                        this.num--
                    }else{
                        alert("最小")
                    } 
                },
            }
        })
    </script>
</body>
</html>

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问</title>
</head>
<body>
    <div id="app">
        <img :src="imgArr[index]" alt=""/>
        <a href="javascript:void(0)" v-show="index!=0" @click="perv">-</a>
        <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next">+</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',   
            data: {
                imgArr:["https://img0.baidu.com/it/u=1986451467,394304688&fm=26&fmt=auto&gp=0.jpg",
                "http://n.sinaimg.cn/news/crawl/167/w1080h687/20210311/4044-kmeeius6951805.jpg",
                "http://n.sinaimg.cn/news/crawl/117/w550h367/20210311/8edb-kmeeius6993674.jpg",
                "https://n.sinaimg.cn/news/transform/59/w550h309/20201029/e94e-kcaeqzy1088538.jpg",
            ],
                index:0
            },
            methods:{
               perv:function(){
                   this.index--
               },
               next:function(){
                   this.index++
               },
            }
        })
    </script>
</body>
</html>

增删，统计，清除，双向绑定的记事本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问</title>
</head>
<body>
    <section id="todoapp">
        <!-- 输入框 -->
        <header>
            <input type="text" v-model="inputvalue" @keyup.enter="add"
            autofocus="autofocus" placeholder="请输入任务" class="new-todo">
        </header>
        <!-- 列表区域 -->
        <section class="mian">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{index+1}}.</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)"></button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 ,还是一种展示数据的方式--> 
        <section class="footer">
            <span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong></span>
            <button class="clear-completed"  v-show="list.length!=0" @click="clear">Clear</button>
        </section> 
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#todoapp',   
            data:{
                list:['吃吃','喝喝','睡睡'],
                inputvalue:"玩"
            },
            methods:{
                add:function(){
                    this.list.push(this.inputvalue)
                },
                remove(index){
                    this.list.splice(index,1)
                },
                clear:function(){
                    this.list=[]
                }
            }
        })
    </script>
</body>
</html>

axios

axios在线地址 
<script src="https://unpck.com/axios/dist/axios.min.js">
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- axios在线地址 -->
    <!-- <script src="https://unpck.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
        // 获取文档中 id="demo" 的元素：
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            }),function(err){
                console.log(err);
            }
        }
        document.querySelector(".post").onclick=function(){
            axios.get("https://autumnfish.cn/api/user/reg",{username:"画虎"})
            .then(function(response){
                console.log(response);
            }),function(err){
                console.log(err);
            }
        }
    </script>
</body>
</html>

axios+vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getjoke">
        <p>{{joke}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                joke:"hhh"
            },
            methods:{
                getjoke:function(){
                    var that=this
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        console.log(response.data);
                        that.joke=response.data
                    }),function(err){
                        console.log(err);
                    }
                }
            }
        })
    </script>
</body>
</html>