【前端】简学vue

最新推荐文章于 2022-11-06 22:09:24 发布

猫猫全栈

最新推荐文章于 2022-11-06 22:09:24 发布

阅读量521

点赞数 1

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

本文链接：https://blog.csdn.net/m0_64501863/article/details/124503527

版权

前端简学专栏收录该内容

5 篇文章 2 订阅

订阅专栏

vue

安装

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

el挂载

Vue实例的作用范围是：vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器：可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素:可以使用其他的双标签，不能使用HTML和BODY

data:数据对象

Vue 中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵循js的语法即可

<div id="app">
	{{message}}
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"猫猫头子"，
		array:[],
		obj:{},
	}
})

v-test

v-test指令的作用是：设置标签的内容（textContent)
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式

<div id="app">
    <h2 v-test=""></h2>		
</div>

var app = new Vue({
	el:"#app",
	data:{
	}
})

v-html

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>

var app = new Vue({
	el:"#app",
	data:{
	//content:"猫猫子"
	content:"<a href='http:///www.itheima.com'>猫猫头子</a>"
	}
})

v-on

v-on指令的作用是：为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

<body>
		
		<div id="app">
			<input type="button" value="v-on指令" v-on:click="doIt">
			<input type="button" value="v-on简写" @click="doIt">
			<input type="button" value="双击事件" @dblclick="doIt">
			<h2 @click="changeFood">{{food}}</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					food:"糖醋里脊"
				},
				methods:{
					doIt:function(){
						alert("做IT");
				},
				changeFood:function(){
					this.food+="好吃！"
				}
				},
		})
		</script>
	</body>

案例计数器 v-test v-html v-on

创建Vue示例时:el(挂载点),data(数据),methods(方法)

v-on指令的作用是绑定事件,简写为@

方法中通过this,关键字获取data中的数据

v-text指令的作用是:设置元素的文本值,简写为{{}}

v-html指令的作用是:设置元素的innerHTML

<body>
  <div id="app">
    <div class="input-num">
      <button @click="sub">
        -
      </button>
      <span>{{num}}</span>
      <button @click="add">
        +
      </button>
    </div>
    <img src="./img/-5ff33291f25ff91f.jpg" alt="" width="50px">
  </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 () {
          // console.log('add');
          if (this.num < 10) {
            this.num++;
          } else {
            alert('已经到最大值')
          }

        },
        sub: function () {
          // console.log('sub');
          if (this.num > 0) {
            this.num--;
          } else {
            alert('已经到最小值')
          }
        }
      },
    })
  </script>
</body>

v-show

v-show指令的作用是:根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容,最终都会解析为布尔值

值为true元素显示,值为false元素隐藏

数据改变之后,对应元素的显示状态会同步更新

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="./img/-5ff33291f25ff91f.jpg" alt="" width="50px">
        <img v-show="age>=18" src="./img/-5ff33291f25ff91f.jpg" alt="" width="50px">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>

</body>

v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

<body>
    <div id="app">
        <input type="button" value="切换" @click="toggleIsShow">
        <p v-if="isShow">程序员</p>
        <p v-show="isShow">程序员-aaaa</p>
        <h2 v-if="temperature>=35">热死啦</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 20
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

v-show与v-if区别

v-show原理是修改元素的display,实现显示隐藏

v-if本质是通过操纵dom元素来切换显示状态

频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind

v-bind指令的作用是:为元素绑定属性

完整写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留 :属性名

需要动态的增删class建议使用对象的方式

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./img/-5ff33291f25ff91f.jpg",
                imgTitle: "憨批",
                isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

案例图片切换

列表数据使用数组保存

v-bind指令可以设置元素属性,比如src

v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

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>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="mask">
        <div class="center">
            <h2 class="title">
                <img src="./img/cat.png" alt="">
                狸花猫壁纸
            </h2>
            <img :src="imgArr[index]" alt="">

            <a href="javascript:void(0)" @click="prev" v-show="index!=0" @click="prev" class="left">
                <img src="./img/prev.png" alt="">
            </a>

            <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" @click="next" class="right">
                <img src="./img/next.png" alt="">
            </a>
        </div>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#mask",
            data: {
                imgArr: [
                    "./img/00.png",
                    "./img/01.png",
                    "./img/02.png",
                    "./img/03.png",
                    "./img/04.png",
                    "./img/05.png",
                    "./img/06.png",
                    "./img/07.png",
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>

css

* {
  margin: 0;
  padding: 0;
}

html,
body,
#mask {
  width: 100%;
  height: 100%;
}

#mask {
  background-color: #5e5858;
  position: relative;
}

#mask .center {
  position: absolute;
  background-color: #4082d8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
