Vue 基础入门

VUE 基础入门知识

一. Vue 基础
- (一) Vue 简介
- (二) 第一个Vue程序
- (三) el: 挂载点
- (四) data: 数据对象
- (五) methods：方法
二. 内置指令
- (一) v-text (内容绑定)
- (二) v-html (html 结构绑定)
- (三) v-show (显示切换 [修改display属性])
- (四) v-if (显示切换 [操作 dom 元素])
- (五) v-bind (属性绑定)
- (六) v-for (列表循环)
- (七) v-model (表单元素绑定)
- (八) v-on (事件绑定)
- - 1. 事件方法传参
  - 2. 事件修饰符
  - 3. 按键修饰符
- (九) 自定义指令
- - 1. 获取元素焦点
  - 2. 改变元素背景颜色
  - 3. 局部指令
三. 内置组件
- (一) 全局组件
- (二) 局部组件
- - 1. 在 script 内声明局部组件
  - 2. 在 script 外声明局部组件
- (三) 组件内数据传递
- - 1. 父组件向子组件传值
  - 2. 子组件向父组件传值
  - 3. 非父子组件间传值（兄弟组件）
四. vue-router 路由
- (一) 路由组件间跳转
- (二) 路由参数传递
- (三) 嵌套路由
- (四) 路由案例
五. Vue 过度
- (一) transition 组件
- (二) transition 组件应用过度动画
- - 1. 单元素/组件过渡
五. Vue cli 脚手架
- (一) vue cli 安装
- (二) 脚手架安装
- (三) vue 指令不存在设置
- (四) 创建第一个脚手架项目
- (五) 项目的基本组成
- (六) 项目运行
- (七) 项目代码实操
六. 生命周期
七. Element 组件库
八. 网络应用
- (一) axios 基本使用
- (二) axios 加 vue
六. 综合应用
三. vue中常用ES6语法
- (一) 变量，常量声明
- - 1. let 命令
  - 2. const 命令
  - 3. rest 参数
  - 4. 箭头函数
七. Vue 数组处理相关概念
- (一) 数组相关API
- - 1. 修改原有数据
  - 2. 生成新的数组
- (二) 数组响应式变化

一. Vue 基础

(一) Vue 简介

🔰Vue 是渐进式JavaScript框架。
🔰官网文档：https://v2.cn.vuejs.org/v2/guide/
🔰Vue是基于MVVM模式实现的一套框架（把页面分成Model、View 、ViewModel 三部分）。

🔰MVVM的工作原理：

当数据源发生变化时，会被ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model 数据源中

(二) 第一个Vue程序

导入开发版本的 Vue.js

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

创建Vue实例对象，设置 el 属性和 data 属性

<script >
    var app = new Vue({
        el:"#apps",
        data:{
            message:"Hello Vue"
        }
    })
</script>

使用简洁的模板语法把数据渲染到页面上

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

(三) el: 挂载点

🔰el是用来设置Vue实例挂载（管理）的元素

🔰Vue会管理el选项命中的元素及其内部的后代元素

🔰可以使用其他的选择器，但是建议使用ID选择器 ( el:"#apps"/ el:".apps"/ el:"div")

🔰可以使用其他的双标签，不能使用HTML和BODY

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

(四) data: 数据对象

🔰Vue中用到的数据定义在data中

🔰data中可以写复杂类型的数据

🔰渲染复杂类型数据时，遵守js的语法即可

🔰有多组数据时，用,隔开

<body>
    <div id="app">
        <!-- 字符串 -->
        {{ message}}
        <!-- 对象 -->
        <h2> {{school.name}} {{school.mobile}} </h2>
        <!-- 数组 -->
        <li> {{campus[0]}} </li>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var app = new Vue({
        el:"#app",
        data:{
            // 字符串
            message:"Hello Vue", 
            // 对象
            school: {
                name:"艾莉",
                mobile:"1234567"
            },
            // 数组
            campus:["北京小区", "上海小区", "新疆小区"]
        }
    })
</script>

使用{{}}获取到 data 内的数据，{{}}可以书写数字，表达式，运算符号。

(五) methods：方法

🔰Vue中用到的方法定义在methods中

🔰有多个方法时，用,隔开

var app = new Vue({
	el:"#app",
	data:{
		content:0
	},
	methods:{
		方法名:function() {
			// 逻辑
		},
		dolt:function() {
			// 逻辑
		}
	}
})

二. 内置指令

(一) v-text (内容绑定)

🔰作用：设置标签的内容

🔰默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

<h2 v-text="message" >大家好</h2>

