2021-04-07

Vue入门

 

文章目录

• 目录

  一、基础

  二、一些指令

  1.v-text

  2.v-html

  3. v-on

  4.v-show

  5. v-if指令

  6. v-bind

  7.v-for

  8. v-model

  9. axios(功能强大的网络数据库)

---

前言

一些简单的指令。希望今天的学习是个良好的开端，以后多多学习！

一、基础

1. 导入开发版本的Vue.js
2. 创建Vue实例对象，设置el和data属性（methods）
3. 使用简洁的模板语法把数据渲染到页面上

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

二、一些指令

1.v-text

设置标签的文本值

2.v-html

指定html

3. v-on

内容为元素绑定事件

4.v-show

图片的显示与隐藏（true显示；false隐藏）(操纵显示状态)

5. v-if指令

根据表达式真假来切换元素的显示和隐藏（操纵dom元素）（操纵实际元素）

6. v-bind

设置元素属性，格式：v-bind:属性名=表达式

7.v-for

根据数据生成列表结构

8. v-model

获取和设置表单元素的值（双向数据绑定）

9. axios(功能强大的网络数据库)

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--get方法-->
<script>
    document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
<!--post方法-->
document.querySelector(".post").onclick = function(){
          axios.post("https://autumnfish.cn/api/user/reg",{username:"littersuzy"})
          .then(function(response){
              console.log(response);
          })
      }
</script>