特性检测：检测浏览器是否支持某个属性
vue指令
页面渲染
vue的指令都是v-这种格式，虽然v-xxx="xxx"写的值是用""包裹，但实际上是js，因此需要在双引号里再加层引号，否则会报错。
v-text : 用于替换插值表达式，如果有v-text，插值就不生效。
v-html: 输出转译过的不带HTML标签的HTML语句。富文本编辑器的内容直接渲染的话是被转译过的，那么HTML标签就会被渲染到页面上
v-cloak: 配合样式来使用，可以让样式在vue实例化之前生效
v-for: 用于循环渲染数据。v-for="item in list"。可以直接遍历对象、数组、数字。
v-if: 直接是dom节点的移除和插入，来达到显示和隐藏元素的效果。通过判断true和false来实现
v-else:必须与v-if配合使用，而v-if不需要配合v-else
v-show: 是通过改变css样式style来显示或者隐藏元素，通过display。对于需要频繁切换显示和隐藏的节点特别实用，比如弹窗、手机注册和邮箱注册两个tab的切换。
v-bind:属性:用于动态绑定元素的属性 ，可以简写为:属性。
事件绑定
v-on:事件名: 绑定事件，可以直接操作data里的数据，v-on可以缩写为@事件名。
vue的事件可以加括号也可以不加，不加默认接收事件处理函数的事件对象；加了括号就可以任意传参。（可以继续在括号里通过$event获取当前事件对象）
v-on:click: 用于绑定点击事件
v-model:自动绑定input输入内容改变事件
@keyup.enter: .enter是按键修饰符，也可以用enter的对应码13代替。可以使用组合键如.ctrl.enter
.stop:事件修饰符，阻止冒泡。
class绑定
计算属性
methods和computed区别
methods用来绑定一些方法，每次有数据更改只要在模板里使用这个方法就会执行，没有缓存。
computed是计算属性，有依赖缓存，只有它所依赖的数据发生改变才会重新计算，计算出来的值可以当成data直接使用，不需要添加括号，必须要有一个return值。计算属性是基于它们的响应式依赖进行缓存的。
侦听器 watch
一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
computed是生成一个新的数据，watch是观测已有的数据，当被观测的数据发生改变时，自动执行后面的方法。
filters过滤器
ajax-fetch
vue组件
组件是可复用的 Vue 实例(可以将组件进行任意次数的复用)，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
Vue.compoent(" tagName ", options ):
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
全局注册一个组件，第一个参数就是要使用的标签的名字，不论使用大驼峰或者小写字母加中线的命名方式，在使用组件的时候都要使用小写字母加中线使用。
第二个参数就是组件的配置项，全局注册的组件可以在任何地方使用
components:局部注册一个组件，只有当前Vue实例中才可以使用这个组件
组件的data必须是一个方法(函数)，然后要return一个对象，为了保证组件的数据是独立的而不是共享
一个组件可以嵌套，但是一个组件的template只能有一个根元素
组件的props
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
通过prop来接收调用的时候传过来的值，然后可以把prop当data使用，但是不能修改父组件传的值，这是基于单项数据流。
单项数据流：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
props的大小写
HTML 的属性忽略大小写，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名的 prop 名需要使用短横线分隔命名
传递非字符串类型的数据需要使用动态绑定v-bind
如果要对传入的props进行类型检查，就需要使用对象的方式来写props；如果要对传入的值进行更多约束，就需要把这个值写成对象，对其设置default或者required(二选一)
ref
ref:用来获取dom或者组件,
<tag ref="a"></tag> //可以通过this.$refs.a获取到tag标签
slot:插槽 占位组件，能够实现标签的嵌套，可以写成:
<slot name="xxx"></slot>//给slot加一个name属性，写在模板里面，在页面的显示顺序只有模板里面的顺序有关
<h2 slot="xxx">内容</h2>//通过slot属性来获取获取到slot
动态组件
<component is=" "></component>//is后面写组件名，用来指定是哪一个组件
还可以通过is 来解决标签嵌套不合法的情况
动画
用transition将需要过渡的元素包起来，要为多个元素设置的话使用transition-group。
transition的主要作用是给它的子元素添加和移除class
v-enter:v指元素的name属性，如xxx-enter,不设置的话默认为transition内所有的元素
过渡的类型
v-enter：定义进入过渡的开始状态
v-enter-active：定义进入过渡生效时的状态。
v-enter-to: 定义进入过渡的结束状态。
v-leave: 定义离开过渡的开始状态。
v-leave-active：定义离开过渡生效时的状态。
v-leave-to:定义离开过渡的结束状态。
transition负责给它的子元素添加和移除class
过渡模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
生命周期
1. 创建阶段
（1）beforeCreate -- 没什么用，里面取不到数据
（2）created -- 没有this.$el,也没有真实的dom，但是已经有数据，可以在这里更改数据，如果数据是同步更改就会带入下一个生命周期；如果是异步修改，当数据修改完之后就会进入更新阶段，在这里做Ajax请求比较推荐
2. 挂载阶段
(1)beforeMount--这里已经能看到this.$el，但还没有进行真实的数据替换，看到的还是插值表达式，这里也不会做太多的事
(2)mounted--在这里this.$el是真实渲染的dom，在这里及之后才能取到真实的dom。一些第三方dom插件也会在这里来进行初始化，（仅限没有异步数据的dom，这里也可以做Ajax请求）
3. 更新阶段
(1)beforeUpdate--不做太多事
(2)updated--可能需要在这里重新初始化第三方的dom操作插件
4. 销毁阶段
(1)beforeDestroy--在这里一般会去解除一些事件的监听，或者清除一些定时器。
(2)destroyed
nextTick
在created里数据有异步更新时，这时dom还没有进行渲染，在这时候进行dom操作没有用，而在$nextTick的回调中去操作dom的时候，代表此时的页面已经根据最新的数据渲染完成。通过异步返回的数据去操作dom，就放在next tick里执行
created() {
// 模拟一下ajax
setTimeout(() => {
this.banners = ['banner 1', 'banner 2', 'banner 3']
// 在这里的dom还是没有应用新数据的dom
// this.$nextTick(() => {
// // 在这里的dom就是已经使用了更新的数据的dom
// this.initSwiper()
// })
this.$nextTick()
.then(() => {
this.initSwiper()
})
}, 2000)
}
虚拟DOM
console.time() ... console.timeEnd()查看代码运行耗费的时间
vue-ajax axios
1、安装axios -- npm i axios -s
2、在index.js里引入axios import axios from 'axios'
3、配置baseUrl const ajax = axios.create({ baseURL: 'http://jsonplaceholder.typicode.com/' })
4、在index.js里定义接口导出你要的数据，以todos为例
import axios from 'axios'
const ajax = axios.create({
baseURL: 'http://jsonplaceholder.typicode.com/'
})
//取todos
export const getTodos = () => {
return ajax.get('/todos')
}
//单个todo
export const getTodoById = (id) => {
return ajax.get(`/todos/$(id)`)
}
5、在main.js里引入所有的，而不用挨个引入import * as $http from './requests' //引入所有的
6、挂载到Vue上
import * as $http from './requests' //引入所有的
Vue.prototype.$http = $http
7、在app.vue里请求数据(在created里)
created () {
this.$http.getTodos()
.then(resp => {
if(resp.status === 200){
this.todos = resp.data
}
})
}
拦截器
作用：更改请求的参数，在里面自动注入一个参数；
//拦截请求
//拦截器 使用一个方法去拦截Ajax的request请求,有些请求要求你必须携带token...
ajax.interceptors.request.use((config) => {
//第一个人用途：用于显示全局的loading状态
document.querySelector('.modal').style.display = 'block'
//第二个用途：在请求参数里加上全局的参数，比如token，这个token在实际项目中会从本地存储中取
config.headers.token='123'
//必须return config，否则请求不会执行
return config
})
//拦截响应
ajax.interceptors.response.use(resp => {
//隐藏全局loading
document.querySelector('.modal').style.display = 'none'
//全局处理错误
if(resp === 200){
return resp.data
}
//这里统一做错误处理，需要后端配合，接口的返回格式必须一致
})
判断isDev，判断是否处于开发模式，就使用前面的地址；上线模式就使用后面的地址
vue-cli
<style scoped> scoped指定样式只在当前页面生效
代理服务器配置
devServer:如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
module.exports = {
devServer: {
port: 3000,
open: true,
proxy: {
//所有以ajax开始的都配置到下面这个地址
'/ajax': {
target: 'http://m.maoyan.com',
changeOrigin: true
}
}
}
}
kepp-alive
用法:
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。主要用于保留组件状态或避免重新渲染。
Propes：
-
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 -
exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 -
max- 数字。最多可以缓存多少组件实例。
会新增activated和deactivated这两个生命周期
