IOS前端技术栈三(vue+Axios) - Powered by Discuz! Archiver

徐锦洪 发表于 2024-7-10 19:55:28

前端技术栈三(vue+Axios)

一、Vue

1 基本介绍

1.1 Vue 是什么?

[*]Vue (读音 /vjuː/，类似于 view) 是一个前端框架, 易于构建用户界面
[*]Vue 的核心库只关注视图层，不光易于上手，还便于与第三方库或项目整合
[*]支持和别的类库联合使用
[*]开辟复杂的单页应用非常方便
[*]Vue 是 Vue.js 的简称
[*]官网: https://cn.vuejs.org/
[*]git 地址: https://github.com/vuejs
1.2 MVVM

https://img-blog.csdnimg.cn/direct/74b8b798262c4ab08d24ee45ab6a737e.png

MVVM 头脑

[*]M∶即 Model，模型，包括数据和一些基本操纵
[*]V∶即View，视图，页面渲染结果
[*]VM∶即 View-Model，模型与视图间的双向操纵(无需开辟人员干涉)
[*]在 MVVM之前，开辟人员从后端获取需要的数据模型，然后要通过 DOM 操纵 Model渲染到View 中。而后当用户操纵视图，我们还需要通过 DOM获取 View 中的数据然后同步到Model 中。
[*]而 MVVM中的VM 要做的事情就是把DOM 操纵完全封装起来，开辟人员不用再关心Model 和View 之间是怎样互相影响的
[*]只要我们 Model 发生了改变，View上自然就会体现出来
[*]当用户修改了View，Model 中的数据也会跟着改变。。
[*]结果：把开辟人员从繁琐的 DOM操纵中解放出来，把关注点放在怎样操纵 Model上, 大大提高开辟服从
2 快速入门

2.1 基本使用

[*]官网文档：https://cn.vuejs.org/v2/guide/index.html
[*]下载: https://cn.vuejs.org/v2/guide/installation.html
https://img-blog.csdnimg.cn/direct/e86279cf4c1c44a6a36b5ec2e41fc4d6.png
为了让 IDEA 辨认 Vue 代码，需要安装插件 Vue.js
https://img-blog.csdnimg.cn/direct/a297f76c6fbf4d9e89a8f42ba1f44f84.png 关于办理idea应用市场加载不出来得，可自行百度
2.2 案例

2.2.1 需求

https://img-blog.csdnimg.cn/direct/551b37f10bd54580b425dcae84e4b6ce.png
2.2.2 步骤

[*]创建新文件夹 D:\idea_java_projects\vue , 直接拖到 Idea 工具，使用 idea 打开
[*]将下载好的 vue.js 拷贝到 D:\idea_java_projects\vue\vue.js
[*]创建 D:\idea_java_projects\vue\vue_quick_start.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue快速入门</title>
</head>
<body>
<div id="app">
   
   <h1>欢迎你{{message}}--{{name}}</h1>
</div>


<script src="vue.js"></script>
<script>
//创建vue对象
/*
   1.创建Vue对象实例
   2.我们在控制台输出vm对象，看看对象的结构
*/
let vm = new Vue({
   el:"#app",//创建的vue实例挂载到 id=app的div
   data:{//表示数据池，以k-v形式保存,根据自己的需求设置
         message:"Hello-Vue",
         name:"韩顺平教育"
   }
})
console.log("vm=>",vm);
console.log("message",vm._data.message);
console.log("name=",vm._data.name);
console.log("message",vm.message);//等价的，他放了一份在data中，也放了一份在vm的根下
console.log("name=",vm.name);
</script>
</body>
</html> 2.2.3 留意事项和使用细节

[*]留意代码次序，要求 div 在前，script 在后，否则无法绑定命据【从上到下执行，也就是div得在前】
https://img-blog.csdnimg.cn/direct/ccc5521440ef4382ac1e74c01834e74e.png

[*]从案例可以体会声明式渲染：Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM 的系统，做到数据和显示分离
[*] Vue 没有繁琐的 DOM 操纵，假如使用 jQuery，我们需要先找到 div 节点，获取到 DOM 对象，然后举行节点操纵, 显然 Vue 更加简洁
3 数据单向渲染

3.1 基本阐明

