【初级】个人分享Vue前端开发教程笔记

2022-03-10 作者: 魔王哪吒

大家好，我是魔王哪吒，很高兴认识你~~

哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，加油！欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

如果这篇文章有帮助到你，给个❤️关注，❤️点赞，❤️鼓励一下作者，接收好挑战了吗？文章公众号首发，关注 程序员哆啦A梦 第一时间获取最新的文章

❤️笔芯❤️~

作为一名Vue开发使用者，必须了解其使用规则。

Vue.js的发展

前端发展的行业非常快，大部分学习者赶不上发展的速度，每天都在学习的，的，这些前端（）框架和组件化学习，加上的出现，越来越多的前端投入了学习中。❤️

是一个用来开发界面的前端库，轻量级，具有响应式编程和组件化的特点。

hello world

引入

 // 使用CDN方法

通过进行安装：

npm install vue

示例：


 {{message}}


var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello world, 我是掘金，魔王哪吒'
 }
})

特点：数据绑定

在浏览器控制台，输出结果，表示和视图中是绑定的。

绑定用户输入的数据，视图会随着用户的输入而变化❤️


 dadaqianduan is {{message}}

的值会随着用户在中输入的值的变化而变化，而无需我们手动去获取元素的值再同步到中。

特点:组件化

可以自己定义标签，在模板中使用它

示例：

命令行工具：

$npm install --global vue-cli

$vue init webpack my-project

$cd my-project

$npm install

$npm run dev

Vue实例

的使用是通过构造函数创建一个的实例：。

一个实例相当于一个模式中的，做图如下：

在实例化的时候，可以传入一个选项对象（数据，模板，挂载元素，方法，生命周期钩子） 等。

模板

类型是字符串，元素或者是函数，作用是为实例提供挂载元素。一般来说我们会使用选择符，或是原生的元素。

如：，指定了，实例将立即进入编译过程。

类型为字符串，默认会将值替换挂载元素，值对应的元素，合并挂载元素和模板根节点的属性。

数据

实例中可以通过属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。

示例：

var data = {a:1}


var vm = new Vue({
 data: data
})

vm.$data === data // true
vm.a === data.a // true

vm.a = 2
data.a // 2

data.a = 3
vm.a // 3

在模板中使用就会输出的值，修改的值，模板中的值会随之改变，称为响应式数据。

组件类型的实例可以通过获取数据，同一样，也需要在初始化时预设好。



var myComponent = Vue.component("my-component",{
 props: ['title','content'],
 template: '{{title}}
{{content}}'
})

方法

在对象中来定义方法，示例：



new Vue({
 el: '#app',
 data: {a:1},
 methods: {
  daBtn: function(){
   console.log(this.a);
  }
 }
});

生命周期

，在实例开始初始化时同步调用，此时数据观测，事件等都尚未初始化。

，在实例创建之后调用，此时已完成数据绑定，事件方法，但尚未开始编译，即是未挂载到中。

，在之前运行。

，在编译结束时调用，此时所有指令已生效，数据变化已能触发更新，但不保证已插入文档。

，在开始销毁实例时调用。

，在实例被销毁之后调用，此时所有绑定和实例指令都已经解绑，子实例也被销毁。

，在实例挂载之后，再次更新实例并更新完结构后调用。

，需要配合动态组件属性使用，在动态组件初始化渲染的过程中调用该方法。

文本插值

数据绑定基础形式是文本插值，使用，为语法：

hello {{name}}

单次插值：

{{name}}

HTML属性

示例：

绑定表达式

放在标签内的文本内容称为绑定表达式。每个绑定中只能包含单个表达式，并不支持语句，不支持正则表达式。

过滤器

允许在表达式后添加可选的过滤器，以管道符指示，可以有多个过滤器链式使用：

{{time | paramsTime}}

计算属性

var vm = new Vue({
 el: '#app',
 data: {
  firstName: 'da',
  lastName: '哪吒',
 }
 computed: {
  fullName: function() {
   // this 指向vm实例
   return this.firstName + ' ' + this.lastName
  }
 }
});

{{firstName}}
{{lastName}}
{{fullName}}