#mask .center .title {
  position: absolute;
  display: flex;
  align-items: center;
  height: 56px;
  top: -61px;
  left: 0;
  padding: 5px;
  padding-left: 10px;
  padding-bottom: 0;
  color: rgba(175, 47, 47, 0.8);
  font-size: 26px;
  font-weight: normal;
  background-color: white;
  padding-right: 50px;
  z-index: 2;
}
#mask .center .title img {
  height: 40px;
  margin-right: 10px;
}

#mask .center .title::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 65px solid;
  border-color: transparent transparent #4082d8;
  top: -65px;
  right: -65px;
  z-index: 1;
}

#mask .center > img {
  display: block;
  width: 792px;
  height: 432px;
}

#mask .center a {
  text-decoration: none;
  width: 45px;
  height: 100px;
  position: absolute;
  top: 179px;
  vertical-align: middle;
  opacity: 0.5;
}
#mask .center a :hover {
  opacity: 0.8;
}

#mask .center .left {
  left: 15px;
  text-align: left;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mask .center .right {
  right: 15px;
  text-align: right;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

v-for

v-for指令的作用是:根据数据生成列表结构

数组经常和v-for结合使用

语法是( item,index ) in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(it,index) in arr">
                甘肃:{{index+1}}{{it}}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr:["武威","兰州","张掖","天水","定西","陇南"],
                vegetables:[
                    {name:"西红柿炒鸡蛋"},
                    {name:"酸菜粉条"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"水煮肉片"})
                },
                remove:function(){
                    this.vegetables.shift();
                }
            }
        })
    </script>
</body>

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上 .修饰符可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有多种

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'刺激')">
        <input type="text" @keyup.enter="sayHi">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
         var app = new Vue({
             el:"#app",
             methods:{
                 doIt:function(p1,p2){
                     console.log("做IT");
                     console.log(p1);
                     console.log(p2);
                 },
                 sayHi:function(){
                     alert("你在干什么");
                 }
             }
         })
     </script>
</body>

v-model

v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据←→表单元素的值

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "信息技术"
            },
            methods: {
                getM: function () {
                    alert(this.message);
                },
                setM: function () {
                    this.message = "老师"
                }
            }
        })
    </script>
</body>

案例-记事本

功能

新增
1. v-for指令的作用
2. v-model指令的作用
3. v-on指令,事件修饰符
4. 通过审查元素快速定位

删除
1. 数据改变,和数据绑定的元素同步改变
2. 事件的自定义参数
3. splice方法的作用

统计
1. 基于数据的开发方式
2. v-text指令的作用

清空
1. 基于数据的开发方式

隐藏
1. 没有数据时,隐藏元素(v-show v-if 数组非空)

列表结构可以通过v-for指令结合数据生成

v-on结合事件修饰符可以对事件进行限制,比如.enter

v-on在绑定事件时可以传递自定义参数

通过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>Document</title>
    <link rel="stylesheet" href="./css/index2.css">
</head>

<body>
    <section id="todoapp">
        <header>
            <h1>狸花猫记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
                class="new-todo">
        </header>
        <section class="main">
            <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>
        <footer class="footer">
            <span class="todo-count" v-if="list.length!=0">
                <strong>{{list.length}}</strong> items left
            </span>
            <button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
        </footer>
    </section>
    <footer class="info">
        <p>
            <a href="http://127.0.0.1:5500/imgchange.html"><img src="./img/cat.png" alt="" /></a>
        </p>
    </footer>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#todoapp",
            data: {
                list: ["写代码", "吃饭饭", "睡觉觉"],
                inputValue: ""
            },
            methods: {
                add: function () {
                    this.list.push(this.inputValue)
                },
                remove: function (index) {
                    console.log("删除");
                    console.log(index);
                    this.list.splice(index, 1);
                },
                clear: function () {
                    this.list = [],
                        this.inputValue = "";
                }
            }
        })
    </script>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

#todoapp {
  background: #fff;
  margin: 180px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#todoapp h1 {
  position: absolute;
  top: -160px;
  width: 100%;
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, .8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
}

.toggle-all {
  width: 1px;
  height: 1px;
  border: none; /* Mobile Safari */
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
}

.toggle-all + label {
  width: 60px;
  height: 34px;
  font-size: 0;
  position: absolute;
  top: -52px;
  left: -13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.toggle-all + label:before {
  content: "❯";
  font-size: 22px;
  color: #e6e6e6;
  padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
  color: #737373;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 420px;
  overflow: auto;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
  height: 60px;
  box-sizing: border-box;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 16px;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle + label {
  /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: "×";
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}

axios

功能强大的网络请求库

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

    axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
    axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

文档传送门https://github.com/axios/axios

axios必须先导入才可以使用

使用get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容,或错误信息

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <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=3")
                .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: "cat"
                })
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        }
    </script>
</body>

axios+vue