https://img-blog.csdnimg.cn/direct/4819c9ae670647ca902f2ee8a0075463.png
3.2 需求分析/图解

演示 v-bind 的使用, 可以绑定元素的属性(如图
https://img-blog.csdnimg.cn/direct/6f80e3c9c3a64a4197c8791e487a6699.png
把准备好的 1.jpg 拷贝到 D:\idea_java_projects\vue\1.jpg
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>单向数据渲染</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>


<img v-bind:src="img_src" v-bind:width="img_width">
<img :src="img_src" :width="img_width">

</div>
<script src="vue.js"></script>
<script>
let vm=new Vue({
   el:"#app",
   data:{
         message:"hello 耗子精",
         img_src:"1.jpg",
         img_width:"200px"
   }
})
</script>
</body>
</html> 3.3 留意事项和使用细节

[*]插值表达式是用在标签体的
[*]假如给标签属性绑定值，则使用 v-bind 指令
4 数据双向绑定

4.1 需求分析

需求在输入框中输入信息，会更新到相应绑定的位置
https://img-blog.csdnimg.cn/direct/52fb2f70cc5a4971b8c4334a8c5850b1.png 4.2 代码实现

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>双向数据渲染</title>
</head>
<body>
<div id="app">
<h1>
   {{message}}
</h1>


<input type="text" v-model:value="hobby.val"><br/><br/>
<input type="text" v-bind:value="hobby.val"><br/><br/>
<p>你输入的爱好是：{{hobby.val}}~</p>
</div>

<script src="vue.js"></script>
<script>
let vm=new Vue({
   el:"#app",
   data:{
         message:"hi,输入你的爱好",
         hobby:{
            val:"购物"
         }
   }
})
</script>
</body>
</html> 5 事件绑定

5.1 基本阐明

[*]使用 v-on 举行事件处理，好比: v-on:click 表示处理鼠标点击事件
[*]事件调用的方法定义在 vue 对象声明的 methods 节点中
[*]v-on:事件名可以绑定指定事件
[*]官方文档：https://cn.vuejs.org/v2/guide/events.html
5.2 需求演示 Vue 事件绑定操纵

https://img-blog.csdnimg.cn/direct/1ce2a100d3ff4968a411ac9dbbb82ed6.png 5.3 代码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>

<button v-on:click="sayHi()">点击输出</button>
<button v-on:click="sayOk()">点击输出</button>
<button v-on:click="sayHi">点击输出</button>
<button @click="sayOk">点击输出</button>

</div>

<script src="vue.js"></script>
<script>
let vm=new Vue({
   el:"#app",
   data:{
         message: "Vue 事件处理的案例",
         name: "韩顺平教育"
   },
   // 1. 是一个 methods 属性, 对应的值是对象{}
   // 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池
   // 3. 这里需要小伙伴有 js 的基础=>java web 第 4 章
   methods:{
         sayHi(){
            console.log("hi, 银角大王~");
         },
         sayOk(){
            console.log("ok, 金角大王~");
         }
   }
})
console.log(vm)
</script>
</body>
</html> 6 修饰符

6.1 基本阐明

[*]修饰符 (Modifiers) 是以(.)指明的后缀，指出某个指令以特殊方式绑定。
[*]例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()即阻止事件本来的默认行为
[*]事件修饰符【.stop 阻止事件继续流传  .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此到处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive告诉浏览器你不想阻止事件的默认行为】

[*]键盘事件的修饰符【好比: 项目常常需要监听一些键盘事件来触发步调的执行，而 Vue 中允许在监听的时间添加关键修饰符 <input v-on:keyup.13="submit">

[*]v-model 的修饰符【好比: 主动过滤用户输入的首尾空格 <input v-model.trim="msg">】
6.2 需求分析/图解

需求: 演示 v-on:submit.prevent 的使用, 假如没有输入名字，控制台输出 "请输入名字"，否则输出 "提交表单" https://img-blog.csdnimg.cn/direct/5e6c11a3aad844a09c505da0b19232c1.png
解惑, 为什么在开辟中, 偶尔需要 , 让某个指令以特殊方式绑定, 好比表单提交 1) 我们不希望将这个表单举行团体提交, 而是是 Ajax 的方式举行提交 2) 因为表单团体提交会导致重载页面, 而 Ajax 方式可以有选择性提交数据，而且局部刷新
6.3 代码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 修饰符使用</title>
</head>
<body>
<div id="app">

