用法/插值表达式

{{}} 中还可以使用 JS 表达式进行简单的运算或三元运算
注 ：文本插值的形式，其中不能书写表达式，支持单个表达式（ var a=6; 是多行表达式， var a; a=6; ）,不能使用流控制（如： if 等，使用三元运算符）

过滤器（使用管道符‘|’）

语法： {{ data | filter1 | filter2 }} （可以多次过滤）
用于格式化文本（字母大小写，货币位号符，时间等）
注 ：还可以传参 {{ data | formatData(a,b) }} 其中第一个参数和第二个参数，分别对应实例中过滤器的第二、三个参数，实例中的第一个参数必须是 data 中数据（ Vue 实例的 filter 属性）

指令和事件：快速完成 DOM 操作、循环渲染、显示和隐藏

v-text='' ：解析文本和 {{}} 作用一样 v-html='' ：解析html v-bind:属性名='' ：动态更新HTML元素上的属性，如 id ， class 等 v-on:动作名='函数名' ：绑定事件监听器
函数名：方法名写在 Vue 实例中的 methods 属性内，函数形式，函数内的 this 指向的是当前 Vue 实例本身，可以直接使用 this.xxx 形式访问或者修改数据。 注： 当函数中还有函数时，就要使用箭头函数，要不然无法访问当前 Vue 实例

Vue 中用到的所有方法都定义到 methods 中

在不影响功能的前提下，使用简洁方法实现同样效果
v-bind: ====> : （冒号）
v-on: ====> @

遇到复杂逻辑时，最后返回一个结果，还可以依赖多个 Vue 实例的数据： 只要其中任意数据变化，计算属性就会重新执行，视图也会更新 getter和setter ：每个计算属性都会有这两个方法，默认使用 getter 方法， setter 手动修改计算属性的值时触发

计算属性还可以用于动态设置元素的样式名称 class 和内联样式 style

小技巧 ：

计算属性可以依赖其它计算属性

不仅可以依赖当前 Vue 实例，还可以依赖其它 Vue 实例

计算属性缓存 ：计算属性都可以调用 methods 中的方法实现，如： {{函数名()}}

页面方法：如果调用方法，只要页面重新渲染，会重新执行

计算属性：不管是否渲染，所依赖数据未发生变化，就永远不变

计算属性依赖缓存，当遍历大数组和做大量计算时，应当使用计算属性

v-bind绑定class和style

绑定class 对象语法 ： v-bind:class="{ '类名':data属性名 }"
对象的键是 类名 ，值时 布尔值 （true：类名存在；false：类名不存在）当表达式过长或逻辑复杂时，还可以绑定计算属性

数组语法 ：当需要多个 class 时，可以使用数组语法。数组成员为 data 属性对应类名 数组语法、对象语法混用 ：第一个成员是对象，第二个成员是数组，如： :class="[{ active:isActive },errorClass]"

绑定内联样式： v-bind:style 方法与 class 类似（对象语法、数组语法）
对象语法 ：键代表 style 属性，值代表属性对应的 data 属性
注意 ：CSS 属性名称使用驼峰命名或短横线分隔命名
切记 ：Vue 中要是大写字母都会转换为 “-” 加小写，如： dsfADbcG ====> dsf-a-dbc-g
使用 ： style 时，Vue.js 会自动给特殊的 CSS 属性名称增加前缀，比如：transform 无需再添加前缀

Vue.js内置指令

v-cloack ： 一般与 进行结合使用
作用：解决页面初始化慢导致的闪动问题 v-once ： 只渲染一次，后续都不会再重新渲染

条件渲染指令

v-if 、 v-else-if 、 v-else ：用法为连着出现在三个标签内，哪个满足条件显示哪个，后接布尔值，如：

<p v-if='6>3'>1</p>
<p v-else-if='3<6'>2</p>
<p v-else>3</p>
//此时页面显示1
v-show：知识改变 CSS 属性 display 后接布尔值（true：显示；false：消失）

注：v-if 和 v-show 的区别
v-if：实时渲染：页面显示渲染，不显示移除
v-show：永远存在页面中，只是改变 CSS 的 display 值
v-for：列表渲染。遍历多个对象；遍历一个对象的多个属性
注：当 Vue 在渲染页面时，出于效率考虑，会服用已有元素，只会渲染了变化的元素

解决方法：加 key ，唯一。提供 key 值决定是否复用该元素