若想部分替换，使用如下格式：

<h3> 北民大，{{message}} </h3>

若想写逻辑代码，支持写表达式：

<h2 v-text="message + '!'">大家好 </h2>
<h3> 北民大，{{message + "!"}} </h3>

(二) v-html (html 结构绑定)

🔰作用：设置元素的 innerHTML

🔰内容中有html元素结构会被解析为标签

🔰v-text指令无论内容是什么，只会解析为文本

🔰解析文本使用v-text，需要解析html结构使用v-html

实例：

<p v-html="content"></p>
<script >
    var app = new Vue({
        el:"#app",
        data:{  content:"<a href='#'>人民</a>"  }  })
</script>

(三) v-show (显示切换 [修改display属性])

🔰作用：根据表达值的真假，切换元素的显示状态

🔰原理：修改元素的display属性，实现显示隐藏

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

🔰值为true元素显示，值为false元素隐藏

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

实例：根据表达值显示或隐藏元素

<!-- 为true，直接显示图片 -->
1 <img src="./caocao.jpg" v-show="true">
<!-- 变量 isShow 的值为true，显示图片 -->
2 <img src="./caocaos.jpg" v-show="isShow">
<!-- 表达式的值为true，显示图片 -->
3 <img src="./caocao.jpg" v-show="age>=18">

（频繁切换，用 v-show）

(四) v-if (显示切换 [操作 dom 元素])

🔰作用：根据表达值的真假，切换元素的显示状态

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

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

实例：根据表达值，移除或保留元素

<div v-if="isShow">我是人！</div>
<div v-if="temperature > 35">好热呀！</div>

（一次性关闭，用 v-if，如弹窗广告）

(五) v-bind (属性绑定)

🔰作用：设置元素的属性（如：src, title, class）

🔰完整写法是v-bind:属性名
<img v-bind:src="imgSrc">

🔰简写的话可以直接省略v- bind，只保留:属性名
<img :src="imgSrc">

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

<img v-bind:class="isActive?'active':''">
// 建议使用以下方式
<img v-bind:class="{active:isActive}">

(六) v-for (列表循环)

🔰作用：根据数据生成列表结构

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

🔰语法是(item, index) in 数据

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

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

实例：数组遍历，对象遍历，添加 / 移除对象元素

<body>
    <span id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(item, index) in arr" :key="item.id">
                {{ index +1}} 学习专区 {{ item }}
            </li>
        </ul>

        <span v-for="item in vegetables" :title="item.name">
            {{ item.name }}
        </span>
        <div v-for="index,key,value in user" >
            {{ index }}-- {{key }} -- {{value}}
        </div>
    </span>
</body>

(七) v-model (表单元素绑定)

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

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

🔰邦定的数据←→表单元素的值

实例：输入内容和下面的内容同步更新

<body>
    <div id="app">
        <input v-model="massage" type="text">
        <h2>{{massage}} </h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var app = new Vue({
        el:"#app",
        data:{
            massage:'艾莉'
        }
    })
</script>

🔰为了方便用户输入的内容进行处理，vue为v-model指令提供了3个修饰符：

修饰符	作用	示例
`.number`	转换为数值	`<input v-model.number='age'/>`
`.trim`	去掉开始和结尾的空格	`<input v-model.trim='age'/>`
`.lazy`	将 input 事件切换为 change 事件	`<input v-model.lazy='age'/>`

(八) v-on (事件绑定)

🔰作用：为元素绑定事件，如 click 等；

🔰事件名不需要写on ；–> v-on: 事件名="方法" v-on: click="dolt"

🔰指令可以简写为@； --> (v-on: click="dolt" --> @click="dolt")

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

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

<script >
    var app = new Vue({
		el:"#app",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            dolt:function() {
                this.food+="好好吃！"
            }
        }
    })
</script>

1. 事件方法传参

🔰事件绑定的方法写成函数调用的形式，可以传入自定义参数
<input type="button" @click="dolt(2, '古力')">

🔰定义方法时需要定义形参来接收传入的实参
dolt:function(p1, p2) { console.log(p1 + p2); }

🔰事件的后面跟上.修饰符可以对事件进行限制
🔰.enter可以限制触发的按键为回车
<input type="text" @keyup.enter="sayHi">

<body>
    <div id="app">
        <input type="button" @click="dolt(2, '古力')">
        <input type="text" @keyup.enter="sayHi">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var app = new Vue({
        el:"#app",
        methods:{
            dolt:function(p1, p2) {
                console.log(p1 + p2);
            },
            sayHi:function() {
                alert('你好')
            }
        }
    })