Setter

示例：

var vm = new Vue({
 el: '#el',
 data: {
  num: 100,
 }
 computed: {
  price: {
   set: function(newValue){
    this.num = newValue * 100;
   },
   get: function() {
    return (this.num/100).toFixed(2);
   }
  }
 }
});

表单控件

输入框示例：



dadaqianduan {{message}}

单选框示例：

 男 
 女 

{{gender}}

复选框，单个勾选框和多个勾选框



dadaqianduan{{checked}}

多个勾选框，使用相同的属性名称，且属性为数组：

1
2
3
{{multiChecked.join('|')}}

单选：


dadaqianduan: {{selected}}

多选：


dadaqianduan: {{multiSelected.join('|')}}

绑定value

表单控件的值同样可以绑定在实例的动态属性上。

// checkbox

选中：vm.checked==vm.a

未选中：vm.hchecked==vm.b

class与style绑定

属性，绑定的数据可以是对象和数组



vm实例中需要包含：
data: {
 active: true
}

渲染结果：

数组语法



data: {
 classA: 'class-a',
 classB: 'class-b',
}

渲染结果：`

内联样式绑定



data: {
 dada: {
  color: 'green',
  fontSize: '10px'
 }
}

模板渲染

前端渲染的优点：

第一，业务分离，后端只需要提供接口，前端在开发时也不需要部署对应得后端环境，通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。

第二，计算量得转移，原本需要后端渲染得任务交给了前端，减轻了服务器得压力。

后端渲染的优点：

第一，对搜索引擎比较友好。

第二，首页加载时间端，后端渲染加载完成后就直接显示，但前端渲染在加载完成后还需要有段渲染的时间。

条件渲染

和的作用是根据数据值来判断是否输出该元素，以及包含的子元素。

必须紧跟，不然该指令不起作用。

元素的使用会渲染并保存在中。只是切换元素的属性。

和的条件发生变化时，引起了操作级别的变化，而仅仅发生了样式的变化，从切换的角度来说，消耗的性能要比小。

切换时，会有一个局部编译/卸载的过程，因为中的模板也可能包括数据绑定或子组件。会确保条件块在切换当中适当地销毁与中间内部的事件监听器和子组件。

是惰性的，如果在初始条件为假时，本身什么都不会做，而则仍会进行正常的操作，然后把样式设置为。

有更高的切换消耗而有更高的初始渲染消耗

列表渲染

示例：



　　 {{item.web}}
　　 {{item.da}}
 

var vm = new Vue({
el : '#app',
 data: {
　　 items : [
　　　 { title : 'web-1', description : 'da-1'},
　　　 { title : 'web-2', description : 'da-2'},
　　　 { title : 'web-3', description : 'da-3'},
　　　 { title : 'web-4', description : 'da-4'}
　　 ]
 }
});

内置了变量，输出当前数组元素的索引，也可以自己指定索引的别名。`

{{index}} –

{{$index}} – {{item.title}}

在中提供了方法，修改数据的同时进行试图更新。

vm.$set('item[0]', {title: 'da'})

修饰符

: 等同于调用

: 使用模式添加事件监听器。

: 只当事件是从监听元素本身触发时才触发回调。

示例：

 // 阻止表单默认提交事件

 // 阻止默认提交事件且阻止冒泡

 // 也可以只有修饰符，并不绑定事件

Vue.extend()

提供了方法，创建基础构造器的“子类”

Vue.component('child', Child) // 全局注册子组件
 // 子组件在其他组件内的调用方式

var Child = Vue.extend({
template : '#child',
data : function() {
　　 return {
　　　 ….
　　 }
 }
….
})

内置指令

用于动态绑定元素属性，元素属性实际的值是由实例中的属性提供的。


new Vue({
 data: {
  avatar: 'http://'
 }
})

需要绑定在某个元素上，能避免未编译前的闪现问题。

作用于子组件上，实例可以通过访问子组件。

示例：




var Message = Vue.extend({
 props: ['content'],
 template: '{{content}}'
});
Vue.component('message', Message);

