Vue 基础入门

小明 2025-05-07 14:54:23 15

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

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

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

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

	{{ message}}

(三) 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的语法即可

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

    
        
        {{ message}}
        
         {{school.name}} {{school.mobile}} 
        
         {{campus[0]}} 
    



    var app = new Vue({
        el:"#app",
        data:{
            // 字符串
            message:"Hello Vue", 
            // 对象
            school: {
                name:"艾莉",
                mobile:"1234567"
            },
            // 数组
            campus:["北京小区", "上海小区", "新疆小区"]
        }
    })

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

(五) methods：方法

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

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

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

二. 内置指令

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

🔰作用：设置标签的内容

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

大家好

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

 北民大，{{message}}

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

大家好 
 北民大，{{message + "!"}}

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

🔰作用：设置元素的 innerHTML

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

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

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

实例：



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

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

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

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

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

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

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

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

（频繁切换，用 v-show）

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

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

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

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

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

我是人！
好热呀！

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

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

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

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

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

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

// 建议使用以下方式

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

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

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

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

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

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

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

    
        
        
        
                {{ index +1}} 学习专区 {{ item }}
            
        

            {{ item.name }}
        
        
            {{ index }}-- {{key }} -- {{value}}

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

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

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

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

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

    
        
        {{massage}} 
    



    var app = new Vue({
        el:"#app",
        data:{
            massage:'艾莉'
        }
    })

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

修饰符	作用	示例
.number	转换为数值
.trim	去掉开始和结尾的空格
.lazy	将 input 事件切换为 change 事件

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

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

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

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

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

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

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

1. 事件方法传参

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

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

dolt:function(p1, p2) { console.log(p1 + p2); }

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

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

    
        
        
    



    var app = new Vue({
        el:"#app",
        methods:{
            dolt:function(p1, p2) {
                console.log(p1 + p2);
            },
            sayHi:function() {
                alert('你好')
            }
        }
    })

2. 事件修饰符

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

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










...


...

跳转

点击

3. 按键修饰符

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







Do something

自定义按键修饰符：

全局config.keyCodes对象

Vue.config.keyCodes.f1 ==112

(九) 自定义指令

🔰为何需要自定义指令？

内部指令不满足需求

🔰Vue.directive 注册全局指令

全局指令在任何组件中使用

🔰diretives 定义局部指令

局部指令只能在当前页面使用

1. 获取元素焦点

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

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

自定义指令用法

2. 改变元素背景颜色

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

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

自定义指令用法

3. 局部指令

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

三. 内置组件

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

(一) 全局组件

🔰定义全局的组件: Vue.component(组件的名称, 组件的配置)

Vue.component("login", {....});

🔰组件的配置 template：“用于书写我们的html代码”

template: "泰裤辣"

🔰 需要根据组件名称来使用全局组件

🔰注册组件的时候尽量使用驼峰命名法>

	
    



	// 1. 定义全局组件
    Vue.component("login", {
	    // 2. 组件配置
        template: "泰裤辣",
    });
    const app = new Vue({
        el: "#app",
        data: {},
    })

(二) 局部组件

🔰给注册的vue 实例一个 components属性来完成组件注册。

🔰局部组件有两种声明方式：

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

1. 在 script 内声明局部组件

声明局部组件

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

注册组件

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

调用组件

实例

		
        
        
    
    
    
        // 声明局部组件
        let login = {
            // 组件结构
            template: "临时抱佛脚",
        };
        const app = new Vue({
            el: '#app',
            components:{
                // 用于注册组件
                // 调用组件名: 定义组件名
                item: login,
                // 调用组件名和定义组件名相同时,可以简写一个
                login,
            }
        });

2. 在 script 外声明局部组件

用template标签声明局部组件

    
        淄博吃烧烤

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

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

注册组件

components:{
    login,
    item: login,
}

调用组件

实例

        
        
        
    
    
    
        
            淄博吃烧烤
        
    
    
    
    
        // 2. 定义一一个变量用于存放组件模板
        let login = {
            template: "#loginTem", 
        }
        const app = new Vue({
            el: '#app',
            components:{
                // 3. 注册组件
                login,
                item: login,
            }
        });

(三) 组件内数据传递

1. 父组件向子组件传值

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

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

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

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

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

2. 子组件向父组件传值

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

	
		到来

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

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

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

	
		到来

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

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

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

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

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

四. vue-router 路由

🔰路由：根据请求的路径按照一定的规则进行的请求，从而帮助我们实现统一的管理。

🔰作用：实现我们组件之间的跳转。

(一) 路由组件间跳转

先引入路由 vue-router 3.0
声明路由组件模板（前面已经讲过组件的声明，不在叙述）
定义路由对象的规则（内含路由路径以及路由对应的组件）

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

路由对象注册到vue实例中
reuter:reuter
显示路由组件，需要我们更该路由路径实现内容的变化
根据切换路由来实现
1）跳转登录
2）跳转登录

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

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

        
        跳转登录
        跳转注册
        
        
        123
    
    
    
    
    
    
        // 2. 声明路由组件模板
        const login = {
            template: 'Login',
        }
        const register = {
            template: 'Register',
        }
        // 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, // 设置路由对象
        })

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