</script>

2. 事件修饰符

🔰事件修饰符：是和事件连接起来决定事件的触发或者阻止

stop:阻止事件冒泡 (给孩子添加，阻止冒泡)
prevent:用于阻止标签的默认事件
self:用来针对当前标签的事件触发 (给父亲添加，阻止孩子骚扰)
once:只让事件执行一次

<!-- 阻止单击事件继续传播 -->
<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>

<!-- prevent:用于阻止标签的默认事件 -->
<a href="./login.html" @click.prevent="a1">跳转</a>

<!-- once:只让事件执行一次 -->
<button @click.once="stop">点击</button>
</div>

3. 按键修饰符

回车键修饰符：.enter
tab 键修饰符：.tab
delete 键修饰符：.delete 删除键
esc 键修饰符：.esc 取消键
space 键修饰符：.space 空格键
up 键修饰符：.up 上
down 键修饰符：.down 下
left 键修饰符：.left 左
right 键修饰符：.right 右
.ctrl
.alt
.shift

<!-- 回车键修饰符 -->
<input type="text" @keyup.enter="clear(1)" name="" id="">

<!-- Tab 键修饰符:捕捉到 tab 执行 -->
<input type="text" @keyup.tab="clear(2)" name="" id="">

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

自定义按键修饰符：

全局config.keyCodes对象
Vue.config.keyCodes.f1 ==112

(九) 自定义指令

🔰为何需要自定义指令？

内部指令不满足需求

🔰Vue.directive 注册全局指令
全局指令在任何组件中使用

🔰diretives 定义局部指令
局部指令只能在当前页面使用

1. 获取元素焦点

自定义指令的语法规则（获取元素焦点）

Vue.directive('focus',{
	inserted.function(el) {
		// 获取元素的焦点
		el.focus();
	}
});

自定义指令用法
<input type="text" v-focus>

2. 改变元素背景颜色

带参数的自定义指令（改变元素背景颜色）

Vue.directive('color',{
	inserted.function(el, binding) {
		// 获取元素的焦点
		el.style.backgroundColor = binding.value.color;
	}
});

自定义指令用法
<input type="text" v-color="color: 'orange'">

3. 局部指令

directives:{
	focus: {
		// 指令定义
		inserted.function(el) {
			el.focus();
		}
	}
}

三. 内置组件

🔰组建的作用：根据不同的业务功能把页面分为不同的组件，根据组件来完成布局。

(一) 全局组件

🔰定义全局的组件: Vue.component(组件的名称, 组件的配置)
Vue.component("login", {....});
🔰组件的配置 template：“用于书写我们的html代码”
template: "<h3>泰裤辣</h3>"
🔰 需要根据组件名称来使用全局组件
🔰注册组件的时候尽量使用驼峰命名法>

<div id="app">
	<!--  3. 调用全局组件 -->
    <login></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	// 1. 定义全局组件
    Vue.component("login", {
	    // 2. 组件配置
        template: "<h3>泰裤辣</h3>",
    });
    const app = new Vue({
        el: "#app",
        data: {},
    })
</script>

(二) 局部组件

🔰给注册的vue 实例一个 components属性来完成组件注册。
🔰局部组件有两种声明方式：

在 script 内声明局部组件
在 script 外声明局部组件

1. 在 script 内声明局部组件

声明局部组件

let login = {
    // 组件结构
    template: "<div><h1>临时抱佛脚</h1></div>",
}

注册组件

components:{
    // 调用组件名: 定义组件名
    item: login,
    // 调用组件名和定义组件名相同时,可以简写一个
    login,
}

调用组件

<div id="app">
	<item></item>
	<login></login>
</div>

实例

<div id="app">
		<!-- 调用组件 -->
        <item></item>
        <login></login>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 声明局部组件
        let login = {
            // 组件结构
            template: "<div><h1>临时抱佛脚</h1></div>",
        };
        const app = new Vue({
            el: '#app',
            components:{
                // 用于注册组件
                // 调用组件名: 定义组件名
                item: login,
                // 调用组件名和定义组件名相同时,可以简写一个
                login,
            }
        });
    </script>

2. 在 script 外声明局部组件

用template标签声明局部组件

<template id="loginTem">
    <div>
        <h3>淄博吃烧烤</h3>
    </div>
</template>

定义一一个变量用于存放组件模板

let login = {
	// 绑定自定义的template模板选择器
    template: "#loginTem", 
}

注册组件

components:{
    login,
    item: login,
}

调用组件

<div id="app">
    <item></item>
    <login></login>
</div>

实例