<form action="https://www.baidu.com" v-on:submit.prevent="onMysubmit">
   妖怪名：<input type="text" v-model:value="monster.name"><br/><br/>
   <button type="submit">注册</button>
</form>
</div>

<script src="vue.js"></script>
<script>
let vm=new Vue({
   el: '#app',
   data:{
      //数据池
      monster:{//monster 数据(对象)的属性, 可以动态生成

      }
   },
   methods:{
         onMysubmit(){

            //console.log("我们自己的表单提交处理...");
            //"", null, undefined 都是 false
            if(this.monster.name){
               console.log("提交表单 name=",this.monster.name);
               //这里，程序员就可以根据自己的业务发出 ajax 请求到后端
               //得到数据后，在进行数据更新
            }else {
               console.log("请输入名字")
            }
         }
   }
})
</script>
</body>
</html> 7 条件渲染/控制: v-if v-show

7.1 基本阐明

Vue 提供了 v-if 和 v-show 条件指令完成条件渲染/控制
v-if 介绍
https://img-blog.csdnimg.cn/direct/7a3a0f8118d14fd58309c5943c57fde5.png
v-show 介绍
https://img-blog.csdnimg.cn/direct/1b77764d73bb417794de0aeb5acc4287.png 官方文档：https://cn.vuejs.org/v2/guide/conditional.html
7.2 应用实例

https://img-blog.csdnimg.cn/direct/045ef5ce44d046b687d3717f9eb257ec.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染 v-if</title>
</head>
<body>
<div id="app">

<input type="checkbox" v-model="sel">是否同意条款

<h1 v-if="sel">你同意条款</h1>
<h1 v-else>你不同意条款</h1>
</div>

<script src="vue.js"></script>
<script>
//为了调试方便, 使用 vm 接收 Vue 实例
let vm = new Vue({
   el: '#app',
   data: {//data 数据池
         sel: false
   }
})
</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染 v-show</title>
</head>
<body>
<div id="app">

<input type="checkbox" v-model="sel">是否同意条款

<h1 v-show="sel">你同意条款</h1>
<h1 v-show="!sel">你不同意条款</h1>
</div>

<script src="vue.js"></script>
<script>
//为了调试方便, 使用 vm 接收 Vue 实例
let vm = new Vue({
   el: '#app',
   data: {//data 数据池
         sel: false
   }
})
</script>
</body>
</html> 7.3 v-if VS v-show

v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
https://img-blog.csdnimg.cn/direct/af95109ee3d942daaf94d5240a49b3c8.png v-show 机制相对简朴, 不管初始条件是什么，元素总是会被渲染，而且只是对 CSS 举行切换
https://img-blog.csdnimg.cn/direct/eac7bbad1de3425c9a1491391c8e1e8e.png 使用建议：假如要频仍地切换，建议使用 v-show ；假如运行时条件很少改变，使用 v-if 较好
8 列表渲染: v-for

8.1 基本阐明

[*]Vue 提供了 v-for 列表循环指令
[*]官方文档：https://cn.vuejs.org/v2/guide/list.html
对数组举行遍历
https://img-blog.csdnimg.cn/direct/15103f2b94114b04a63472161aac607c.png 用 v-for 来遍历一个对象的 property
https://img-blog.csdnimg.cn/direct/c90e2618683f470daa983c4af5e6712c.png https://img-blog.csdnimg.cn/direct/a011a1126fd14642858522204b00c8c5.png
8.2 应用实例

https://img-blog.csdnimg.cn/direct/a111b6c80f904588a855e172decd0004.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for 列表渲染</title>
</head>
<body>
<div id="app">

<h1>简单的列表渲染</h1>
<ul>
   <li v-for="i in 3">{{i}}</li>
</ul>

<h1>简单的列表渲染-带索引</h1>
<ul>
   <li v-for="(i,index) in 3">{{i}}-{{index}}</li>
</ul>
<h1>遍历数据列表</h1>

