重学vue

vue的特点
1、采用组件化模式，提高代码复用率，且让代码更好维护。 也就是说一个.vue文件可以当成一个组件
2、声明式编码，让编码人员无需直接操作DOM,提高开发效率。（原生js是命令式编码）

一，data数据修改的细节

	1、对于数组：
			vue是不能感知数组对索引位的更改
			vue可以感知数组的变异方法 即可以改变原数组。
			push pop
			shift unshift
			sort resverse
			splice
	2、对于对象
			vue是不能感知对象属性的 （增，删）通过this.$set(this,增加的属性名,初始化值)

二、指令

1、点击事件
    v-on:click  @click  @click.stop（阻止冒泡） @click.prevent(阻止默认事件)  @click.once（点击事件只生效一次）
    
1.1、点击事件修饰符
			.stop阻止事件传播 e.stopPropagation
			.capture处理函数在事件捕获阶段触发 
			.prevent阻止默认行为 e.preventDefault
			.once 事件只执行一次
			.self只有event.target是当前操作的元素才触发事件
			.passive 事件的默认行为立即执行，无需等待事件回调执行完毕
			
2、v-model
     一般用于input 等表单，双向绑定（本质上不过是语法糖。它负责监听用户的输入事件以更新数据）
     
2.1、v-model修饰符
	 v-model.lazy（change 事件_之后_进行同步）
	 v-model.number
	 v-model.trim（过滤用户输入的首尾空白字符）
	 
 3、v-for
	 可以循环vue的数据 根据数据生成对应的标签结构  key 必须
	 数据是数组 得到两个变量  item index  [0,1,2,3,4]
	 数据是数字 得到两个变量 item index  123 
	 数据是字符串 得到两个变量 item index  '123'
	 数据是对象 得到三个变量 属性值 属性名 索引 {name:'wang',age:'15'}
	 
 4、v-if （不停的创建，删除dom）
	 控制单个dom元素是否渲染在页面上 如果是true 则渲染在页面上反之不渲染
	 如果需要控制多个dom元素的显示 只要在template标签使用v-if即可
	 template里面相同的标签会被重新使用 可以为标签添加 key值使标签独立
	 
 5、v-show
	 控制单个dom元素是否显示（通过class）在页面上如果是true 则显示在页面上 反之不显示
	 v-if 与v-show的区别
	 当需要频繁切换dom元素的显示时 使用v-show 节省频繁创建dom元素的开销
	 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
	 
 6、v-bind
	 指令可以把标签的属性和vue的数据绑定在一块 (简写：) 单向绑定
	 
 7、自定义指令 directive 分为局部指令与全局指令 .

三、属性

1、computed 计算属性

computed:{ computedSum:{
get(){
return this.num1+this.num2(一旦num1与num2中随便哪个值变化会触发 computedSum 的get 从而重新渲染)
} } }

2、methods vue中的方法都写methods里

<div>{{qwe()}}</div> 一但计算属性的num1与num2更改了并调用了computed get 重新渲染页面  页面中的函数qwe（也会重新执行）  其他方法导致页面重新渲染也会重新执行
methods(){
		qwe(){
		return this.num1+this.num2
		}
	}

3、watch放置侦听器

watch:{
number:{ //number是data里面的数据名字
	handler(){//handler必须是这个名字  当number变化时会触发这个方法
		}
	}
}

通过使用数组的变异方法改变watch是可以监听到的
修改数组的索引改变数组watch是不可以监听到的

选项：deep

监听对象的变化需要添加属性 deep:true 这样的监视器可以监控对象任一个属性的变化。不管是单独的对象还是在数组中的对象都要写deep:true才能被监听到。
也可以监听对象中某个属性的值

watch:{
	'obj.name':{ //写成字符串的方式
		handler:{
		}
	}
}

四、过滤器

filters：{
		fn(data){
		return data+"---"
		}
}

filters 过滤器的作用 是不改变vue的数据只改变数据在页面中的展示
过滤器函数默认接受的参数是管道符左侧的数据即默认只接受一个数据如果需要过滤器函数接受多个数据 需要手动传参 有全局过滤器与局部过滤器。过滤器函数在插值符号{{}}和属性绑定v-bind中生效。

五、生命周期

生命周期函数就是在vue组件在某个时间段会自动执行的函数
1、beforeCreate 没有初始化任何数据
2、created 初始化基础数据 data methods computed watch
3、mounted 把created准备好的数据 注入（挂载）到页面中
4、beforeUpdate 当页面重新渲染前触发
如果只改变组件的数据 却没有导致重洗渲染 则不会重新触发该函数
5、updated 当页面重新渲染后触发
6、beforeDestroy 在组件销毁之前触发
7、destroyed 在组件销毁之后触发

六、组件

子组件创建的方式：
let heaven=Vue.extend({
template:`
<div>asdad<div>`
})

let VM = new Vue({
components:{
heaven:heaven
}
})

七、父子组件传值