指令，表示跳过编译这个元素和子元素，显示原始的标签，用来减少编译时间。

指令相当于在元素上添加一个的属性，直到关联的实例结束编译。可以和规则一起使用，可以隐藏未编译的标签直到实例准备完毕。

{{msg}}

指令是用于标明元素或组件只渲染一次，即使随后发生绑定数据的变化或更新，该元素或组件以及包含的子元素都不会再次被编译和渲染。

自定义指令

通过方法注册一个全局自定义指令，接收参数和定义对象。是指令的唯一标识，定义对象就是指令的相关属性以及钩子函数。

局部注册：

var com = Vue.extend({
 directives: {
  'localDirective': {}
 }
});

指令实例属性

过滤器

可以在表达式后面添加可选的过滤器，以管道符表示：

{{time | paramsTime }}

过滤器的本质是一个函数，接受管道符前面的值作为初始值，同时也能接受额外的参数，返回值为经过处理后的输出值。

Vue.filter('date', function(value){
 if(!value instanceof Date) return value;
 return value.toLocalDateString();
})


 {{ date | date }}


var vm = new Vue({
 el: '#app',
 data: {
  date: new Date()
 }
})

组件注册

示例：

var MyComponent = Vue.extend({...})

提供了两种注册方式，分别是全局注册和局部注册。

Vue.component('my-component', MyComponent);

使用方法：


 


var MyComponent = Vue.extend({
template : '掘金 魔王哪吒'
})

Vue.component('my-component', MyComponent)
var vm = new Vue({
el : '#app'
});

局部注册

var Child = Vue.extend({
template : 'dadaqianduan.cn'
});

var Parent = Vue.extend({
template: ' 
　　 dada
　　 
　　 ',
 components: {
　　 'my-child': Child
 }
});

注册语法糖

示例：

// 全局注册
Vue.component('my-component', {
template : 'dadaqianduan.cn'
})

// 局部注册
var Parent = Vue.extend({
template: '
　　　 掘金 魔王哪吒 
　　　 
　　 ',
 components: {
　　 'my-child': {
　　　　template : 'dada'
　　 }
 }
});

组件props

将父组件的数据传递给子组件，子组件在接受数据时，需要显示声明。

示例：

Vue.component('my-child', {
props : ['parent'],
template: '{{ parent }} is from parent'
})

，接受的参数为原生构造器，，也可接受，意味任意类型均可。

多种类型：；参数必需：。

参数默认：

示例：

prop: {
 type: Object,
 default: function() {
  return {a: 'a'}
 }
}

组件间通信

提供了三个属性对其父子组件以及根实例进行直接访问。

，父组件实例
，包含所有子组件实例
，组件所在的根实例

建议使用在组件间传递数据。

$emit

示例：

events : {
'add' : function(msg) {
　　 this.todo.push(msg);
 }
}
methods: {
onClick : function() {
　　 this.$emit('add', 'dada');
 }
}

$dispatch

示例：

父组件：

events : {
'add' : function(msg) {
　　 this.todo.push(msg);
 }
}

子组件：

methods: {
toParent : function() {
　　 this.$dispatch('add', 'dada');
 }
}

子组件索引

提供了直接访问子组件的方式，除了外，还给子组件绑定一个指令。

在父组件中就可以通过的方式获取子组件实例。

组件缓存

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。

生命周期：