<table width="400px" border="1px">
   <tr v-for="monster in monsters">
         <td>{{monster.id}}</td>
         <td>{{monster.name}}</td>
         <td>{{monster.age}}</td>
   </tr>
</table>
</div>
<script src="vue.js">

</script>
<script>
let vm=new Vue({
   el:"#app",
   data:{
         monsters: [
            {id: 1, name: '牛魔王', age: 800},
            {id: 2, name: '黑山老妖', age: 900},
            {id: 3, name: '红孩儿', age: 200}
         ]

   }
})
</script>
</body>
</html> 9 组件化编程

9.1 基本阐明

[*]在大型应用开辟的时间，页面可以分别成许多部分，往往差别的页面，也会有雷同的部分。例如可能会有雷同的头部导航。
[*]但是假如每个页面都独自开辟，这无疑增长了我们开辟的本钱。以是我们会把页面的不同部分拆分成独立的组件，然后在差别页面就可以共享这些组件，克制重复开辟(如图)
https://img-blog.csdnimg.cn/direct/e9f5810cb2d14a5fbbeaae9b5bb200c7.png

[*]组件(Component) 是 Vue.js 最强盛的功能之一(可以提高复用性界面2.业务处理])
[*]组件也是一个Vue实例，也包括∶ data、methods、生命周期函数等
[*]组件渲染需要 html模板，以是增长了template 属性，值就是 HTML 模板
[*]对于全局组件，任何vue 实例都可以直接在 HTML 中通过组件名称来使用组件
[*]data 是一个函数，不再是一个对象，如许每次引用组件都是独立的对象/数据
9.2 应用实例

问题分析
点击次数会共享假如要办理, 需要我们定义差别的点击次数变量(好比 count、count2、count3 等)来记录差别也就是复用性差
实现方式 1-普通方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>组件化编程</title>
</head>
<body>
<div id="app">

<button v-on:click="click1()">点击次数= {{count}} 次【非组件化方式】</button><br/><br/>

<button v-on:click="click2()">点击次数= {{count2}} 次【非组件化方式】</button><br/><br/>
<button v-on:click="click3()">点击次数= {{count3}} 次【非组件化方式】</button><br/>
</div>
<script src="vue.js"></script>
<script>
new Vue({
   el: "#app",
   data: {//data 数据池
         count: 10,
         count2: 10,
         count3: 10
   },
   methods: {//methods 属性, 可以定义相应的方法
         click1() {
            this.count+=1;
         },
         click2() {
            this.count2+=1;
         },
         click3() {
            this.count3+=1;
         }
   }
})
</script>
</body>
</html> 实现方式 2-全局组件方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化编程-全局组件</title>
</head>
<body>
<div id="app">
<h1>组件化编程-全局组件</h1>
<counter></counter>
<counter></counter>
</div>
<script src="vue.js"></script>
<script>
//1、定义一个全局组件, 名称为 counter
//2. {} 表示就是我们的组件相关的内容
//3. template 指定该组件的界面, 因为会引用到数据池的数据，所以需要是模板字符串
//4. 这里老师说明: 要把组件视为一个 Vue 实例，也有自己的数据池和 methods
//5. 这里老师说明: 对于组件，我们的数据池的数据，是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式
//6. 这时我们达到目前，界面通过 template 实现共享,业务处理也复用
//7. 全局组件是属于所有 vue 实例，因此，可以在所有的 vue 实例使用

Vue.component("counter",{
   template:`<button v-on:click="click()">点击次数={{count}}次【全局组件】</button>`,
   data(){//这里需要注意，和原来的方式不一样!!!!
         return {
            count:10
         }
   },
   methods:{
         click(){
            this.count++;
         }
   }
})
//创建Vue实例，必须要有
new Vue({
   el:"#app",//Vue的实例挂载点

})
</script>
</body>
</html> 实现方式 3-局部组件方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化编程-局部组件</title>
</head>
<body>
<div id="app">

<h1>组件化编程-局部组件</h1>
<my_counter></my_counter>

</div>
<script src="vue.js"></script>
<script>
//1、定义一个局部组件, 名称为 buttonCounter
//1. 可以把常用的组件，定义在某个 commons.js 中 export
//2. 如果某个页面需要使用，直接 import
const buttonCounter={
   template:`<button v-on:click="click()">点击次数={{count}}次【局部组件】</button>`,
   data(){//这里需要注意，和原来的方式不一样!!!!
         return {
            count:10
         }
   },
   methods:{
         click(){
            this.count++;
         }
   }
}

