Vue基础学习总结

一、
vue介绍
vue适合做前后端分离的项目，拥有Angular框架的指令优势和react框架的组件优势。
特点：
1.简单，入门容易
2.中文文档齐全
3，生态发达，插件很多

二、
文本渲染指令：v-text {{}}用来在模板中填写数据 v-html可以解析html字符串。
表单绑定：v-model
属性绑定：v-bind：属性名=“属性值” v-bind:title=“msg” 可以简写为:title=“msg”
事件绑定：v-on:事件名=“事件处理函数” v-on:click=“showMsg()”
事件修饰符：@keyup.enter=“add()” 代表键盘enter键弹起时执行add()函数 类似的还有.esc等等
事件名：
@keyup 键盘弹起
@cilck 单击
@dblclick 双击
@blur 空间失去焦点
条件渲染：
v-if=“表达式”当表达式为真时显示，为假时隐藏 v-else
v-show=“表达式” v-show通过css方式隐藏 v-if通过直接移除dom结构隐藏
表单绑定：
checkbox： 没有给value选中true 多个时绑定一个数组
radio：name v-model
text：和值绑定一起
列表渲染：v-for=“(item，index) in list”{{item}}
三、
Vue中的属性
el:“#app” vue指令起作用的范围
data：{msg“”} vue存放数据的地方
methods：{} 方法存放中心
computed：{
doneList（）{return …}
}从现有数据计算出新的数据
watch{…} 监听数据
created（） vue创建完毕
四、
watch监听数据的变化
watch：{
数据名：{
handler（nval，oval）{}，
deep：true
}
}
handler数据变化监听函数 nval新的数据 oval老的数据
deep 深度监听
本地存储localStorage
setItem（k，v） k是存的名称 v存储的数据（string字符串格式）
getItem（k）
JSON parse（str） 把str转换为对象 stringify（obj）ba对象转换为字符串
created（）{} 当vue创建完毕调用
五、VUE动画
原理：vue动画主要靠内置组件包括可以显示或者隐藏的元素，自定产生类名，代表不同的状态 可以订类名的css属性，从而产生动画。
动画类名：v-enter-active整个进入的过程 v-enter进入开始 v-enter-to进入结束
v-leave-active整个离开的过程 v-leave 离开开始 v-leave-to离开结束
v-move 组动画，正则移动的元素 需要配合v-leave-active{position：absolute”}
六、Vue组件
作用：让开发简单，合作高效 并且能够复用组件
使用步骤
1.定义组件
const step={
template：<div></div>,
data:{},
methods:{},
props:{}
…
}
2.注册组件
父组件里面components:{step}
3.使用组件
Vue组件传递
1.父向子props
父strp:good=“goods[0]”
子props:{
goods:{
type:Object,
default:{}
}
}
2.子向父$emit子this.$emit(事件名,数据)
父 @事件名=处理函数（$event）
组件的data必须是一个函数 data(){reutrn {price:2.5}}
七、组建的生命周期购子函数
定义：当vue组件从创建到销毁这一系列的过程会有特定的步骤，这些特定的步骤，会回调特定的函数，我们把这些特定的步骤称为组件的生命周期，我们把组件的生命周期回调的函数，称为生命周期钩子函数。
创建前：beforeCreate
创建完毕：created[初始化] 可以获取this和data数据
渲染前 ：beforeMount
渲染后：Mounted定时器 可以获取视图中的元素 此时data和模块已经绑定在一起
更新前： beforeUpdate
更新后：updated data数据发生改变
销毁前：beforeDestory
销毁后：destoryed [销毁定时器]
八、路由
路由参数
$route.params 路由配置的参数
$route.query 路由的参数查询（问号后面的参数）
$route.path 路由的地址
$route.name 路由的名称
编辑路由跳转
$router.go(-1)历史记录前进后退 forward前进 back返回
$router.push(“/”) 地址跳转
$router.replace(“/”) 跳转不留历史记录
基本路由
1.配置
{paht: '/about,
name:“about:,
component:“About”
}
2.切换
关于
$router.push(‘about’) KaTeX parse error: Expected '}', got 'EOF' at end of input: …t') 3.获取路由参数 {{route.params.id}}
子路由
1.配置
{
path:”/detail", name:“detail”, component:“Detail”,
children:[{path:“arg”,component:Arg},{path:“comment”,commponent:“Comment”},
{path:“”,redirect:“arg”},]
}
2.切换
商品
3.子路由设置Detail.vue

<template>
	<div>
		<h1>我是子路由</h1>
		<router-link to='/detail/arg'>参数</router-link>
	<router-link to='/detail/comment'>评论</router-link>
	<router-view />
	</div>
	</template>

别名: alias

连接高亮：
router-link-exact-active 地址和路由配置path精确匹配
router-link-active 地址和路由配置path匹配