Vue入门

Vue 基础语法标签

el  element:元素，用来指定vue实例作用范围
v-text='msg'====={{msg}} 作用一样,v-text会覆盖原来的标签内容，但不会出现插值闪烁
v-html='msg'取值，text是以文本形式，html会将获取的数据含有html标签解析之后在渲染到数据区

v-on事件绑定：v-on:click="函数名(参数)"  or  @click=""

**控制标签显示隐藏**
v-if="true | false",通过dom树进行控制
v-show="true | false",css中display：none,标签多控制显示频繁用show

v-bind 绑定，用来将html标签中的属性绑定到vue实例中，可以通过实例中的数据改变，影响标签中的值
v-bind  or  :,:xxxx="xxx"

v-for="(value,key,index) in xxx",实例数据遍历,绑定key，:key=""保证唯一

v-model双向绑定，只能绑定value属性

computed计算属性,有缓存
.stop,.prevent,.self,.once,加载事件后如@click.stop=""，可以连续使用.self.once
stop:停止事件冒泡，prevent:阻止标签默认行为，如a标签跳转组织跳转
self:只触发自身行为，once：只触发一次

axios异步请求
axios.get("url?key=value").then(()=>{});
axios.post("url",{数据}).then(()=>{});
axios.all([函数名1()，函数名2()]).then(axios.spread((1,2)=>{}));并发请求

vue生命周期

钩子是生命周期中自动触发的函数
三个阶段：
	1.初始化
		初始化vue实例内部使用的相关时间和对应生命周期函数初始化
		第一个触发生命周期方法beforeCreate代表只完成了内部事件和函数的初始化
		第二个触发方法created，此时数据，自定义方法的初始化完成
		if el？
		if template？
		第三个触发方法beforeMount，此时仅仅将el属性指向的html编译成vue的母版，并未完成模板的数据渲染
		创建虚拟dom，替换母板的dom
		第四个方法mounted，此时已经完成了虚拟dom替换母版，页面数据渲染完成
	2.运行阶段（触发多次）
		数据改变时触发第五个方法beforUpdate此时仅仅数据改变，并未渲染页面
		虚拟dom重新渲染
		触发第六个方法updated更新页面
	3.销毁阶段
		第七个执行的生命周期方法beforeDestroy，此时vue实例仅仅是开始销毁，但数据，事件等还在
		销毁
		第八个方法destroyed，此时vue实例所有事件，组件等全部清空，但数据还在

ES6语法 EcmaScript6

1.声明变量：
	var不用，存在作用范围混淆问题

	let：用来声明局部变量，一般声明基本变量
	const：声明常量，赋值不能被修改，声明js对象、数组时使用，此时属性可以改，但是对象地址不变

2.在使用匿名函数时使用箭头函数(参数)=>{函数体}
	没有参数或大于1个必须（），一行代码可以不写{}，一个参数可以不写()
	箭头函数没有自己的this，但匿名函数有自己的this

3.模板字符串 使用语法``反引号
	let html = `<div><h1></h1></div>`

4.对象的定义
	let id = 21;
	let name = "ads"

	const emp = {
		id,name
	}//emp={id:21,name:"ads"}

Vue 组件 component

注册全局组件：Vue.component(参数1，参数2)，vue根实例组件
	参数1：组件名称
	参数2：组件的配置对象{template:`<h1>xxx</h1>`}
注册局部组件：components:{
	组件名:{
		template:`<h1></h1>`
	}
}
组件使用：<组件名></组件名>

定义组件的 data methods等
	template=``定义html代码
	data(){return{}}定义组件自己的数据
	methods:{}定义方法
	computed:{}定义计算属性

组件的数据传递，在子组件中定义props:[]
	props：父组件传子组件之间，单向
		静态数据：首先在组件的使用处，标签上，声明静态数据key=value，在props中写明key
		动态数据：，声明：key=value，在props中写明key
组件的事件传递
	在对用组件标签上定义传递事件加个@，@事件名="父组件中的事件名"，this.$emit('事件名')用来调用父组件传过来的事件
	子组件可向父组件传递数据this.$emit('事件名'，this.xx)
	父组件：this.变量名=xx
组件插槽slot：用来扩展现有组件，变得更灵活
	<slot></slot>占位符，只需在标签内写所要插入的标签语句
	带名字插槽：加name=""

Vue 路由

组件交给路由管理<router-view>
<router-link :to="路由路径/路由对象">切换路由
this.$router.push()切换路由

this.$router代表路由管理器对象
this.$route 代表当前路由对象
子路由children：[]

注册路由
	component: () => import('引入路径')