//创建Vue实例，必须要有
new Vue({
   el:"#app",//Vue的实例挂载点
   components: {
         //引入/注册某个组件, 此时 my_counter 就是一个组件, 是一个局部组件,他的使用范围在当前 vue
         'my_counter':buttonCounter
   }

})
</script>
</body>
</html> 9.3 组件化小结

假如方法体, 只有简朴的语句,好比 count++, 那么可以举行简写
https://img-blog.csdnimg.cn/direct/1a2141cf1ee04f12816490149ddda4e2.png
组件定义需要放置在 new Vue() 前，否则组件注册会失败
组件也是一个 Vue 实例，因此它的定义是也存在∶ data、methods、生命周期函数等 data 是一个函数，不再是一个对象，如许每次引用组件都是独立的对象/数据组件渲染需要 html 模板，以是增长了 template 属性，值就是 HTML 模板   10 生命周期和监听函数(钩子函数)

10.1 基本阐明

[*]Vue 实例有一个完备的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期
[*]钩子函数(监听函数): Vue 实例在完备的生命周期过程中(好比设置数据监听、编译模板、将实例挂载到 DOM 、在数据变化时更新 DOM 等), 也会运行叫做生命周期钩子的函数
[*]钩子函数的作用就是在某个阶段, 给步调员一个做某些处理的机会
10.2 生命周期示意图

https://img-blog.csdnimg.cn/direct/d6c06c8a76a1495ca906ac753b2474d4.png
1) new Vue()         new 了一个 Vue 的实例对象，此时就会进入组件的创建过程。 2) Init Events & Lifecycle         初始化组件的事件和生命周期函数 3) beforeCreate         组件创建之后遇到的第一个生命周期函数，这个阶段 data 和 methods 以及 dom 结构都未被初始化，也就是获取不到 data 的值，不能调用 methods 中的函数 4) Init injections & reactivity         这个阶段中, 正在初始化 data 和 methods 中的方法 5) created         - 这个阶段组件的 data 和 methods 中的方法已初始化竣事，可以访问，但是 dom 结构未初始化，页面未渲染         - 阐明：在这个阶段，常常会发起 Ajax 哀求 6) 编译模板结构(在内存) 7) beforeMount            当模板在内存中编译完成，此时内存中的模板结构还未渲染至页面上，看不到真实的数据    8) Create vm.$el and replace ‘el’ with it            这一步，再在把内存中渲染好的模板结构替换至真实的 dom 结构也就是页面上    9) mounted            此时，页面渲染好，用户看到的是真实的页面数据，生命周期创建阶段完毕，进入到了运    行中的阶段    10) 生命周期运行中            10.1 beforeUpdate    当执行此函数，数据池的数据新的，但是页面是旧的            10.2 Virtual DOM re-render and patch    根据最新的 data 数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面上            10.3 updated    页面已经完成了更新，此时， data 数据和页面的数据都是新的    11) beforeDestroy            当执行此函数时，组件即将被销毁，但是还没有真正开始销毁，此时组件的 data 、 methods       数据或方法还可被调用       12) Teardown……               注销组件和事件监听       13) destroyed               组件已经完成了销毁    10.3 应用实例

10.3.1 需求分析

需求: 展示 VUE 实例生命周期和钩子函数/监听函数/生命周期函数执行时机 1) 重点研究几个重要的钩子函数 (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated) 2) 在这几个钩子函数中, 数据模型是否加载/使用? 自定义方法是否加载/可用? html 模板是否加载/使用? html 模板是否完成渲染? https://img-blog.csdnimg.cn/direct/7cfe2ad609a742e99e13e5b77ce5b534.png
10.3.2 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期和钩子函数</title>
</head>
<body>