Vue检测不到数组的变动：1. 改变数组指定项 Vue.set( app.arr, 1, "car") 2. 改变数组长度 app.arr.splice(1)
方法和事件
如果方法中带有参数，调用没加括号，默认传入原生事件 event

所以：方法中有参数时，调用加括号
stop：阻止事件冒泡。如： v-on:click.stop=''
prevent：阻止默认事件，谁的默认事件给谁加
self：只是作用在元素本身，而非子元素时调用
one：只执行一次的方法
监听键盘事件 @key.13='' ===> 指定的 keyCode
v-model：用于表单类元素上双向绑定事件
input 和 textarea

注：所显示的值只依赖于所绑定的数据，不再关心初始化时的 value
单选按钮：
单个单选按钮，直接用 v-bind 绑定一个布尔值（用 v-model 不行）
如果是组合使用，就用 v-model 来配合 value 使用，绑定选中的单选框的 value 值，此处绑定的初始值 value 随便给
单个复选框：直接用布尔值，可以用 v-model 和 v-bind
多个复选框：如果是组合使用就用 v-model 配合 value 使用， v-model 绑定一个数组，如果绑定的是字符串，则会转为 true 、 false ，与其绑定的复选框的 checked 属性相对应。
单选：绑定的 value 值初始化可以为数组、字符串，有 value 则匹配 value 值，无则匹配 text 值
多选：就需要 v-model 配合 value 使用， v-model 绑定一个数组，与复选框类似
v-model 一定是绑定在 select 标签上
单选：初始化最好给定字符串， v-model 绑定静态字符串或布尔值
多选：初始化最好给定一个数组
lazy： v-model 与 input 绑定时，默认同步数据，加 lazy 可使其失去焦点或回车后更新
number：将输入的字符串转化为 number 类型
trim：自动过滤首尾空格
作用：提高代码复用性（挂载都用变量名标签）
全局注册：优点：所有实例都可以用；缺点：权限大，容错率低
Vue.component('变量',{
 template: '组件'
局部注册：在 Vue 实例中定义
new Vue({
  el: '#app',
  components: {
    '变量名': {
      template: '组件'
Vue 组件模板在某些 html 标签中受限，如：<table>
<table><tbody is='变量名'></tbody></table>
注意：1. 必须使用小写字母加 ‘-’ 形式命名；2. template 中内容必须被一个 DOM 元素包裹，可嵌套；3. 在组件定义中，除了 template ，还可以有 data、computed、methods；4. 其中 data 在组件中必须是一个方法
父组件向子组件传递数据
在子组件中使用 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('变量名',x) 触发A事件

子B： bus.$on('变量名',function(){}) 子B创建的钩子监听
父链：this.$parent

子链：通过给子组件添加 ref 属性增加索引 ref='a' 。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 结构中的 <script> 内，在 JS 文件中 component 使用 template: '#id' 引入。 注： template 下只允许有一个子节点
在 render 函数的方法中，参数必须是 createElement ，类型为 Function
render 函数：在该函数中 return 的是 createElement 函数
在 createElement 函数中第一个参数（必选）可以是 string、Object、Function
string： html 标签
object：一个含有数据选项的对象 { template : '<p></p>' }
function：方法返回含有数据选项的对象
第二个参数可选：数据对象，只能是 Object 。可以有 class:{类名:true} 、 style:{} 、attrs:{id:'id名'} 、domProps:{innerHTML:'<span></span>'} （用来写原生的 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函数中
第三个参数就是 vnode
var header=this.$slots.header
createElement('header',header) 'header' 标签；header 第三个参数，数组
注意：render函数中第二个参数，绑定监听事件时
return createElement('input',{
    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:'我是子组件数据' // 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 : '<App></App>'
确定视图加载位置 <router-view></router-view>
vue-router 路由跳转
<router-link to='/'><router-link>
vue-router 传参数
必须在路由内添加路由的 name
必须在 path 后添加 :/+传递的参数（配置路由文件）
<router-link :to="{
  name : xxx,
  params : { msg: yyy }
}"></router-link>
读取参数： $route.params.xxx

方式：====/helloworld/xxx
<router-link :to="{
  path : '/helloworld',
  query : { msg: yyy }
}"></router-link>
方式：====/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('a')}} （可有可无，可添加异步）

调用： this.$store.dispatch(xxx)
store 中定义 getters:{c:function(state){return xxxx}}