<div id="app">
        <!-- 4. 调用组件 -->
        <item></item>
        <login></login>
    </div>
    <!-- 1.声明一个局部组件的模板  template 标签-->
    <template id="loginTem">
        <div>
            <h3>淄博吃烧烤</h3>
        </div>
    </template>
    

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 2. 定义一一个变量用于存放组件模板
        let login = {
            template: "#loginTem", 
        }
        const app = new Vue({
            el: '#app',
            components:{
                // 3. 注册组件
                login,
                item: login,
            }
        });
    </script>

(三) 组件内数据传递

1. 父组件向子组件传值

🔰prop 单向数据流；父子之间的单向数据流，父级的 prop可以流向子组件，但是反过来不行

1）父组件通过属性将值传递给子组件

<div id="app">
	<login :user="user"></login>
</div>

2）组件内部通过 props 接收传递过来的值

// 子组件
let login = {
    template: "#loginTem", 
    // 用prop进行过度，将data内的数据传给组件内
    props:["user"], 
}
// 父组件
const app = new Vue({
    el: '#app',
    data: {
        user:"admin",
    },
    components:{
        login,
    }
});

父组件通过属性将值传递给子组件，子组件通过props 接受传递过来的值，并使用。

2. 子组件向父组件传值

1）子组件通过自定义事件向父组件传递信息

<template id="item">
	<div>
		<button @click="$emit('asa')">到来</button>
	</div>
</template>

2）父组件监听子组件的事件

<div id="app">
	<login @asa="find"></login>
</div>

子组件通过this.$etim告诉父组件使用自定义asa事件。父组件接到信息后，使用自定义事件asa，使用find方法。

3）子组件通过自定义事件向父组件传递信息（带参数）

<template id="item">
	<div>
		<button @click="$emit('asa', 0.1)">到来</button>
	</div>
</template>

4）父组件监听子组件的事件

<div id="app">
	<login @asa="find($event)"></login>
</div>

find(a) {
	this.arr = "来到银川"+a
}

子组件通过this.$etim传递信息，同时告诉父组件使用自定义asa事件。父组件接到信息后，使用自定义事件asa，用$event接受传递过来的值，并把传值给find方法，在内进行操作。

3. 非父子组件间传值（兄弟组件）

父组件作为媒介，在父组件中使用$emit触发自定义事件，然后分别由兄弟组件监听这个事件。

四. vue-router 路由

🔰路由：根据请求的路径按照一定的规则进行的请求，从而帮助我们实现统一的管理。
🔰作用：实现我们组件之间的跳转。

(一) 路由组件间跳转

先引入路由 vue-router 3.0
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
声明路由组件模板（前面已经讲过组件的声明，不在叙述）
定义路由对象的规则（内含路由路径以及路由对应的组件）

 const router = new VueRouter({
	routes: [
		// 设置默认路由：第一次打开页面显示的组件
		{
			path: "/",
			// redirect：用来访问是默认路径”/“跳转到指定的页面
			redirect: "/login",
		},{
			path: "/login", // 路由的路径
			component: login, // 路径对应的组件
		},{
			path: '/register', // 路由的路径
			component: register, //路由对应的组件
		}
	]
});

路由对象注册到vue实例中
reuter:reuter
显示路由组件，需要我们更该路由路径实现内容的变化
<router-view></router-view>
根据切换路由来实现
1）<a href="#/login">跳转登录</a>
2）<router-link to="/login" tag="div">跳转登录</router-link>

⚪以下实例中用的是第一种方式

实例根据路由实现组件之间的跳转

<div id="app">
        <!-- 6. 根据切换路由来实现 -->
        <a href="#/login">跳转登录</a>
        <a href="#/register">跳转注册</a>
        <!-- 5. 显示路由组件：需要我们更改路径实现内容的变化 -->
        <router-view></router-view>
        <h1>123</h1>
    </div>

    <login></login>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 1. 引入路由 vue-router v3.x -->
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

    <script>
        // 2. 声明路由组件模板
        const login = {
            template: '<h1>Login</h1>',
        }
        const register = {
            template: '<h1>Register</h1>',
        }
        // 3.定义路由对象的规则
        const router = new VueRouter({
            routes: [
     	       // 设置默认路由：第一次打开页面显示的组件
				{
					path: "/",
					redirect: "/login",
				},
                {
                    path: "/login", // 路由的路径
                    component: login, // 路径对应的组件
                },
                {
                    path: '/register', // 路由的路径
                    component: register, //路由对应的组件
                }
            ]
        });
        const app = new Vue({
            el: '#app',
            comments: {
                login,
            },
            // 4. 路由对象注册到vue实例中
            router: router, // 设置路由对象
        })
    </script>

