学习Vue之旅：Day2——条件渲染、列表渲染、事件处理、初始Axios

目录

一、生命周期

二、条件渲染

三、列表渲染(其实就是for循环语句)

四、事件处理

五、初识Axios

---

一、生命周期

有实例就有生命周期。所以Vue实例的生命周期多长？

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

以下链接为官网对于“生命周期”的讲解：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA 

二、条件渲染

指令：

1. v-if
2. v-else-if
3. v-else

三、列表渲染(其实就是for循环语句)

指令：

v-for

1. v-for="item in items" :key="item.message">  {{ item.message }} 
3. v-for="(item, index) in items">  {{ parentMessage }} - {{ index }} - {{ item.message }} 
4. v-for="item of items">

 

v-for="value in object"> {{ value }} 

v-for="(value, name) in object"> {{ name }}: {{ value }}

v-for="(value, name, index) in object">  {{ index }}. {{ name }}: {{ value }}

用 v-for 把一个数组对应为一组元素	在 v-for 里使用对象
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。	你也可以用 v-for 来遍历一个对象的 property:
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。	你也可以提供第二个的参数为 property 名称 (也就是键名)：
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：	还可以用第三个参数作为索引：

四、事件处理

v-on：监听 DOM 事件 时

1. 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
   v-on:click="counter += 1">Add 1
    
2. 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
   v-on:click="greet">Greet
    
3. 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
   v-on:click="say('hi')">Say hi
    
4. 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
   v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的

.stop

.prevent

.capture

.self

.once

.passive

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

v-on：监听 键盘事件 时

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

五、初识Axios

json文件：

 html

引入axios

 js

 结果：