指令，事件
//指令5
双向数据数据
与{{msg}}功能一样，但前面那个的好处是网速慢的时候也不会看到小胡子，另一个网如果不好会看到小胡子
{{content}} 只绑定一次，以后不会再受数据变化就更新了
把HTML字符当HTML代码渲染，如msg:"hello
"页面显示就是hello，但如果用小胡子显示数据的话就是hello
要循环谁就在谁身上添加该属性,item就是当前项，index是索引
//事件
v-on:click="函数名"可以简写成@click="函数名"。 函数名要在methods里注册
1. vue会自动给函数传递事件源，即如果绑定事件的时候后面什么都不写，methods里面的方法可以直接拿到事件源e。
methods:{
fn:function (e) {console.log(e)}
}
2. 如果写了()想要拿到事件源则绑定函数时括号里需要写$event作为第一个参数
methods:{
fn:function (e) {console.log(e)}
}
3. 如果想要拿到事件又想传参。则第一个参数是$event从第二位开始传参数，接收参数时也是与之对应，第一个参数接收事件从第二个参数开始接收参数。
methods:{
fn:function (e,a) {console.log(e,a)}//
}
4. 如果不需要事件源只传参数。可以不写$event，传参和接收参数一样还是一一对应
methods:{
fn:function (a) {console.log(a)}//
}
数组的方法
1. filter不改变原数组，返回值是过滤后的新数组，其中回调函数的返回结果为true将当前项放入要返回的新数组，false不管
var newary=[1,2,3,4,5].filter(function (item) {
return 212 3
var newary=[1,2,3].map(function (item) {
return `${item} `
});
3. includes数组中是否包含某个值，返回值true/false var result=[1,2,3].includes(3);
4. find在数组中寻找某一项，其中回调函数为true表示找到并将找到的项返回，回调函数为false未找到继续找，找到最后也没找到返回undefined
var result=[1,2,3].find(function (item) {
return item===1
});
5. some查找每一项，回调函数为真停止查找，返回值为真。为假继续查找，找不到返回值为false
6. every与some相反，找不同。查找每一项，回调函数为假“停止”查找，返回值为假。为真继续查找，都是真返回值为true
我们要的就是他返回false值
使用场景，比如全选按钮。要通过计算属性计算数据里面的每一项是不是其中某项是false。用every返回每一项，如果其中一项返回false，则返回值就是false，不全选
7. reduce
//reduce的回调函数共有四个参数，返回的是叠加后的结果。原数组不变（新方法的原数组都不变）
//prev数组第一项，next数组第二项
//prev回掉函数的返回值会作为下一次的prev，next数组下一项
//index后一项的当前索引
//item原数组
var result=[[1,2,3],[4],[4,5]].reduce(function (prev, next,index,item,) {
return prev.concat(next)
});
console.log(result)//多维数组合并成一维数组
vue脚手架（帮我们把webpack的配置都弄好了）
1. 手动创建一个文件夹travel，在travel文件夹里面执行终端创建脚手架并初始化一个vue项目
- 全局安装vue-cli脚手架。npm install vue-cli -g
- 安好脚手架后全局命令行就会有一个vue命令，可以初始化一个带webpack的vue项目。 vue init webpack <项目名称>
- 除了问你是否安装vue-router选Y，其他的都选N
> 此时创建的vue项目就在该travel里面了。所有的依赖nodemoules和项目的相关文件都在创建的vue这个项目里了。以后再安装依赖直接在nodemoules文件夹同级下终端里执行。启动项目的时候也是在nodemoules文件夹同级下终端里执行
2. 进入创建好的vue项目(与nodemoules文件夹同级)，npm run dev跑一下脚本，能成功开启一个服务，然后在浏览器中能成功访问该服务即安装成功
- 模块的导出---module.exports={a:a}将模块里面的方法导出
- 模块的引用---require("./a")文件(模块)名称
- 前端模块化呢？？？
- 模块的导出---export
- 模块的引用---import
- 全局安装vue-cli脚手架。npm install vue-cli -g
- 安好脚手架后全局命令行就会有一个vue命令，可以初始化一个带webpack的vue项目。 vue init webpack <项目名称>
- 除了问你是否安装vue-router选Y，其他的都选N
> 此时创建的vue项目就在该travel里面了。所有的依赖nodemoules和项目的相关文件都在创建的vue这个项目里了。以后再安装依赖直接在nodemoules文件夹同级下终端里执行。启动项目的时候也是在nodemoules文件夹同级下终端里执行
2. 进入创建好的vue项目(与nodemoules文件夹同级)，npm run dev跑一下脚本，能成功开启一个服务，然后在浏览器中能成功访问该服务即安装成功
脚手架的配置文件夹config里面的index文件里可以改默认开启的服务的端口号
模块
- 最开始前端没有模块化，都是后端使用的node的模块化common.js- 模块的导出---module.exports={a:a}将模块里面的方法导出
- 模块的引用---require("./a")文件(模块)名称
- 前端模块化呢？？？
- 模块的导出---export
- 模块的引用---import
html文件
//引入类型一定要写，要不会报错a.js:1 Uncaught SyntaxError: Unexpected token {
a.js文件(引入---有两种方式)
第一种
import {val1,val2} from './b.js';//解构赋值，引入什么变量从哪个文件里。import有预解释功能
console.log(val1,val2);
第二种
import * as b from './b.js';
console.log(b.val1,b.val2);
不用解构赋值一个个的接收，用一个*代表所有接收到后负给一个变量b。b是一个对象
b.js文件(导出)
export let val1='爱你';
export let val2='李倩';
//会将val1,val2放在一个对象内导出{val1:"爱你",val2:"李倩"}
还有一种对应的导出和引入方式
a文件 导出 export default {a:"1",b:"李倩"} 默认将这个对象导出
b文件 引入 import xxx from "./a.js" 引入默认导出的模块对象时，名字可以随便起不用对应了
第三方模块和自带模块的引入直接引用不需要路径。自定义模块必须写路径，即使在同一路径下
阿里矢量图标
- 阿里矢量图标官网->图标库->搜索自己想要的图标加入购物车->点击购物车添加至项目->选择中间font class->然后可以下载到本地也可以使用在线链接->复制链接到新标签页打开会看到源码一样。如下图。其中.iconfont类名是必须得有的公共样式，后面的每个类名是自己独有的样式。也就是说使用字体图标是HTML标签要有这两个样式
- 在线使用需要两步
1. 将生成的在线代码复制，在index.html页面通过link标签引入
2. 创建一个标签比如i，使用图标看能否使用
阿里矢量图标
- 阿里矢量图标官网->图标库->搜索自己想要的图标加入购物车->点击购物车添加至项目->选择中间font class->然后可以下载到本地也可以使用在线链接->复制链接到新标签页打开会看到源码一样。如下图。其中.iconfont类名是必须得有的公共样式，后面的每个类名是自己独有的样式。也就是说使用字体图标是HTML标签要有这两个样式
- 在线使用需要两步
1. 将生成的在线代码复制，在index.html页面通过link标签引入
2. 创建一个标签比如i，使用图标看能否使用
前面还有看不懂的代码不用管
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fanhui:before {
content: "\e641";
}
.icon-denglu:before {
content: "\e62e";
}
.icon-zhuye:before {
content: "\e600";
}
下载到本地使用iconfont
将字体图标下载到本地，其中一共有5个文件有用。
将iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff四个文件放入iconfont文件夹后放到项目静态资源目录下
将iconfont.css放到项目静态资源目录下(与iconfont文件夹同级)，更改iconfont.css文件内容
.iconfont下面的内容可以删掉，引入iconfont文件夹里文件的路径需要修改
在main.js引入iconfont.css文件，之后就可以在全局任何地方使用了，必须有类名iconfont，标签内写字体代码，如
注意：本地使用字体图标，一定要在main.js里全局引入，而且在index.html文件之外的其他组件使用。
否则的话会出问题，比如字体图标不显示也不报错，例如
1. 在index.html页通过link标签引入，就有问题，在任何地方使用图标-不报错也不显示。
2. 在main.js里全局引入，引入是没问题，但是，在index.html页想要试试能不能显示图标，显示不了-不报错也不显示。但在其他任何组件内使用都没问题
局部组件
插槽slot
- 插槽就是把子组件HTML结构中间的部分当做内容，往子组件模板slot那插，替换slot标签
- parent元素就代表的整个子组件模板，其中把slot部分替换为parent元素中间的内容
header
var parent={
template:"
header
footer
var parent={
template:`
没有内容往这里插
`
};
给组件模板里slot插槽起名字，HTML组件里内容与之对应的内容就会插到插槽这里
插槽用于封装组件
我是标题
我是身体
我是尾部
实现点击按钮.两个页卡一个显示一个隐藏
v-if实现
利用vue自带的动态组件component
childone
childtwo
子传父
- 创建子组件的同时可以给自定义HTML标签子组件监听一个自定义事件，给监听的自定义事件绑定方法该方法能改变父级的数据。该方法什么时候执行取决于子级什么时候触发该自定义事件，子级通过this.$emit("自定义事件名")可以触发自定义事件。如果触发事件的时候需要传值，子组件上只是父组件的事件名即可，子组件的方法里定义形参会自动被父组件里的方法就收到用参数
父组件通过属性将数据传递给子组件，子组件有权对父组件传递过来的属性验证
//局部组件，定义之后还需要去实例里面进行注册。组件就是一个对象
var mya={
props:["content"],//从父组件中接收的数据（表面上是字符换实际上是变量）
//props就像data一样，把接收到的数据挂载到实例上了。然后就可以像拿data里面的值一样拿props里的数据
template:"{{content}}"
};
var mya={
props:{
content:{
type:[String,Number],//验证传递过来的数据类型，可以是多个，字母开头必须是大写
require:true,//属性必须传
default:"default value",//如果通过属性传递数据默认值没用，如果不传使用默认值
validator:function (value) {
//value就是传递过来的数据，可以对传递过来的数据进行验证
return value.length>5
}
}
},
template:"{{content}}"
};
计算属性和watch监听
- 计算属性不是一个固定的数据,是根据data里的数据计算出来的。数据变化计算属性还会变，计算属性也是数据。
- 计算属性里的函数很特殊，它的函数名，将来可以作为数据使用。函数的返回值就是动态计算出的数据。
- 计算属性计算出来的数据不用在data里定义，跟data里的数据一样。可以直接在页面里获取使用
- 计算属性有缓存机制---计算属性依赖的数据不发生改变时计算属性不会重新计算
- 计算属性computed和监听器watch（也有缓存机制）都是vue自动调用，如果写成methods里的方法我们需要自己去调用且没有缓存机制
1. 计算属性里面如果只有get方法的话，可以直接是函数，也可以写成对象形式-对象里面是get与函数属性名属性值，如下
- [x] 使用场景：比如全选按钮。要通过计算属性计算数据里面的每一项是不是其中某项是false。
- 用every遍历每一项，如果其中一项返回false，则返回false停止遍历。则不全选
- [ ] v-model绑定计算属性的时候，会先执行计算属性的get方法得到计算属性。当数据改变时也会重新计算。设置数据时会执行计算属性的set方法，通过变化后的计算属性值给数据重新赋值
- 计算属性里的函数很特殊，它的函数名，将来可以作为数据使用。函数的返回值就是动态计算出的数据。
- 计算属性计算出来的数据不用在data里定义，跟data里的数据一样。可以直接在页面里获取使用
- 计算属性有缓存机制---计算属性依赖的数据不发生改变时计算属性不会重新计算
- 计算属性computed和监听器watch（也有缓存机制）都是vue自动调用，如果写成methods里的方法我们需要自己去调用且没有缓存机制
1. 计算属性里面如果只有get方法的话，可以直接是函数，也可以写成对象形式-对象里面是get与函数属性名属性值，如下
- [x] 使用场景：比如全选按钮。要通过计算属性计算数据里面的每一项是不是其中某项是false。
- 用every遍历每一项，如果其中一项返回false，则返回false停止遍历。则不全选
- [ ] v-model绑定计算属性的时候，会先执行计算属性的get方法得到计算属性。当数据改变时也会重新计算。设置数据时会执行计算属性的set方法，通过变化后的计算属性值给数据重新赋值
computed:{
val:function () {
return this.a.every(item=>item.isselected)
}
}
computed:{
val:{
get:function () {
//取定义的计算属性时函数被执行
return this.a.every(item=>item.isselected)
},
set:function (a){//这个方法里的a就是最新的计算属性
//设置定义的计算属性时函数被执行
return this.a.forEach(item=>item.isselected=val)
}
}
}
//观察一个数据是否变化，变化后干一件什么事
watch:{
//函数名要和观察的数据名一样
a:function (newval,oldval) {//只有观察的a值变化时才会出发a函数
console.log(newval,oldval);
//每一次在input框里输入的新值是newval，上一次的值是oldval，
}
}
观察路由参数变化，如果变化发送ajax。观察$route属性
### 标签的显示隐藏，v-show，v-if
1
2
3
必须挨在一起使用，如果中间有其他标签会报错
```
### Bootstrap
- 想要写响应式的页面但是PC端不能用rem，Bootstrap实现了栅格化布局兼容PC端和移动端
```
navbar-default 导航条颜色灰色
panel-warning 黄色面板
text-danger 改变文字颜色
bootstrap默认提供了几种颜色，如default，warning，danger，success，info浅蓝色，primary蓝色
想要改变某个组件的颜色如上写就可以
h3 改变字体大小（类名或标签）
pull-right 让元素靠右显示
&tim就会有提示 按钮里的符号
btn btn-danger btn-xs 按钮的基本样式
active 选中
form-control 让input元素宽度百分百
在container布局下，指定行，里面的内容占12列自适应。我规定他占6列的宽。整体会在容器内往左偏移，让整体在在容器内适量的右偏移使其居中
### vuetools工具
下载工具地址https://github.com/arcliang/Vue-Devtools- 通过git下载到本地
打开谷歌浏览器-更多工具-扩展程序。直接将Chrome文件夹拖拽到扩展程序区域，浏览器会自动识别安装
右上角会出现灰色vue图标，以后运行vue程序时他就会亮了
使用
控制台会出现vue项，点击其中的root会看到所有挂在根实例上的内容
```
```
@事件.stop 阻止冒泡
@事件.capture 捕获，捕获先执行在执行冒泡
@事件.prevent 取消事件的默认动作。
例如阻止a标签的默认跳转行为
@事件.once 事件只触发一次
@事件.self 只有点击自己的时候触发事件(相当于事件源)
### mounted钩子函数里面操作DOM元素
如果ref写在HTML标签上获取到的是HTML元素。如果写在组件名上我们获取到的是组件的实例
如果是循环可以获取到多个元素
如果ref写在HTML标签上获取到的是HTML元素。如果写在组件名上我们获取到的是组件的实例
如果是循环可以获取到多个元素
{{msg}}
mounted:function () {
console.log(this.$refs.myhtml);//第二步：就可以通过this.$refs所有ref的集合，从里面哪其中的某一个了
//因为DOM渲染是异步操作，所以所有的操作DOM，都应在this.$nextTick(()=>{})中完成，
// this.$nextTick(()=>{})在DOM重新渲染完后执行
}
### 动态绑定class和style
class和:class绑定的样式不冲突-->
class和:class绑定的样式不冲突-->
2
3
4