1、父组件通过绑定属性的方式给子组件传值 
<heaven a='200' b="300"></heaven>
子组件 数组形式 props:[a]
子组件对父组件传过来的数据进行校验 采用对象形式
在子组件里面不能直接修改父组件传递过来的number数据 子组件可以让父组件自己修改自己的数据
props:{
	a：{
		type：String,//数据类型检测
		required:true,//是否必传
		default:100,//默认值
	}
	b:{
			validator(value){//自定义接收函数
			if(value>100){
			return true
			}
		}
	}
}
$props 存放子组件接受的父组件数据
$attrs 存放组件没有接受的父组件数据

2、通过this.$parent获取父组件的数据（不推荐）

八、子组件给父组件传值

1、this.$emit('xxx',this.msg)
子组件绑定 xxx  v-on:xxx=(handxxx)
2、父组件通过$children来获取子组件数据 this.$children[1].msg(不推荐)

九、父亲给孙子或者给儿子的孙子传递值

使用依赖注入provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
provide: function () {
		  return {
		    getMap: this.getMap
		  }
		}
在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property
inject: ['getMap']

十、ref 获取（this.$refs）
在标签上使用ref 获取的是原生dom
在标签上使用ref并且有v-for指令获取的是一组原生dom
在组件上使用ref 获取的是组件实例化对象

十一、组件名字定义

   一般情况下定义组件使用大陀峰命名 使用组件是使用烤串方式书写  
  GrandSon 
  <grand-son></grand-son>

十二、动态组件

 动态组件在进行不同的组件的切换是是直接销毁和创建的
 <component :is='is'></component>vue内部自带的组件 可以通过切换is绑定的值来切换组件 is是值是组件名称

十三 在组件上绑定原生的dom事件，需要事件修饰符native

十四 mixin混入
混入的作用：抽离组件的公共数据和方法
1、对于生命周期函数，混入和组件不重复 并且混入的生命周期执行早于组件的生命周期。
2、对于data computed methods ，混入和组件不可以重复 这几个选项都以组件为准。

十五路由
什么是路由？
路由是映射关系
路由的分类
前台路由，组件和pathname构成的映射关系
pathname的变化不会发起网络请求
实现的原理：windows.history.pushState(‘’,‘’,改变的pathname)
vue-router内置的全局组件
router-link 作用：用来实现pathname的变化 在页面中默认解析成a标签
router-view 作用，展示匹配到pathname的组件
redirect:‘/home’,路由重定向
后台路由：函数和pathname构成的映射关系windows.history.push
pathname的变化会发起网络请求

对于动态路经匹配到的组件
/article/1 /article/2 /article/3
这三个路经都会匹配到搭配/article/:id 都会渲染Article组件 则改组件没有必要重复销毁和创建的
对于非动态路经匹配到的组件
pathname为/home 这个路经只会匹配到/home 会渲染Home
pathname为/user 这个路经只会匹配到/User会渲染User
对于Home和user组件这两个不相同的组件 是会重复创建和销毁的（默认）
可以用keep-alivema 来缓存页面

$router.push(会在原来的历史路经中累加)
$router.replace(会替换原来的历史路经)

路由有绝对地址相对地址
pathname为/about/concat 绝对地址
默认情况下
a标签href为/about的
会加上route-link-active 如果这个a标签加上exact属性则该a标签不会加上router-link-active
a标签href为/about/conact的
会加上router-link-active router-link-exact-active

路由同步加载 打包在app.js中
import Concat from ‘…/views/aboutusall/concat.vue’
import Partner from ‘…/views/aboutusall/partner.vue’
import Address from ‘…/views/aboutusall/address.vue’

路由异步加载 打包在其他js中
const Login = () => import(‘…/components/login/Login.vue’)
const Home = () => import(‘…/components/home/Home.vue’)
const My = () => import(‘…/components/home/My.vue’)

逻辑打包在一个js文件里面
const Foo = () => import(/* webpackChunkName: “group-foo” / ‘./Foo.vue’)
const Bar = () => import(/ webpackChunkName: “group-foo” / ‘./Bar.vue’)
const Baz = () => import(/ webpackChunkName: “group-foo” */ ‘./Baz.vue’)

vuex
可以使用npm 命令来引入 也可以使用vue add vuex来创建（此方法会创建store文件夹创建vuex的结构，并在main.js中引入）

其他
template 在跟组件中如果有template选项 则 components选项无效
vue 数据的改动最终一定会映射到页面中 但是不会因为数据改动了 就立马 映射到页面中
$nextTick(回调函数)回调函数在数据已经映射到页面中执行
$set(对象，属性，属性值)
$mount 等价于el选项
$emit 触发/发布事件
$ref存放原生dom/组件实例化对象
$destoy销毁组件

vue脚手架
main.js是入口文件
assets放置所有的vue组件
webpack的配置文件在 node_module@vue/cli-service/webpack.congig.js
在安装脚手架3/4版本的情况下 如何使用脚手架2搭建vue项目
1、npm install -g @vue/cli-init
2、npm init webpack 项目名 脚手架2 备注 vue create 项目名 脚手架3
vue2脚手架的构建方式
runtime only -->根组件中render 推荐
runtime + compiler -->根组件中 remplate + components
目录结构及其作用
build/config webpack的配置文件
static 存放前端模拟的数据
在后台代码没有完成的情况下 前端自己模拟数据 和后台并行开发 从而提高开发的效率

vue3/4脚手架的构建方式
runtime only -->跟组件中 render 默认