<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞！</button>
<h2>{{name}}，有{{num}}次点赞</h2>
</div>
<script src="vue.js"></script>
<script>
let vm=new Vue({
   el:"#app",
   data:{
         //数据池
         name:"kristina",
         num:0
   },
   methods:{
         show(){
            return this.name;
         },
         add(){
            this.num++;
         }
   },
   beforeCreate(){
         //生命周期函数-创建Vue实例前
         console.log("=============beforeCreate==========");
         console.log("数据模型 / 数据池的数据是否加载 / 使用 ?",this.name," ",this.num);//undefined undefined
         //console.log("自定义方法是否加载/使用?", this.show());
         console.log(" 用户页面 dom 是否加载 / 使用 ?", document.getElementById("num"));//;yes
         console.log(" 用户页面 dom 是否被渲染 ?", document.getElementById("num").innerText);
   },

   created(){
         //生命周期函数-创建Vue实例前
         console.log("=============created==========");
         console.log("数据模型 / 数据池的数据是否加载 / 使用 ?",this.name," ",this.num);
         console.log("自定义方法是否加载/使用?", this.show());
         console.log(" 用户页面 dom 是否加载 / 使用 ?", document.getElementById("num"));//;yes
         console.log(" 用户页面 dom 是否被渲染 ?", document.getElementById("num").innerText);
         //可以发出 Ajax
         //接收返回的数据
         //再次去更新 data 数据池的数据
         //编译内存模板结构
         //.....
   },
   beforeMount() {//生命周期函数-挂载前
         console.log("=============beforeMount==========");
         console.log(" 数据模型 / 数据池的数据是否加载 / 使用 ?",
            this.name, " ", this.num);
         console.log("自定义方法是否加载/使用?", this.show());
         console.log(" 用户页面 dom 是否加载 / 使用 ?", document.getElementById("num"));
         console.log(" 用户页面 dom 是否被渲染 ?", document.getElementById("num").innerText);
   },
   mounted() {//生命周期函数-挂载后
         console.log("=============mounted==========");
         console.log(" 数据模型 / 数据池的数据是否加载 / 使用 ?",
            this.name, " ", this.num);
         console.log("自定义方法是否加载/使用?", this.show());
         console.log(" 用户页面 dom 是否加载 / 使用 ?", document.getElementById("num"));
         console.log(" 用户页面 dom 是否被渲染 ?", document.getElementById("num").innerText);
   },
   beforeUpdate() {//生命周期函数-数据池数据更新前
         console.log("=============beforeUpdate==========");
         console.log(" 数据模型 / 数据池的数据是否加载 / 使用 ?",
            this.name, " ", this.num);
         console.log("自定义方法是否加载/使用?", this.show());
         console.log(" 用户页面 dom 是否加载 / 使用 ?", document.getElementById("num"));
         console.log(" 用户页面 dom 数据是否被更新 ?", document.getElementById("num").innerText);
         //验证数据==>修正
         // if(this.num < 10 ) {
         // this.num = 8;
         // }
   },
   updated() {//生命周期函数-数据池数据更新后
         console.log("=============updated==========");
         console.log(" 数据模型 / 数据池的数据是否加载 / 使用 ?",
         this.name, " ", this.num);
         console.log("自定义方法是否加载/使用?", this.show());
         console.log(" 用户页面 dom 是否加载 / 使用 ?", document.getElementById("num"));
         console.log(" 用户页面 dom 数据是否被更新 ?", document.getElementById("num").innerText);
   }
})
</script>
</body>
</html> 11 Vue2 脚手架模块化开辟

11.1 安装

