vue学习笔记
# vue项目结构
## 前置准备
1.node.js
2.vue-cli
3.创建项目：
-vue ui
-vue create 项目名
项目名不能是纯vue作为名字
## 项目结构
node_modules//依赖 插件包 可以删，因为包里面的插件全部是在一个网站里npmjs.com
【重点】public //公共目录，存放着我们唯一的html模板
【重点】src //源代码，项目的核心所在，不能删也不能改名字
.gitignore //git过滤清单
babel.conf.js //解析es6转成es5的插件配置
【重点】package.json // 包管理器文件，存放着依赖的名字，运行项目的命令
README.md //项目的说明书
## 初始化项目依赖
当我们拿到别人的项目的时候一般情况下是没有node_modules包，需要使用命令初始化依赖
`npm install` or `npm i`
`yarn install`
【前提！】项目里必须有package.json
# 指令
### v-model
数据双向绑定，用于表单元素
### v-text
渲染文本内容的插值｛｛｝｝等价
### v-html
渲染dom片段，且拥有v-text全部特性(防注入攻击，自动过滤)
### v-noce
让元素只显示第一次渲染的内容，之后不再受数据更新的影响
### v-if
有三条同组指令：v-if v-else-if v-else,控制元素加载与销毁，v-if可以单独使用，后面两个必须跟在v-if后面才能生效
如果链式使用v-if则其中一条规则符合条件剩余的判断不会执行
### v-show
控制元素的显示与与隐藏，底层原理是修改的css样式的display的属性（如果频繁切换应使用v-show）
[注意]频繁切换显示隐藏优先显示v-show，这样可以避免页面的回流，减少浏览器的性能开销
### v-for
语法:`<div v-for='(value值,index下标) in arr' v-bind:key='index'>{{value}}</div>`
--特性必须在被循环的元素上加key，且key的值对元素是隐藏的，只是给diff算法用的；
【不要在循环元素使用v-if】
--循环渲染为什么要加key：v-for语法中循环渲染虚拟dom时使用diff算法计算中用于优化算法的。key必须保证在作用域中每一个值都是唯一不可重复的。
官方不推荐使用下标，且不可以使用时间戳，随机数
--作用：每个元素拥有独立的key值，key相当于人类的身份证(key值是唯一的)
推荐使用value+sshkey，sshkey=index || value+value2
## v-for渲染值类型
数组，对象（value，key，index），字符串，数字
渲染对象 v-for='(value值,key属性名,index下标) in obj' v-bind:key='index'
## diff算法
渲染快的原理：当数据发生改变的时候会生成新的虚拟dom树（object）。层层对比，用新的节点对比旧的节点，一旦发现不一样的节点就直接用新的替换旧的
### v-bind
绑定属性指令，简写 : ，它用来给元素绑定动态属性,一旦使用，里面的值必须是一个数据变量，如果是字符串必须使用引号引起来，它既可以绑定原生属性，也可以绑定自定义属性，一般情况下，自定义属性用来组件通讯
### v-on
绑定事件指令，简写`@`
## 开发规范
1.assets存放静态资源的（写死的东西）
2.components存放组件的，公告组件
3.views存放视图组件的表示独立的页面
## 命名规范
1.函数命名：fn_name
2.对象：o_name
3.数组：a_name
4.小组合租开发的时候：页面的名字+功能的名字+自己名字的缩写+工号
# 循环渲染
### 语法
1.渲染数组v-for='(value值,index下标) in data' v-bind:key='index'
## 可以遍历的值类型
数组，对象，字符，串数字
2.渲染对象 v-for='(value值,key属性名,index下标) in obj' v-bind:key='index'
3.【注意】被循环的元素上必须加上key(key值不能重复)
4.循环渲染为什么要加key：v-for语法中循环渲染虚拟dom时使用diff算法计算中用于优化算法的。key必须保证在作用域中每一个值都是唯一不可重复的。
官方不推荐使用下标，且不可以使用时间戳，随机数
推荐使用value+sshkey，sshkey=index || value+value2
5.作用：每个元素拥有独立的key值，key相当于人类的身份证(key值是唯一的)
## diff算法
渲染快的原理：当数据发生改变的时候会生成新的虚拟dom树（object）。层层对比，用新的节点对比旧的节点，一旦发现不一样的节点就直接用新的替换旧的
# 事件
## 事件的绑定
`v-on:eventName`简写`@eventName`
事件的回调函数来自于methods里的函数
## 事件修饰符
- .stop 阻止事件冒泡
- .prevent 阻止默认事件
自定义按键修饰符
Vue.config.keyCodes.back = 8
### props : 属性
属性是父组件传进来的数据，子组件不能直接修改
props和data数据很相似，都是属于存放数据的
props只接受属性，函数不能在这里接收
### 按键修饰符
.enter或者.13监听回车
### 自定义按键修饰符
`Vue.config.keyCodes.myCode=keyCodes`
# 生命周期
## 概念
初始化，完成渲染，更新页面，卸载页面（销毁程序）===程序
## 定义
事物在不同阶段的不同表现，叫做生命周期。
即初始化，挂载，更新，销毁四个阶段
## api
### 初始化/创建阶段
-beforeCreate 创建前
-created 创建后
### 挂载/渲染阶段
-beforeMount 挂载前
-mounted 挂载完成
### 更新阶段
-beforeUpdate 更新前
-updated 更新后
### 卸载/销毁阶段
-beforeDestroy 卸载前
-destroyed 卸载后
## 总结
1.生命周期里，mounted用于组件渲染完成后发起的ajax请求（里面写我们要获取的数据）
2.beforeDestroy用于组件销毁前清除常驻内存的数据
server就是在内存打包后的build代码
如果把图片地址赋给变量，需要用require语法
require就是nodejs导入模块的意思
等价于import
# form
## 专属指令v-model
## 标签类型
- input
-文本:text
-密码:password
-日期:date
-数字:number
-单选框:radio v-model绑定的是它的value值
-复选框:checkbox
-按钮：button
- select
v-model写在select标签上但是获取的值是来自于包裹的option标签上的value值
# 组件
## 局部组件
在单独的vue文件里使用components注册的组件
只能在当前组件内使用，叫做局部组件
## 全局组件
使用全局Vue对象的component方法注册的组件，
可以在任意的vue文件使用，叫做全局组件
$开头的变量都是vue内置的
ref就是获取dom元素的
# 组件通讯
## props属性
1.普通写法：`props:['p1','p2']`
2.配置写法：
```js
export default{
props:{
//简单验证
props:string,
//设置默认值
obj:{
//如果是对象或数组使用函数
type:Object,
default:function () {
return {
}
},
//简单的初始值
count:{
type:string,
}
}
}
```
3.注意的是在子组件内修改简单类型的值props会报错，
如果修改的是对象或数组里的值，则不报错
4.定义：props是上游组件传递的数据，子组件不可以修改
5.props是父传子最常见的通信方式
## 父传子
1.父组件向子组件通过绑定属性，传递一个数据
子组件通过props接收父组件传递的属性值（数据）
2.$children
获取所有子元素的集合，直接操作子元素或调用子元素的方法【不推荐】
## 子组件
1.常规方式$emit调用父级传过来的函数
2.$parent获取父组件实例对象，直接修改或调用【非常不推荐，别使！！！】
## 双向通讯
### v-model
作用：使父子组件进行双向的修改，双向的伪绑定
语法：1.父传子v-model绑定带子组件上
2.子传父：this.$emit('input',newData)
概念：当我们在子组件上使用v-model绑定值的时候
会自动的向子组件注入一个value值和一个input函数
子组件如果想修改value就是用$emit调用input函数名
.tirm:去掉两头空格
.number：尝试把输入内容转成数字
.lazy:当失去焦点时赋值
### .sync 属性修饰符
作用：使父子组件进行双向的修改，双向的伪绑定
语法：1.父传子：叫v-bind：prop.sync='prop'
2.子传父：this.$emit("update:prop",nweData)
## props 父传子【常用】
## $emit & $on 子传父【常用，来自于自定义事件】
## $parent & $children【应急方案，不推荐】
## $attrs & $listeners【夸组件层级，简单，推荐】
## provide & inject【开发高阶组件，不推荐。跨组件层级】
## vuex【强大，适合大项目，跨组件层级】
浙公网安备 33010602011771号