axios回调函数中的this已经改变,无法访问到data中数据

把this保存起来,回调函数中直接使用保存的this即可

和本地应用的最大区别就是改变了数据来源

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function () {
                    //console.log(this.joke);
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        console.log(response.data);
                        //console.log(this.joke);
                        that.joke = response.data;
                    }, function (err) {})
                }

            }
        })
    </script>
</body>

案例-天知道

回车查询

应用的逻辑代码建议和页面分离，使用单独的js文件编写

axios回调函数中this指向改变了，需要额外的保存一份

服务器返回的数据比较复杂时，获取的时候需要注意层级结构

<!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>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index3.css" />
</head>

<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="./img/cat.png" alt="logo" /></div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt"
                    placeholder="请输入查询的天气" />
                <button class="input_sub">
                    搜 索
                </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;">北京</a>
                <a href="javascript:;">上海</a>
                <a href="javascript:;">广州</a>
                <a href="javascript:;">深圳</a>
            </div>
        </div>
        <ul class="weather_list">
            <li v-for="item in weatherList">
                <div class="info_type"><span class="inconfont">{{item.type}}</span></div>
                <div class="info_temp">
                    <b>{{item.low}}</b>
                    <b>{{item.high}}</b>
                </div>
                <div class="info_date"><span>{{item.date}}</span></div>
            </li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
</body>

</html>

body {
    font-family: 'Microsoft YaHei';
}

.wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* background:#8fd5f4; */
    /* background: linear-gradient(#6bc6ee, #fff); */
    background: #fff;

}

.search_form {
    width: 640px;
    margin: 100px auto 0;
}

.logo img {
    display: block;
    margin: 0 auto;
    width: 100px;
}

.form_group {
    width: 640px;
    height: 40px;
    margin-top: 45px;
}

.input_txt {
    width: 538px;
    height: 38px;
    padding: 0px;
    float: left;
    border: 1px solid #41a1cb;
    outline: none;
    text-indent: 10px;
}

.input_sub {
    width: 100px;
    height: 40px;
    border: 0px;
    float: left;
    background-color: #41a1cb;
    color: #fff;
    font-size: 16px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.input_sub.loading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/loading.gif');
}

.hotkey {
    margin: 3px 0 0 2px;
}

.hotkey a {
    font-size: 14px;
    color: #666;
    padding-right: 15px;
}

.weather_list {
    height: 200px;
    text-align: center;
    margin-top: 50px;
    font-size: 0px;
}

.weather_list li {
    display: inline-block;
    width: 140px;
    height: 200px;
    padding: 0 10px;
    overflow: hidden;
    position: relative;
    background: url('../img/line.png') right center no-repeat;
    background-size: 1px 130px;
}

.weather_list li:last-child {
    background: none;
}

/* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */


.info_date {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #999;
    font-size: 14px;
    left: 0px;
    bottom: 0px;
    margin-top: 15px;
}

.info_date b {
    float: left;
    margin-left: 15px;
}

.info_type span {
    color: #fda252;
    font-size: 30px;
    line-height: 80px;
}

.info_temp {
    font-size: 14px;
    color: #fda252;
}

.info_temp b {
    font-size: 13px;
}

.tem .iconfont {
    font-size: 50px;
}

/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new Vue({
    el: "#app",
    data: {
        city: '',
        weatherList: []
    },
    methods: {
        searchWeather: function () {
            //console.log('天气查询');
            //console.log(this.city);
            //调用接口
            //保存this
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    // console.log(response);
                    //console.log(response.data.data.forecast);
                    that.weatherList = response.data.data.forecast
                })
                .catch(function (err) {})
        }
    }
})

点击查询(在前一个上进行改动)

自定义参数可以让代码的复用性更高

methods中定义的方法内部，可以通过this关键字点出其他的方法

<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="./img/cat.png" alt="logo" /></div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt"
                    placeholder="请输入查询的天气" />
                <button class="input_sub">
                    搜 索
                </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('重庆')">重庆</a>
            </div>
        </div>
        <ul class="weather_list">
            <li v-for="item in weatherList">
                <div class="info_type"><span class="inconfont">{{item.type}}</span></div>
                <div class="info_temp">
                    <b>{{item.low}}</b>
                    <b>{{item.high}}</b>
                </div>
                <div class="info_date"><span>{{item.date}}</span></div>
            </li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
</body>

/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new Vue({
    el: "#app",
    data: {
        city: '',
        weatherList: []
    },
    methods: {
        searchWeather: function () {
            //console.log('天气查询');
            //console.log(this.city);
            //调用接口
            //保存this
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    // console.log(response);
                    //console.log(response.data.data.forecast);
                    that.weatherList = response.data.data.forecast
                })
                .catch(function (err) {})
        },
        changeCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})