⚪接下来我们使用第二种方式来完成路由切换实现

vue内实现路径跳转的方式：用于替换a标签切换路由
<router-link to="/login" tag="div">跳转登录</router-link>
🔰好处就是不需要加入#号
🔰to 接入书写的路径
🔰tag：将router-link 渲染为指定的标签属性

实现时只需把上述实例的第六步换成这个方式就可以了，其他的地方没有改变

(二) 路由参数传递

🔰路由传递参数有两种方式

传统方式传参（使用问号来书写传参值 [？属性名=值 & 属性名=值 ]）
<router-link to="/login?name=张三&age=25">查看咨询</router-link>
restful 来传递参数（路径只存放传递的参数）
<router-link to="/item/6/10">查看比赛</router-link>

<div id="app">
        <!-- 1. 传统传参方式 -->
        <router-link to="/login?name=张三&age=25">查看咨询</router-link>
        <!-- 2. restful 来传递 -->
        <router-link to="/item/6/10">查看比赛</router-link>
        <router-view></router-view>
    </div>

    <template id="login">
        <div>
            <h1>edg.uzi登陆成功</h1>
            <h2>本台记者{{name}}年龄{{age}}</h2>
        </div>
    </template>

    <template id="item">
        <div>
            <h1>明天晚上打jdg</h1>
            <!--使用变量-->
            <h2>{{mouth}}月 {{day}}日</h2>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 1. 引入路由 vue-router v3.x -->
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

    <script>
        let login = {
            template: "#login",
            data() {
                return {
                    name: '',
                    age: '',
                };
            },
            created() {
            	// 把传进来的参数赋值给data内的变量
                this.age = this.$route.query.age
                this.name = this.$route.query.name
            },
        };
        let item = {
            template: "#item",
            data() {
                return {
                    mouth: '',
                    day: '',
                };
            },
            created() {
                this.mouth = this.$route.params.mouth;
                this.day = this.$route.params.day;
            },
        };
        const router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/login",
                },
                {
                    path: "/login",
                    component: login,
                },
                {
                    path: '/item/:mouth/:day',
                    component: item,
                }
            ]
        });
        const app = new Vue({
            el: '#app',
            comments: {
                item,
            },
            router: router,
        })
    </script>

在这里插入图片描述

(三) 嵌套路由

组件内调用组件，实现路由嵌套

<div id="app">
        <router-view></router-view>
    </div>
    <template id="login">
        <div>
            <!-- 声明清楚外层和内层的路由 -->
            <router-link to="/login/no1">打的肯定不行</router-link>
            <router-link to="/login/yes">宝刀未老</router-link>
            <router-view></router-view>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 1. 引入路由 vue-router v3.x -->
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

    <script>
        let login = {
            template: "#login",
        };
        const no1 = {
            template: '<h1>一看年纪打了还上场</h1>',
        };
        const yes = {
            template: '<h1>永远的神</h1>',
        };
        const router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/login",
                },
                {
                    path: "/login",
                    component: login,
                    // 创建子路由
                    children:[
                        {path: 'no1', component:no1},
                        {path: 'yes', component:yes}
                    ]
                },
            ]
        });
        const app = new Vue({
            el: '#app',
            router: router,
        })
    </script>

(四) 路由案例

路由案例
点击不同的组件，实现不同的页面效果

