vue知识点总结

父组件向子组件传递数据
在子组件中使用 props 从父组件接收参数。注：在 props 定义的属性，都可以在组件中直接使用
props 来自父组件，而组件中 data return 的数据是子组件自己的，作用域是组件本身，可以在 template、computed、methods使用
props 的值有两种：一种是字符串数组；一种是对象
可以使用 v-bind 动态绑定父组件内容
v-bind 使用与否向子组件传递数据区别：使用 v-bind：会将后边内容转化为可转化的类型；不使用 v-bind：传递数据时，默认字符串
单向数据流：通过 props 传递数据单向，子传父不行
目的：解耦。避免子组件修改父组件状态
两种情景：

父组件传递初始值进来，子将其作为初始值保存起来，在自己作用域下随意使用（在 data 中再申明数据，应用父 props ）
props 作为需要被转变的原始值传入（使用计算属性进行重算）
命名规则：Vue中使用驼峰
在组件中的 html 必须使用短横线命名
在组件中，父组件给子组件数据，必须短横线。在 template 中，必须使用驼峰命名
在组件中的 data 中，用 this.xxx 引用时，只能是驼峰命名
子组件给父组件传递数据
子组件通过 $emit()发布订阅模式，父组件订阅该模式：$emit(‘fn’,参数1) 参数1传入父组件函数
$emit() 的代码 实际上会传一个 input 事件， input 后的参数就是传递给 v-model 绑定的属性值
v-model其实是一个语法糖：1. v-bind 绑定一个 value 元素；2. v-on 指令给当前元素绑定 input 事件
要使用 v-model 必须：1. 接收一个 value 属性；2. 在有新的 value 触发 input 事件

非父组件通信：可以使用一个空 Vue 实例作为中转
父： var bus=new Vue()
子A： bus.$emit{(}^{\prime }变量{名}^{\prime },x)触发A事件子B：bus.$on(‘变量名’,function(){}) 子B创建的钩子监听

父链：this.$parent子链：通过给子组件添加ref属性增加索引ref{=}^{\prime }{a}^{\prime }。this.$refs.c

自定义指令
与组件相同，分为全局注册和局部注册（组件中使用 directives ）

提供的钩子函数：

bind：只调用一次，指令第一次绑定到元素时
inserted：绑定元素插入父节点时调用
update：绑定元素所在模板更新时调用，不管绑定值是否变化
componentUpdated：完成一次更新周期调用
unbind：解绑，只调用一次
钩子函数的参数：

el：指令所绑定元素
binding：一个对象包含以下属性：name：指令名；value：指令绑定值；oldValue：指令绑定的前一个值；expression：绑定值的字符串形式；arg：传给指令的参数；modifiers：包含修饰符的对象
vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
render函数
template 可以在 DOM 结构中的

在 render 函数的方法中，参数必须是 createElement ，类型为 Function
render 函数：在该函数中 return 的是 createElement 函数
在 createElement 函数中第一个参数（必选）可以是 string、Object、Function
string： html 标签
object：一个含有数据选项的对象 { template : ‘

’ }
function：方法返回含有数据选项的对象
第二个参数可选：数据对象，只能是 Object 。可以有 class:{类名:true} 、 style:{} 、attrs:{id:‘id名’} 、domProps:{innerHTML:’ ’} （用来写原生的 DOM 属性）
第三个参数可选： string 或 array
//createElement函数的三个参数
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者
// 解析上述任何一种的一个 async 异步函数。必需参数。
‘div’,

// {Object}
// 一个包含模板相关属性的数据对象
// 你可以在 template 中使用这些特性。可选参数。
{
// (详情见下一节)
},

// {String | Array}
// 子虚拟节点 (VNodes)，由 createElement() 构建而成，
// 也可以使用字符串来生成“文本虚拟节点”。可选参数。
[
‘先写一些文字’,
createElement(‘h1’, ‘一则头条’),
createElement(MyComponent, {
props: {
someProp: ‘foobar’
}
})
]
)
this.$slots在render函数中第三个参数就是vnodevarheader=this.$slots.header
createElement(‘header’,header) ‘header’ 标签；header 第三个参数，数组
注意：render函数中第二个参数，绑定监听事件时

return createElement(‘input’,{
on:{
input:function(event){
var a=this //此时的this指的是window
}
}
})
所以要在 render 函数中指定 Vue 实例，如：

render:function(createElement){
var self=this //此时的 this 就是 Vue 实例
}
作用域插槽在 render 函数
scope 最好写在 template 标签
scope 后边是 render 函数传来的数据

return createElement(‘div’,this.$scopedSlots.default(text{:}^{\prime }我是子组件数{据}^{\prime }//scope后的数据))函数化组件标记组件为functional，当该值为true时，意味它是无状态(没有响应式数据)，无实例(没有this上下文)。此时，context转变，作为render函数的第二个参数，this.$slots.default 更新为 context.children，之后 this.level 更新为 context.props.level 。

vue-router
安装 npm install --save vue-router
引用 import router from ‘vue-router’ 使用 Vue.use(router)
配置路由文件，在 Vue 实例中注入
//配置路由文件
new Vue({
router : [{
path : ‘/’, //跳转路径
component : //跳转组件
}]
})
//在 Vue 实例中注入
new Vue({
el : ‘#app’,
router : router,
component : { App },
template : ‘’
})
确定视图加载位置
vue-router 路由跳转

vue-router 传参数
必须在路由内添加路由的 name
必须在 path 后添加 :/+传递的参数（配置路由文件）

读取参数： $route.params.xxx
方式：====/helloworld/xxx

方式：====/helloworld?name=xxx&msg=yyy （不常用）

Axios
安装 npm install axios
引入加载 import axios from ‘axios’
将 axios 全局挂载到 Vue 原型 import Vue from ‘vue’ Vue.prototype.$http=axios发请求this.$http.get(‘xxx’).then(function(res){}).catch(function(err){console.log(err)})
两种传参形式：

axios.get( ‘/user’ , { params : { ID : 1234 } } )
axios.get( ‘/user’ , { ID : 1234 } ) （只有一个参数时）或 axios.get(‘xxxxx?page=1&limit=15’)
Axios之POST
post 传递数据两种格式：

form-data?page=1&limit=15
x-www-form-urlencoded{page:1,limit:10}
在 axios 中， post 请求接收的参数必须是 form-data
qs 插件------- qs.stringify

Vuex之store
用来管理状态，共享数据，在各个组件之间管理外部状态

引入 Vuex ，并 use 方法使用
创建状态仓库（store，state不能改）
var store=new Vuex.Store({
state:{xxx:xxx},//状态
mutations:{}
})
直接通过 this.$store.state.xxx 拿到全局状态
Vuex相关操作
View > actions（非必须，可添加异步）> mutations ====> state ====> View

在 store 仓库中使用 mutations:{a:function(state){}}
调用： this.$store.commit(xxx)此处xxx是mutations中定义的方法名store中定义actions:b:function(context)context.commit{(}^{\prime }{a}^{\prime })（可有可无，可添加异步）调用：this.$store.dispatch(xxx)
store 中定义 getters:{c:function(state){return xxxx}}
调用：this.$store.getters.xxxx （判断状态）
注意： actions 提交的是 mutations ，而不是直接变更状态； actions 可以包含异步操作，但 mutation 只能同步操作

作者：猫晓封浪
链接：https://www.jianshu.com/p/504495579886
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。