// 组件被创建之前
beforeCreate(){
 console.log("组件被创建之前")
}
created(){
 console.log("组件被创建之后")
}
beforeMount(){
 console.log("组件被渲染之前")
}
mounted(){
 console.log("组件被渲染之后")
}
beforeUpdate(){
 console.log("数据改变渲染之前")
}
updated() {
 console.log("数据改变渲染之后
}
beforeDestory(){
 // 组件销毁之前
}
destoryed(){
 // 销毁之后
}

自定义指令和过滤器

// 注册一个全局自定义指令
Vue.directive('focus', {
 inserted: function(el){
  // 聚焦元素
  el.focus()
 }
})

注册局部指令，组件中也接受一个的选项：

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

过滤器

过滤器可以用在两个地方：双花括号插值和表达式。

{{message | capitalize}}

可以在一个组件的选项中定义本地的过滤器：

filters: {
 capitalize: function(value) {
  if(!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1);
 }
}

Vue.filter("author",function(value){
 return value+"-dadaqianduan";
})

Vue.filter("money", function(value){
 return "$"+value;
})

axios基础get请求

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

特点：

安装：

使用：

npm install axios

执行请求：

axios.get('/user?ID=123')
 .then(function(response){
  console.log(response);
 })
 .catch(function(error){
  console.log(error);
 });

axios.get('/user', {
 paras: {
  ID: 123
 }
})
.then(function(response){
 console.log(response);
})
.catch(function(error){
 console.log(error);
});

执行post请求

axios.post('/user', {
 firstName: 'da',
 lastName: 'jeskson'
})
.then(function(response){
 console.log(response);
})
.catch(function(error){
 console.log(error);
});

执行多个并发请求

function getUserAccount() {
 return axios.get('/user/123');
}
function getUserPermissions() {
 return axios.get('/user/123/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct, perms){
}));

: 可以通过向传递相关配置来创建请求

// axios（config）
axios({
 method: 'post',
 url: '/user/123',
 data: {
  firstName: 'dada',
  lastName: 'dadaqianduan'
 }
});

// 发送get请求
axios('/user/123');

示例：

created(){
 this.$axios.get("http://xxx")
 .then(res=>{
  this.axiosData = res.data
 })
 .catch(error => {
  console.log(error);
 })
}
}

vue-axio全局配置和拦截器

全局的默认值：

axios.defaults.baseURL='http://xxx';

自定义实例默认值：

// 创建实例时设置的默认值
var instance = axios.create({
 baseURL: 'http://xxx'
});

拦截器：在请求或响应被或处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function(config){
 // 在发送请求之前做些什么
 return config
 },function(error){
  // 对请求错误做些什么
 return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function(response){
 // 对响应数据做点什么
 return response;
 },function(errror){
 // 对响应错误做点什么
 return Promise.reject(error);
});

添加请求拦截器

Axios.interceptors.request.use(function(config){
 // 在发送请求之前做些什么
 if(config.method === 'post'){
  config.data = qs.stringify(config.data);
 }
 console.log(config);
 return config;
},function(error){
// 对请求错误做些什么
return Promise.reject(error);
});

vue-axio跨域处理

proxy: {
 host: '127.0.0.1',
 port: 9000,
 auth: {
  username: 'jeskson',
  password: '123'
 }
}

路由基础


 


const User = {
 template: 'User`
}

const router = new VueRouter({
 routes: {
  {path: '/user/:id', component: User}
 }
})

router-link

组件支持用户在具有路由功能的应用中导航，通过属性指定目标地址，默认渲染成带有正确链接的标签，可以通过配置属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的类名。

比起写会好一些。

路由嵌套

要在嵌套的出口中渲染组件，需要在的参数中使用配置：

const router = new VueRouter({
 routes: [
  {path: '/user/:id', component:User,
  children: [
   {
    path: 'profile',
    component: UserProfile
   },
   {
    path: 'posts',
    components: UserPosts
   }
 ]
})

路由参数传递：

魔王哪吒

vue框架对比

vue:

react:

vue核心思想

数据驱动和组件化

nodejs和npm的安装和环境搭建

下载地址：https://nodejs.org/en/download/

vue环境搭建以及vue-cli使用

多页面应用文件引用：

构建应用

npm install -g vue-cli

vue init webpack-simple demo

vue init webpack demo2

a vue.js project

npm install

npm run dev

npm run build

vue基础语法

模板语法：语法：

赋值：
绑定属性：
使用表达式：
文本赋值：
指令
过滤器：

和绑定

对象语法：
数组语法：
绑定对象语法：

vue组件

Vue-router

什么是前端路由：就是根据不同的url地址展示不同的内容或页面

用来构建

或者this.$router.push({path:''})

动态路由匹配
嵌套路由
编程式路由
命名路由和命名视图

什么是动态路由匹配

示例：

import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
 routers: [
  {
   path: '/goods/:goodsId',
   name: 'GoodsList',
   component: GoodsList
  }
 ]
})