<!DOCTYPE html>
<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>
    <style>
        ul {
            width: 400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        ul li {
            /* 去除自带的样式 */
            list-style: none;
        }
        h1 {
            width: 400px;
            color: #00ffff;
            margin: 0 auto;
        }
        img {
            width: 100%;
            height: 75vh;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li><router-link to="/index">首页</router-link></li>
            <li><router-link to="/add">歌曲播放</router-link></li>
            <li><router-link to="/songlist">歌曲列表</router-link></li>
            <li><router-link to="/song">歌手</router-link></li>
            <li><router-link to="/list">歌手列表</router-link></li>
        </ul>
        <router-view></router-view>
    </div>


    <!-- 首页 -->
    <template id="index">
        <div>
            <h1 >这是首页</h1>
            <img src="./img/hua1.jpg" alt="">
        </div>
    </template>

    <!-- 歌曲播放 -->
    <template id="add">
        <div>
            <h1>这是歌曲播放页面</h1>
            <img src="./img/lan1.jpg" alt="">
        </div>
    </template>

    <!-- 歌曲列表 -->
    <template id="songlist">
        <div>
            <h1>这是歌曲列表页面</h1>
            <img src="./img/mao1.jpg" alt="">
        </div>
    </template>

    <!-- 歌手 -->
    <template id="song">
        <div>
            <h1>这是歌手页面</h1>
            <img src="./img/mao2.jpg" alt="">
        </div>
    </template>

    <!-- 歌手列表 -->
    <template id="list">
        <div>
            <h1>这是歌手列表页面</h1>
            <img src="./img/pugongyin.jpg" alt="">
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

    <script>
        let index = {
            template: '#index',
        }
        let add = {
            template: '#add',
        }
        let songlist = {
            template: '#songlist',
        }
        let song = {
            template: '#song',
        }
        let list = {
            template: '#list',
        }
        const router = new VueRouter ({
            routes: [
                {path: '/', component:index},
                { path:'/index', component:index },
                { path:'/add', component:add},
                { path:'/songlist', component:songlist},
                { path:'/song', component:song},
                { path:'/list', component:list}
            ]
        })

        const app = new Vue( {
            el: "#app",
            data: {},
            router,
        })
    </script>
</body>

</html>

在这里插入图片描述

路由嵌套案例
点击不同的组件，实现不同的页面效果

<!DOCTYPE html>
<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>
    <style>
        ul {
            width: 400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        ul li {
            /* 去除自带的样式 */
            list-style: none;
        }

        h1 {
            width: 400px;
            color: #00ffff;
            margin: 0 auto;
        }

        img {
            width: 100%;
            height: 45vh;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li><router-link to="/index">首页</router-link></li>
            <li><router-link to="/add">歌曲播放</router-link></li>
        </ul>
        <router-view></router-view>
    </div>

    <!-- 首页 -->
    <template id="index">
        <div>
            <h1 class="index">这是首页</h1>
            <router-link to="/index/song">歌手</router-link>
            <router-link to="/index/list">歌手列表</router-link>
            <img src="./img/hua1.jpg" alt="">
            <router-view></router-view>
        </div>
    </template>

    <!-- 歌曲播放 -->
    <template id="add">
        <div>
            <h1>这是歌曲播放页面</h1>
            <img src="./img/lan1.jpg" alt="">
        </div>
    </template>

    <!-- 歌曲列表 -->
    <template id="songlist">
        <div>
            <h1>这是歌曲列表页面</h1>
            <img src="./img/mao1.jpg" alt="">
        </div>
    </template>

    <!-- 歌手 -->
    <template id="song">
        <div>
            <h1>这是歌手页面</h1>
            <img src="./img/mao2.jpg" alt="">
        </div>
    </template>

    <!-- 歌手列表 -->
    <template id="list">
        <div>
            <h1>这是歌手列表页面</h1>
            <router-link to="/index/list"></router-link>
            <router-view></router-view>
            <img src="./img/pugongyin.jpg" alt="">
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

    <script>
        let index = {
            template: '#index',
        }
        let add = {
            template: '#add',
        }
        let songlist = {
            template: '#songlist',
        }
        let song = {
            template: '#song',
        }
        let list = {
            template: '#list',
        }
        const router = new VueRouter({
            routes: [
                { path: '/', redirect: "index" },
                { path: '/index', component: index,
                    children:[
                        { path: 'song', component: song},
                        { path:'list', component: list,
                            children:[
                                { path: 'songlist', component: songlist}
                            ],
                        },
                    ],
                },
                { path: '/add', component: add },
            ]
        })

        const app = new Vue({
            el: "#app",
            data: {},
            components: {
                list,
            },
            router,
        })
    </script>
</body>
</html>

在这里插入图片描述

五. Vue 过度

(一) transition 组件

🔰Vue提供了transition 组件，可以给任何元素和组件添加进入/离开过渡，从而实现简单的动画效果，如淡入淡出(透明度的渐隐)、飞入等。
🔰transition组件只会把过渡效果应用到其包裹的内容上。

🔰基础语法：

<transition name="fade">
	<div></div>
</transition>

🔰过渡效果的实现是通过<transition></transition>标签把要做动画的元素包裹起来，name=”fade“ 中的 “fade” 是自定义的名称，会被当成类的前缀，对应样式表里的class。

(二) transition 组件应用过度动画

🔰Vue 为 transition 标签内部的元素提供了3个进入的过渡类和3个离开的过渡类，共6个类。

过渡类型	说明
v-enter	进入过渡的开始状态，作用于开始的一帧
v-enter-active	进入过渡生效时的状态，作用于整个过程
v-enter-to	进入过渡的结束状态，作用于结束的一帧
v-leave	离开过渡的开始状态，作用于开始的一帧
v-leave-active	离开过渡生效时的状态，作用于整个过程
v-leave-to	离开过渡的结束状态，作用于结束的一帧

1. 单元素/组件过渡

🔰transition 组件只包裹一个元素，在该元素插入或删除时定义过渡动画。

 <transition name="fade">
	<p v-if="show">hello</p>
</transition>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}

五. Vue cli 脚手架

🔰cli是命名行界面，vue cli主要是npm包，一个开发的环境依赖。
🔰vue cli是一个基于vue.js进行快速开发的完整的系统。

(一) vue cli 安装

下载node.js
http://www.nodejs.com.cn/
直接选择下载18.16.0版本即可
直接下一步下一步安装。
检查安装成功
win+r --》cmd —》npm -v
运行npm -v, node -v
返回版本号为成功
配置node.js环境变量
强调：首先将node.js文件夹右键属性 —> 安全位置 --> 将权限全部放开
node.js文件夹中创建如下两个文件夹：
node_cache, node_global
环境配置
window系统：
1)npm config set cache "C:\Program Files\nodejs\node_cache":你的电脑上对应node_cache文件夹的位置
2)npm config set prefix 'C:\Program Files\nodejs\node_global' 你的电脑上对应node_globel文件夹的位置
验证node.js配置环境
npm config ls
$会出现的文字，为成功： "user" config from C:\Users\86151.npmrc cache = "C:\Program Files\nodejs\node_cache" prefix = "C:\Program Files\nodejs\node_global" registry = "http://registry.npm.taobao.org"$

(二) 脚手架安装

卸载旧的脚手架
npm uninstall -g @vue/cli 卸载3.0版本
npm uninstall -g vue-cli 卸载2.0版本
vue Cli官网
https://cli.vuejs.org/zh/guide/installation.html
安装vue Cli
npm install -g @vue/cli
验证 vue -V

(三) vue 指令不存在设置

找到vue.cmd所在的文件：C:\Program Files\nodejs\node_global
计算机右键属性 ————》高级属性设置 —》
环境变量：
NODE_HOME=C:\Program Files\nodejs\node_global

用户变量
path =新建 --> %NODE_HOME%

(四) 创建第一个脚手架项目

在命令行进入项目目录
输入指令vue create 项目名称
选择手动安装
选择Babel router CSS Pre-processors
选择vue2.0
不选择history路由
选择scss语法
选择文件的格式
是否为样板

(五) 项目的基本组成

(六) 项目运行

cd 到你的项目名出
对应文件 npm run serve
访问项目
http://localhost:8080/

在这里插入图片描述

(七) 项目代码实操

assets 内一般存放静态资源，如图片，js数据集等。
index.js 内引入各类资源，进行路由注册，以及定义路由规则等。

🔰路由对应的组件分配有两种组件引入方式：

先引入组件，再进行分配

直接在分配的同时引入组件

组件放置在components 文件夹中
页面放置在views 文件夹中

🔰在组件和页面中可以写js，css等。
🔰在style中写上scoped，css样式只在当前style中生效；若不写，css样式会在其其他地方也会生效，发生样式混乱

在App.vue中引用相关的路由跳转页面

此页面同样也为组件，可进行样式设计以及js编写。
引入数据集.js文件，进行数据获取

六. 生命周期

初始化阶段(挂载)
1.beforeCreate()：生命周期中的第一个函数，该函数在执行vue实例时候完成了自身事件和生命周期函数初始化绑定的工作, vue实例内还没将 Data el methods给渲染
2.created()：生命周期内的第二个函数,该函数在执行的时候vue实例已经初始化了Data，以及methods相关属性。
3.beforeMount()：生命周期内的第三个函数，该函数在执行vue将e1指定作用范围内的模版编译。
4.mounted()：生命周期内的第四个函数，该函数已经将数据给加载到页面中并且更新和渲染与页面
运行阶段(更新)
5.beforeUpdate()：生命周期内的第5个函数，该函数data数据变化但是原本vue数据页面还是原本的值
6.updated()：生命周期内的第6个函数，该函数data数据变化，页面也发生了变化，页面数据和data内一致了
销毁阶段
7. beforeDestroy()：生命周期内的第7个函数，执行此函数时，将vue所以数据都进行了销毁
8.destroyed()：生命周期内的第8个函数，vue实例彻底销毁

var app = new Vue({
        el: '#app',
        data: {
            massage: 12,
        },
        // 1. 初始化阶段
        beforeCreate() {
            // 1.生命周期中的第一个函数，该函数在执行vue实例时候完成了自身事件
            // 和生命周期函数初始化绑定的工作, vue实例内还没将 Data el methods给 渲染
            console.log("beforeCreate: "+ this.message);
        },
        created() {
            // 2.生命周期内的第二个函数,该函数在执行的时候vue实例已经初始化了Data,
            // 以及methods相关属性
            console.log("created: "+ this.message);
        },
        beforeMount() {
            //3.生命周期内的第三个函数，该函数在执行vue将e1指定作用范围内的模版编译
            console.log("beforeMount: "+ $(".title").text());
        },
        mounted(){
            //4.生命周期内的第四个函数，该函数已经将数据给加载到页面中并且更新和渲染与页面
            console.log("mounted: "+ $(".title").text());
        },
        // 2. 运行阶段
        beforeUpdate() {
            //5.生命周期内的第5个函数，该函数data数据变化但是原本vue数据页面还是原本的值
            console.log("beforeUpdate: "+ this.message + " ====== " + $(".title").text());
        },
        updated() {
            //6.生命周期内的第6个函数，该函数data数据变化， 页面也发生了变化，页面数据和data内一致了
            console.log("update: "+ this.message + " =====" + $(".title").text());
        },
        // 3. 销毁阶段
        beforeDestroy() {
            // 7.生命周期内的第7个函数，执行此函数时，将vue所以数据都进行了销毁
        },
        destroyed() {
            // 8.生命周期内的第8个函数，vue实例彻底销毁
        }
    })

七. Element 组件库

使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。

1. 引入elementui到脚手架中
npm i element-ui -S

在package.json文件中有"element-ui": "^2.15.13",这句话表示添加成功

在main.js内添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

八. 网络应用

🔰Vue 结合网络数据开发应用

(一) axios 基本使用

🔰功能强大的网络请求库
🔰axios 必须先导入才可以使用：

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

🔰then 方法中的回调函数回在请求成功或失败时触发
🔰通过回调函数的形参可以获取相应内容，或错误信息
在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="get 请求" class="get">
        <input type="button" value="post 请求" class="post">
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var get = 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(response);
            })
    }
    var post = document.querySelector('.post').onclick = function() {
        axios.post("https://autumnfish.cn/api/user/reg",
            { username: "买卖" })
            .then(function (response) {
                console.log(response);
            }, function (err) {
                console.log(response);
            })
    }
