Vue + Axios

什么是 Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

MVVM

注意事项

数据单向渲染

数据双向绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

事件绑定

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
// 可以简写
  <button @click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)  // 这里输出的是原生dom的标签名
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>


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

条件渲染

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

`v-if` vs `v-show`

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    输出成绩:1-100 <input type="number" v-model="score">
    你当前的成绩是: <p v-if="score > 100? score = 100 : score < 0? score = 0:'输入成绩有误'">{{score}}</p><br>
    级别是: <p v-if="score >= 90? level = '优秀' : score >= 60? level = '及格' : level = '不及格'" v-model="level">
    {{level}}</p>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            score: 0,
            level: '不及格'
        }
    })
</script>

</body>
</html>

v-for

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>V-for directive</h1>
    <ul>
        <li v-for="(item,index) in items">
            {{ index }} - {{ item.name }} - {{ item.value }}
        </li>
    </ul>
</div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                items: [
                    {name: 'Item 1', value: 1},
                    {name: 'Item 2', value: 2},
                    {name: 'Item 3', value: 3},
                    {name: 'Item 4', value: 4},
                    {name: 'Item 5', value: 5}
                ]
            },
            methods: {
                addItem: function() {
                    this.items.push({name: 'New Item', value: this.items.length + 1});
                }
            }
        });

    </script>
</body>
</html>

组件

实例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

Vue的生命周期和监听函数(钩子函数)

Vue Cli 脚手架

环境搭建的顺序

安装nvm

Releases · coreybutler/nvm-windows (github.com)

nvm install 10.16.3(版本)

nvm use 10.16.3(版本)

npm install -g cnpm --registry=https://registry.npmmirror.com

// 安装打包工具

npm install webpack@4.41.2 webpack-cli -D


npm install -g @vue/cli@4.0.3


创建 vue 项目
vue create + 项目名称

项目启动

vue init webpack zfc_vue


// 如果提示下面的问题就执行


npm install -g @vue/cli-init

尽量按照这个去选

执行这两行代码(耐心等待)

到这步就成功了

用IDEA打开zfc_vue(按自己的实际情况来)

这里是我目录的打开情况

目录结构

main.js文件解读

router.js解读

components/helloWorld.vue解读

APP.vue解读

index.html解读

执行的顺序

mian.js ========> index.js========> components/HelloWorld.vue ========> APP.vue ========> index.html

ElementUI的基本实现

组件库

vue2.0: https://element.eleme.cn/#/zh-CN

ElementUI plus

Overview 组件总览 | Element Plus

Axios

中文文档 https://www.axios-http.cn/docs/intro

axios.min.js

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
自动将请求体序列化为：
- JSON (application/json)
- Multipart / FormData (multipart/form-data)
- URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制
兼容符合规范的 FormData 和 Blob（包括 node.js）
客户端支持防御XSRF

Gampa'Blog

什么是 Vue？

MVVM

注意事项

数据单向渲染

数据双向绑定

事件绑定

事件修饰符

条件渲染

`v-if` vs `v-show`

v-for

组件

Vue的生命周期和监听函数(钩子函数)

Vue Cli 脚手架

环境搭建的顺序

安装nvm

项目启动

目录结构

main.js文件解读

router.js解读

components/helloWorld.vue解读

APP.vue解读

index.html解读

执行的顺序

ElementUI的基本实现

ElementUI plus

Axios

特性

Vue + Axios

评论交流

Gampa'Blog

Vue + Axios

什么是 Vue？​

MVVM

注意事项

数据单向渲染

数据双向绑定

事件绑定

事件修饰符

条件渲染

v-if vs v-show

v-for

组件

Vue的生命周期和监听函数(钩子函数)

Vue Cli 脚手架

环境搭建的顺序

安装nvm

项目启动

目录结构

main.js文件解读

router.js解读

components/helloWorld.vue解读

APP.vue解读

index.html解读

执行的顺序

ElementUI的基本实现

ElementUI plus

Axios

特性

Vue + Axios

评论交流

什么是 Vue？

`v-if` vs `v-show`