npm 报错办理
npm -v报错-CSDN博客
1. 搭建 Vue 脚手架工程，需要使用到 NPM(node package manager), npm 是随 nodejs 安装的一款包管理工具, 类似 Maven。以是我们需要先安装 Nodejs 2. 为了更好兼容，这里我们安装 node.js10.16.3，要求也使用这个版本(因为这里只是演示 Vue 脚手架工程),后面还会讲解 Vue3 的脚手架工程搭建, 再对 Node 升级. 3. 假如以前安装过 node.js , 为防止版本辩论，先卸载之, 假如你没安装 nodejs, 就不用管https://img-blog.csdnimg.cn/direct/8f54cc83fe9d4d19af0f2b2bc38e7c7b.png 下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/
https://img-blog.csdnimg.cn/direct/e65823ce339a45a9a7a63c019472db28.png 安装 node.js10.16.3 , 直接下一步即可, 安装到 d:\program\nodejs10.16【自定义】
https://img-blog.csdnimg.cn/direct/416eca2bb3dd41618a9a5c4b938f63a3.png
6. 验证是否安装成功, 假如看到不到, 退出 cmd, 重新开一个窗口测试即可
https://img-blog.csdnimg.cn/direct/4410d20222a742b580b3256792a350a1.png
7 先删除以前的 cli 版本<不论是之前未下载或没有下载>
npm uninstall vue-cli -g
8 安装淘宝镜像-cnpm
https://img-blog.csdnimg.cn/direct/13d0f7e9b0984b2eb6ca827a74228ba0.png https://img-blog.csdnimg.cn/direct/7ec54d08eec54ad5a78e44dbc1d7974c.png安装 webpack 和 webpack-cli , 指令: npm install webpack@4.41.2 webpack-cli -D
https://img-blog.csdnimg.cn/direct/7c9a1013123c4aba95ea5e6b72fbfc49.png 9 安装 cnpm install -g @vue/cli@4.0.3
https://img-blog.csdnimg.cn/direct/96ecf99b6d664797be455895ea91a92f.png
10 确认 Vue-Cli 版本
https://img-blog.csdnimg.cn/direct/1bd02d3300c54fb18208c828e195909b.png
11.创建目次vue_project,并cmd到该目次
12.使用webpack创建vue脚手架项目(提醒：假如出现了downloadingtemplate...., 60s退出窗口，重新来操纵一次即可.)【基本坑全遇见了，呜呜·】https://img-blog.csdnimg.cn/direct/71df6389eacc4b2496f25f2ba51f57d2.png https://img-blog.csdnimg.cn/direct/bf48cf67dbd34f6fbc1a84669ee07d79.png
https://img-blog.csdnimg.cn/direct/3209c5f3f4f24cc996e5c9481cc99b53.png https://img-blog.csdnimg.cn/direct/271dabdd687847868514aa77fd62f682.png12 浏览器：http://localhost:8080
https://img-blog.csdnimg.cn/direct/39533d30c0d745de8e600f6fd6a5e7b9.png
11.2 运行项目

1. 将 Vue 脚手架项目，直接拖到 IDEA，就可以打开 2. 配置 NPM https://img-blog.csdnimg.cn/direct/2b43d11556ae4922b65ac2b3675d5cc7.png3. 效果
https://img-blog.csdnimg.cn/direct/ade13b99b8c74603aae9e4909ab10a93.png 11.3 Vue 项目结构分析

https://img-blog.csdnimg.cn/direct/f6ab6c94464d40db8b42dac232528285.png
Vue 哀求页面执行流程
https://img-blog.csdnimg.cn/direct/6b4beed53ad949e39a4a63c33b3b83ee.png 11.4 应用实例-Vue 项目引入 ElementUI

https://img-blog.csdnimg.cn/direct/6a1792c3f4b34de091d5254a0fb39852.png
在 Vue2 项目中, 使用 ElementUI 组件, 如图
https://img-blog.csdnimg.cn/direct/e1945b02a17b415aa1ccb44783f66dec.png
ElementUI 官网: https://element.eleme.cn/#/zh-CN   安装 element-ui 组件库, cmd 下进入到项目，指令 npm i element-ui@2.12.0
https://img-blog.csdnimg.cn/direct/e02886b0660c418893ac6b95c57fb192.png
https://img-blog.csdnimg.cn/direct/560f24a7cd554f8fb23ae986f3070840.png 主要的代码是components里面的组件内容，和router里面的路由
<template>

<div>
<h1>{{msg}}</h1>

<el-row>
   <el-button>默认按钮</el-button>
   <el-button type="primary">主要按钮</el-button>
   <el-button type="success">成功按钮</el-button>
   <el-button type="info">信息按钮</el-button>
   <el-button type="warning">警告按钮</el-button>
   <el-button type="danger">危险按钮</el-button>

</el-row>
<table>
   <tr>
   <td colspan="3">第1行第1列</td>

   </tr>
   <tr>
   <td rowspan="2">第2行第1列</td>
   <td>第2行第2列</td>
   <td>第2行第3列</td>
   </tr>

   <tr>

   <td>第3行第2列</td>
   <td>第3行第3列</td>
   </tr>
   <tr>
   <td rowspan="2">第4行第1列</td>
   <td>第4行第2列</td>
   <td>第4行第3列</td>
   </tr>
   <tr>

   <td>红烧肉<img src="@/assets/2.png" width="100"></td>
   <td>第5行第3列</td>
   </tr>
