vue基础知识总结
vue 是渐进式前端js框架 有以下的特点：
1.适合做前端分离的项目
2.Angular指令优势
3.react组件优势
vue语言特点：
1.简单-入门容易
2.中文文档齐全
3.生态发达（插件多）
文本渲染指令：
v-text
{{}}
可以解析html字符串
表单绑定指令：v-model
属性绑定 ：
v-bind ：属性名="属性值"
v-bind：title="msg"
:title="msg"
事件绑定：
v-on：事件名="时间处理函数"
v-on：click = "showMsg"
v-on:click="showMsg()"
事件处理函数：methods：{showMsg();}
如果响应函数带括号默认不带$event事件参数
如果响应函数不带括号默认不会带$event事件参数
如果带括号($event)手动指定事件参数
事件绑定的简写 @click="showMsg"
事件按键修饰符 .enter .esc
事件名： @keyup @click @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}}
new Vue() 中的参数
el：#app vue的指令起作用的范围
data：{msg:""}
vue 数据存放中心
methods：{}
vue 方法存放中心
computed：{
doneList(){return ...}
}
从现在数据计算出新的数据
watch{...} 监听数据
created() vue创建完毕
watch 监听数据的变化
watch:{
数据名：{
handler{nval，oval}{
deep：true
}
}
hadler 数据变化监听函数 nval 新的数据 oval 老的数据
deep 深层监听
本地存储localStroage
setItem(k，v) k存的名称 v存储的数据(string 字符串格式)
getItem(k)
JSON parse(str) 把str转换为对象
stringIfy(obj) obj对象转换为字符串
created() {当vue创建完毕调用}
css动画 拟态动画 定义：一个元素两个不同的状态间产生属性的变化，属性可以产生过度动画
拟态 正常 hover
transition 过度的属性 all
过度的时间 1s
过度的缓动动画 linear 线性 ease 缓入缓出 ease-in ease-out
关键帧动画 定义：把动画划分为100个状态 每个状态自己定义（关键帧）动画会在两个关键帧之间的属性
产生过度动画 @keyframes 名称{0%{} 25%{} 100%{}}
1.定义关键帧动画
2.调用动画 animation 动画 名称 时间 缓存动画 动画的次数infinite（无限）
transform translate(x,y) 移位变化
变换 scale(1) 缩放变换 rotate(45deg) 旋转变换 skew(deg) 倾斜
vue 动画
原理：vue动画主要是靠<transition></transition>内置组件
包裹需要显示或者隐藏的元素 自己定义产生类型 代表不同的状态 可以订阅类名的css属性 从而产生动画
动画类名 v-enter-active 整个进入的过程 ：
v-enter 进入开始
v-enter-to进入结束
v-leave-active 整个离开的过程 v-leave 离开开始 v-leave-to 离开结束
v-move 组动画，正在移动的元素 需要配合v-leave-active{position:absolute}
动画组件：transition
name 名称
enter-active-class 进入时候调用的class
leave-active-class 离开时候调用class
用animate.css enter-active-class="animated fadeln"
transition-group 组过度 tag="div" 标签
vue组件 使用：1.让开发简单，合作高效 2.能够复用组件
const step={
templated：`
<div></div>
`}
data:{}，
methods:{}，
props：{} ...}
使用步骤：1.定义组件 2.注册组件 父组件里面 components:{step}
3.使用组件 <step></step>
vue组件传参 1.父向子props
父 <step:good="good[0]">
子props:{
good:{
type:Object，
default：{}
}
}
2.子向父$emit 子 this.$emit(事件名，数据)
父 @事件名=处理函数（$event）
组件的data必须是一个函数 data(){return {price:2.5}}，
在windows中配置 Vue框架
windos中命令 md 创建文件夹
cd 目录 切换目录
盘符：切换磁盘
dir 查看当前目录
cls清屏
上下箭头：历史记录
ipconfig 查看ip
rd 删除目录
npm 定义:node 自动的包管理工具（慢）
npm install yarn- g
全局安装 yarn
yarn 样式包管理工具（快）
yarn init 初始化项目
yarn add 包名1 包名2
安装 普通(运行环境) yarn add 包名
yarn add Jquery 安装 jquery
开发环境 yarn add 包名 -D
开发环境安装
yarn global add 包 全局安装
所有项目都可以用这个安装的包
卸载 yarn remove 包名
列表 yarn list
vue 项目的创建 ：
vue create 项目名
default
+manually手动安装 ：
+babel ES6-ES6
typescipt 用ts 方式写js
pwa 不选
+Router路由
+vuex 全局数据中心
+css pre-processors useHIstory mnode(Y/n) 路由使用历史记录模式 N
+Pick aCss pre-processor
sass
sass
+less 你的配置卸载
IN dedicated cofig files 单独的配置文件
+in Package.json save this as a preset(y/n)?
保存作为一个预设吗？ Y 保存的的名字 base
linter / fomatter
js 严格语法检查
unit Testing
单元测试
E2ETesting
vue 脚手架项目结构
node_modules 存放的是依赖包和库
public 静态资源和模板
src 项目源文件 ：
assets 项目资源目录
components 组件存放目录
router 路由配置目录
store 数据处理目录
views 数据处理目录
App.vue 项目根组件
main.js 项目入口js文件
.gitignore
git 忽略配置文件（哪些文件和文件夹不上传）
babel.config.js
ES6-转ES5配置文件
README.md
项目说明文件
yarn.lock
package.json ：
scripts 运行的命令
dependencies 项目需要的插件
devDependencie 开发需要的插件（上下不需要）
以上是 vue基础知识总结 的全部内容， 来源链接： utcz.com/z/377547.html