</script>

在这里插入图片描述

(二) axios 加 vue

🔰axios 回调函数中的this已经改变，无法访问到data中的数据
🔰把this保存起来，回调函数中直接使用保存的this即可
var that = this; // 保存 this
that.joke = response.data; // 使用 this
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="刷新" @click="get">
        <div>{{joke}} </div>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            joke:"搞笑的笑话"
        },
        methods:{
            get:function() {
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then
                (function(response) {
                    console.log(response.data);
                    that.joke = response.data;
                }, function(err) { })
            }
        }
    })
</script>

在这里插入图片描述

六. 综合应用

三. vue中常用ES6语法

(一) 变量，常量声明

1. let 命令

🔰let 用来声明变量，与var声明变量有如下不同点：
1. 不允许重复声明；
2. 不存在变量提升：先定义，后使用
3. 块级作用：括号区域
4. 暂时性死区：如果区块中存在let，对let声明的变量，从该区开始就形成了封闭作用域。
5. let命令与for语句：在for语句中，用let命令定义的变量，作用域在for语句范围内。

2. const 命令

🔰const 命令用来声明一个只读的常量，一旦声明，值就不能改变。使用特性跟let命令使用的特性一样。只能读值，不能改写。

3. rest 参数

🔰rest参数也称不定参数或剩余参数，形式为".变量名"，用于获取函数或数组解构赋值中的多余参数。(…) 称为扩展运算符。

4. 箭头函数

🔰使用箭头“=>”来定义函数，箭头函数省略了function
🔰语法如下：
（参数1，参数2……，参数n）=> { 函数体 }
🔰说明：

当参数只有一个参数时，参数列表的圆括号可以省略，但其他情况必须要。
当函数体只有一条return语句时，可省略花括号和return关键字。
如果箭头函数直接返回一个对象，必须在对象外面加括号。

七. Vue 数组处理相关概念

(一) 数组相关API

1. 修改原有数据

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2. 生成新的数组

filter()
concat()
slice()

(二) 数组响应式变化

修改响应式数据
Vue.set(vm.items, indexOfltem, newValue)

参数一：要处理的数组名称
参数二：要处理的数组的索引
参数三：要处理的数组的值