什么是嵌套路由

// App.vue

import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
 routers: [
  {
   path: '/goods',
   name: 'GoodsList',
   component: GoodsList，
   children: [
    {
      path: 'title',
      name: 'title',
      component: Title
     },
     {
      path: 'img',
      name: 'img',
      component: Image
     }
   ]
  }
 ]
})

什么是编程式路由

通过js来实现页面的跳转。

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

$router.go(1)

import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'
Vue.use(Router)
export default new Router({
 routers: [
  {
   path: '/goods',
   name: 'GoodsList',
   component: GoodsList，
   children: [
    {
      path: 'title',
      name: 'title',
      component: Title
     },
     {
      path: 'img',
      name: 'img',
      component: Image
     }
   ]
  },
  {
   path: '/cart',
   component: Cart
  }
 ]
})



...

methods: {
 jump() {
  this.$router.push("/cart");
  // ({path: '/cart?id=123'});
 }
}

命令路由和命名视图

给路由定义不同的名字，根据名字进行匹配

给不同的定义名字，通过名字进行对应组件的渲染

跳转到购物车页面

跳转到购物车页面

路由：
{
 path: '/cart/:cartId",
 name: 'cart',
 component: Cart
}

app.vue代码如下：

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'

Vue.use(Router);

export default new Router({
 routers: {
  {
   path: '/',
   name: 'GoodsList',
   components: {
    default: GoodsList,
    title: Title,
    img: Image
   }
  },
  {
   path: '/cart/:cartId',
   name: 'cart',
   components: Cart
  }
 }
})

Vue-resource和Axios

下载安装方式：



npm install vue-ressource -save

的请求是按照风格设计的，提供7个请求api:

get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [option])

全局拦截器

Vue.http.interceptors.push{(request, next) => {
 // 请求发送前的处理逻辑
 next((response) => {
  // 请求发送后的处理逻辑
  return response
 })
})

vue-resource.html（全局拦截器）

mounted() {
 Vue.http.interceptors.push(function(request,next){
  next(function(response){
   return response;
  });
 });
}

axios的使用



npm install axios -save

示例：

function getUserAccount(){
 return axios.get('/user/12345');
}

function getUserPermissions(){
 return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function(acct, perms){

}));

mounted: function(){
 axios.interceptors.request.use(function(config){
  return config;
 })
 axios.interceptors.response.use(function(response){
  return response;
 })
}

ES6常用命令

函数的Rest参数和扩展，Promise使用，和的使用

let checkLogin = function () {
 return new Promise(function(resolve,reject){
  let flag = document.cookie.indexOf("userId") > -1 ? true:false
  
  if(flag) {
   resolve({
    status: 0,
    result: true
   })
  }else{
   reject("error");
  }
 })
};

checkLogin().then(function(res){
if(res.status==0){
 console.log("login success");
}
}).catch((error)=>{
 console.log(`error:${error}`);
})

一旦有了名字就要大块来接收

export let sum = (x,y)=>{
 return x+y;
}

export let minus  = (m,n) => {
 return m-n;
}

import {sum, minus} from './util'
sum()

console.log(`sum:${sum(1,2)}`);

import * as util from './util'

// util.sum(1,2)

AMD,CMD,CommonJS和ES6

是在推广过程中对模块定义的规范化产出
是在推广过程中对模块定义的规范化产出
规范-

示例：

exports.area = function(r){
 return Math.PI * r * r;
};

脚手架

Vue基础：环境搭建，模板，计算属性，类与样式，条件，列表渲染，事件处理，深入了解组件，路由基础，Vuex基础。

vue-cli@3
vue@2.5

// 第一种搭建
npm install -g @vue/cli

// 第二种搭建
yarn global add @vue/cli

v-bind缩写

// 完整语法
...

// 缩写
...

v-on缩写

// 完整语法
...