</table>
</div>
</template>


<script>
export default {
   name: "Hsp",
   data(){
      return {
         msg: "Welcome to Vue"
      }
   }
}
</script>

<style scoped>
div{
width: 900px;
background-color: aliceblue;
margin: 0 auto;

}
h1{
color: red;
}
table,tr,td {
border: 1px solid red;
margin: 0 auto;
width: 600px;
border-collapse: collapse;
height: 50px;
}
</style>
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hello from '@/components/hello'
import Hsp from '@/components/Hsp'
Vue.use(Router)

export default new Router({
routes: [//路由表
{
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
},
{
   path: '/hello',
   name: 'hello',
   component: hello
},
{
   path: '/Hsp',
   name: 'Hsp',
   component: Hsp
}

]
})
二、Axios

1.基本阐明

[*]axios 是独立于 vue 的一个项目，不是 Vue 的一部分
[*]axios 通常和 Vue 一起使用，实现 Ajax 操纵
[*]Axios 是一个基于 promise 的 HTTP 库
[*]https://javasoho.com/axios/https://img-blog.csdnimg.cn/direct/f58185021d4542eda173481778ffbb24.png
Axios 库文件
使用 axios 需要引入 axios 库文件
可以直接引入
https://img-blog.csdnimg.cn/direct/81977c2f1fa74d3ea197a4fcc5298a40.png 也可以下载 axios.min.js ，在本地引入
https://img-blog.csdnimg.cn/direct/6c4ce75061b847b4a957512b33b38880.png
2 Axios 应用实例

需求: 在 Vue 项目中使用 Axios, 从服务器获取 json 数据, 显示在页面 https://img-blog.csdnimg.cn/direct/adda8f03a019471a8afd25423a567adb.png
代码实现
创建 D:\hspedu_前端技术栈_temp\axios\response.data.json
将 JSON 对象转成 JSON.stringify(response)https://img-blog.csdnimg.cn/direct/8dd4dd694d6c40df84c7d6336ab2a32e.png
记得导包哦，
data.json
{ "success": true,
"message": "成功",
"data":
{ "items": [
   { "name": "牛魔王", "age": 800
   },
   { "name": "红孩儿", "age": 500
   },
   { "name": "蜈蚣精", "age": 200
}
]
}

} axios_quick_start.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios的应用实例</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<table border="1px" width="200px">
   <tr>
         <td>名字</td>
         <td>年龄</td>
   </tr>
   <tr v-for="monster in monsterList">
         <td>{{monster.name}}</td>
         <td>{{monster.age}}</td>
   </tr>
</table>
</div>
<script src="axios.min.js"></script>
<script src="vue.js"></script>
<script>
new Vue({
   el:"#app",
   data:{
         monsterList:[],//表示妖怪的信息数组
         msg:"妖怪信息表格"
   },
   methods:{
         //定义方法
         list(){//发送ajax请求，获取数据axios
            /** 解读
            * 1. 使用 axios 发送 ajax 请求
            * 2. 语法格式 axios. 请求方式 ( 请求路径 ).then( 箭头函
            数).catch(箭头函数)
            * 3. 请求成功，执行 then 的函数, response 就是返回的数据, 名
            字有程序员确定
            * 4. 请求失败, 执行 catch 的函数
            * 5. this.monsterList = response.data.data.items 把返回的
            data.items 赋给 monsterList
            * 6. 这里的 http://127.0.0.1:63342/axios/response.data.json 路
            径需要根据实际的端口和资源名来修改
            */
            axios.get("http://localhost:63342/axios/response/data.json")
               .then((responseData)=>{
                     console.log("responseData=",responseData);
                     console.log("responseData.data.data.items=",responseData.data.data.items);
                     this.monsterList=responseData.data.data.items;
               }).catch(err=>{
                     console.log(err);
            })
         }
   },
   created(){
         this.list();
   }
})
</script>
</body>
</html>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

前端技术栈三(vue+Axios)