vue内实现路径跳转的方式：用于替换a标签切换路由

跳转登录

🔰好处就是不需要加入#号

🔰to 接入书写的路径

🔰tag：将router-link 渲染为指定的标签属性

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

(二) 路由参数传递

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

传统方式传参（使用问号来书写传参值 [？属性名=值 & 属性名=值 ]）
查看咨询
restful 来传递参数（路径只存放传递的参数）
查看比赛

        
        查看咨询
        
        查看比赛
        
    
    
        
            edg.uzi登陆成功
            本台记者{{name}}年龄{{age}}
        
    
    
        
            明天晚上打jdg
            
            {{mouth}}月 {{day}}日
        
    
    
    
    
    
        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,
        })

(三) 嵌套路由

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

        
    
    
        
            
            打的肯定不行
            宝刀未老
            
        
    
    
    
    
    
        let login = {
            template: "#login",
        };
        const no1 = {
            template: '一看年纪打了还上场',
        };
        const yes = {
            template: '永远的神',
        };
        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,
        })

(四) 路由案例

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


    
    
    
    路由案例
    
        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;
        }
    


    
        首页
            歌曲播放
            歌曲列表
            歌手
            歌手列表
        
    
    
        
            这是首页
            
    
    
    
        
            这是歌曲播放页面
            
    
    
    
        
            这是歌曲列表页面
            
    
    
    
        
            这是歌手页面
            
    
    
    
        
            这是歌手列表页面
            
    
    
    
    
        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,
        })

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


    
    
    
    嵌套路由案例
    
        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;
        }
    


    
        首页
            歌曲播放
        
    
    
        
            这是首页
            歌手
            歌手列表
            
    
    
    
        
            这是歌曲播放页面
            
    
    
    
        
            这是歌曲列表页面
            
    
    
    
        
            这是歌手页面
            
    
    
    
        
            这是歌手列表页面
            
            
            
    
    
    
    
        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,
        })

五. Vue 过度

(一) transition 组件

🔰Vue提供了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 组件只包裹一个元素，在该元素插入或删除时定义过渡动画。

hello

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

(二) 脚手架安装

卸载旧的脚手架
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%
(四) 创建第一个脚手架项目
1. 在命令行进入项目目录
2. 输入指令vue create 项目名称
3. 选择手动安装
4. 选择Babel router CSS Pre-processors
5. 选择vue2.0
6. 不选择history路由
7. 选择scss语法
8. 选择文件的格式
9. 是否为样板
(五) 项目的基本组成

(六) 项目运行
1. cd 到你的项目名出
2. 对应文件 npm run serve
3. 访问项目
  http://localhost:8080/
(七) 项目代码实操
1. assets 内一般存放静态资源，如图片，js数据集等。
2. index.js 内引入各类资源，进行路由注册，以及定义路由规则等。
🔰路由对应的组件分配有两种组件引入方式：
1. 先引入组件，再进行分配
1. 直接在分配的同时引入组件
1. 组件放置在components 文件夹中
2. 页面放置在views 文件夹中
🔰在组件和页面中可以写js，css等。
🔰在style中写上scoped，css样式只在当前style中生效；若不写，css样式会在其其他地方也会生效，发生样式混乱
1. 在App.vue中引用相关的路由跳转页面
  此页面同样也为组件，可进行样式设计以及js编写。
2. 引入数据集.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",这句话表示添加成功
  1. 在main.js内添加
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
  八. 网络应用
  
  🔰Vue 结合网络数据开发应用
  
  (一) axios 基本使用
  
  🔰功能强大的网络请求库
  🔰axios 必须先导入才可以使用：
  🔰then 方法中的回调函数回在请求成功或失败时触发
  🔰通过回调函数的形参可以获取相应内容，或错误信息
```
    
        
        
    



    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);
            })
    }
```
  (二) axios 加 vue
  
  🔰axios 回调函数中的this已经改变，无法访问到data中的数据
  🔰把this保存起来，回调函数中直接使用保存的this即可
  var that = this; // 保存 this
  that.joke = response.data; // 使用 this
```
    
        
        {{joke}} 
    




    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) { })
            }
        }
    })
```
  六. 综合应用
  
  三. 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）=> { 函数体 }
  🔰说明：
  1. 当参数只有一个参数时，参数列表的圆括号可以省略，但其他情况必须要。
  2. 当函数体只有一条return语句时，可省略花括号和return关键字。
  3. 如果箭头函数直接返回一个对象，必须在对象外面加括号。
  七. Vue 数组处理相关概念
  
  (一) 数组相关API
  
  1. 修改原有数据
  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. reverse()
  2. 生成新的数组
  1. filter()
  2. concat()
  3. slice()
  (二) 数组响应式变化
  
  修改响应式数据
  Vue.set(vm.items, indexOfltem, newValue)
  1. 参数一：要处理的数组名称
  2. 参数二：要处理的数组的索引
  3. 参数三：要处理的数组的值

The End

标签：

建站主机