// 缩写
自定义指令
声明自定义指令的名称，通过声明，设置钩子函数，在什么时机做什么事情：
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当被绑定的元素插入到DOM中时
 inserted: function(el){
  // 聚焦元素
  el.focus()
 }
})
钩子函数
一个指令定义对象可以提供如下几个钩子函数：
（初始化的操作）
，只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
，被绑定元素插入父节点时调用，（仅保证父节点存在，但不一定已被插入文档中）。
，所在组件的更新时调用，但是可能发生在其子更新之前。指令的值可能发生了改变，也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新。
，指令所在组件的及其子全部更新后调用。
，只调用一次，指令与元素解绑时调用。
指令钩子函数会被传入以下参数
，指令所绑定的元素，可以用来直接操作。
，一个对象，包含以下属性：
除了外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的来进行。
计算属性
示例：

 {{message}}
 {{reversedMessage}}
应用场景：具有依赖关系的数据监听。
事件
事件的定义以及缩写
事件传参和事件对象
快速结合键盘事件提升效率
事件修饰符
在事件处理程序中调用或是非常常见的需求。
为提供了事件修饰符：
.stop

.prevent

.capture

.self

.once

.passive
深入了解组件
， 组件的参数传递；，插槽在组件抽象设计中的应用；自定义事件，父子组件的通信方式。
生命周期钩子
示例：

 {{dada}}
 
 


var vm = new Vue({
 el: '#app',
 data: {
  info: 'dadaqianduan.cn‘
 },
 beforeCreate: function(){
  console.log("beforeCreated，组件创建前");
  console.log(this.$el);
  console.log(this.$data);
 },
 created: function(){
  console.log("created，组件创建完毕");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 beforeMount: function() {
  console.log("beforeMounted，组件挂载前");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 mounted: function(){
  console.log("mounted，组件挂载完毕");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 beforeUpdate: function(){
  console.log("beforeUpdate，组件更新前");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 updated: function(){
  console.log("updated，组件更新完毕");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 beforeDestroy: function(){
  console.log("beforeDestory，组件销毁前");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
 destroyed: function(){
  console.log("destoryed，组件销毁完毕");
  console.log(this.$el);
  console.log(this.$data);
  console.log(this.$data.info);
 },
})
组件创建前-beforeCreate：组件创建前，组件需要挂载的DOM元素el和组件的数据data都未被创建。
el: undefined

data: undefined
组件创建完毕-created：组件的数据已经创建完毕，但是DOM元素的el还没被创建
el: undefined

data: {info: 'dadaqianduan.cn’}
组件挂载前-beforeMount：DOM元素被创建，而data中的数据还没有
el有值，data有值，info没值
组件挂载完毕-mounted：data中的数据有值。都有值。
组件更新前-beforeUpdate：data数据已经更新，dom元素的内容也同步更新。
组件更新完毕-updated：data数据已经更新，dom元素的内容也同步更新。
组件销毁之前-beforeDestroy：销毁前，不再受管理，但是可以继续更新数据，但模板已经不再更新了。
组件销毁之前-destroyed：组件销毁完毕，不再受管理。
生命周期阶段
15.销毁完毕-
父子组件通信
父组件可以通过传递给子组件，子组件可以通过传递父组件。
// 组件引用


// 引入
import Dada from './components/Dada'
export default {
 name: 'App',
 // 注册
 components: {Dada}
}
流程：引入，注册，使用。
示例：
Vue.component('da-da', {
 props: ['textTitle'],
 template: '{{textTitle}}'
})

// 使用
类型如下：
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise
}
传递静态或动态prop
可以通过动态赋值：
// 动态赋值



父组件的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外变更父级组件的状态，表示你不应该在一个子组件内部改变，否则会在浏览器的控制台中发出警告。
这个  用来传递一个初始值；这个子组件接下来希望将其作为一个本地的  数据来使用。在这种情况下，最好定义一个本地的  并将这个  用作其初始值
示例： 
props: ['dada'],
data: function () {
  return {
    counter: this.dada
  }
}
以一种原始的值传入且需要进行转换。
示例：
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
验证
示例：
Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})
类型检查
可以是下列原生构造函数中的一个：通过  来进行检查确认。
String
Number
Boolean
Array
Object
Date
Function
Symbol
子组件通过向父组件传递通信。
vm.$emit(eventName,[...args])

参数：
1. {string} eventName
2. [...args]

触发当前实例上的事件，附加参数都会传给监听器回调。
子组件中执行时，就会触发父组件中对应的
'$parent$parentvue`的一个实例属性，它表示的是当前组件的父实例
假如父组件中有一个方法为，在子组件中可以直接使用去调用父组件的方法。
Vuex项目实战
Vuex概述
组件之间共享数据的方式
如果父组件要向子组件传值，使用v-bind属性绑定
如果子组件要向父组件传值，使用v-on事件绑定
兄弟组件之间共享数据：
接收数据的那个组件
发送数据的那个组件
Vuex是什么
vuex是实现组件全局状态数据管理的一种机制，可以方便的实现组件之间数据的共享。
使用vuex统一管理状态的好处
1.能够在vuex中集中管理共享的数据，易于开发和后期维护
2.能够高效地实现组件之间的数据共享，提高开发效率
3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
什么样的数据可以存储到vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中私有的数据，存储在组件自身的data中。
vue的基本使用
npm install vuex --save
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 // state中存放的是全局共享的数据
 state: {count:0}
})
new Vue({
 el: '#app',
 render: h=>h(app),
 router,
 // 将创建的共享数据对象，挂载到Vue实例中
 // 所有的组件，就可以直接从store中获取全局的数据
 store
})
vuex的核心概念
组件访问state中数据的第一种方式：
this.$store.state.全局数据名称
组件访问state中的数据第二种方式：
// 从vuex中按需导入mapState函数
import {mapState} from 'vuex'
通过刚导入的函数，将当前组件需要的全局数据，映射为当前组件的计算属性：
// 将全局数据，映射为当前组件的计算属性
computed: {
 ...mapState(['count'])
}
用于修改store的数据
// 定义Mutation

const store = new Vue.store({
 state: {
  count: 0
 },
 mutations: {
  add(state) {
   // 变更状态
   state.count++
  }
 }
})
// 触发mutation

methods: {
 handle1() {
  // 触发mutations的第一种方式
  this.$store.commit('add')
 }
}
可以在触发时传递参数：
// 定义Mutation
const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  addN(state,step){
   // 变更状态
   state.count += step
  }
 }
})
// 触发mutation
methods: {
 handle2() {
  // 在调用commit函数
  // 触发mutations 时携带参数
  this.$store.commit('addN',1)
 }
}
是触发的第一种方式，第二种如下：
// 从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'
将需要的函数，映射为当前组件的方法：
methods: {
 ...mapMutations(['add','addN'])
}
不要在mutations函数中，执行异步操作
Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是通过触发Mutation的方式间接变更数据。
// 定义Action
const store = new Vuex.store({
 mutations: {
  add(state){
   state.count();
  }
 },
 actions: {
  addAsync(context){
   setTimeout(()=>{
    context.commit('add')
   },1000)
  }
 }
// 触发Action
mothods: {
 handle() {
  // 触发actions的第一种方式
  this.$store.dispatch('addAsync');
 }
}
触发action异步任务时携带参数：
this.$store.dispatch('addNAsync',5)
触发actions的第二种方式：
// 从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
将需要的actions函数，映射为当前组件的methods方法：
methods: {
 ...mapActions(['addAsync','addNASync'])
}
import {mapState,mapMutations,mapActions} from 'vuex
computed: {
 ...mapState(['count'])
},
methods: {
 ...mapMutations(['sub','subN']),
 ...mapActions(['subAsync']),
 btnHandler1(){
  this.sub()
 },
 btnHandle2(){
  this.subN()
 }
}
getter
vuex中的getter
Getter用于对Store中的数据进行加工处理形成新的数据
const store = new Vuex.store({
 state: {
  count: 0
 },
 getters: {
  showNum: state => {
   return state.count
  }
 }
})
使用getters的第一种方式：
this.$store.getters.名称
使用getters的第二种方式：
import { mapGetters } from 'vuex'

computed: {
 ...mapGetters(['showNum'])
}
点赞、收藏和评论
我是(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)
我们下期见！
文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录
收录，欢迎：