Vue.js特性：渐进式技术栈

1. 轻量级的框架
2. 双向数据绑定
3. 指令
4. 插件化

Vue实例书写模板：

new Vue({
  el: '#app',
  template: '<h1>hello {{msg}}</h1>',
  data: {
    msg: 'world'
  }
})

• 访问Vue实例的属性：
  变量名.$Vue属性名
• 访问 Vue 实例 data 元素的属性：
  变量名.属性名

生命周期钩子

有很多，具体查看官方文档，经常使用的有：

• created：实例创建后，未挂载， $el 还不可用
• mounted：挂在到实例后调用（相当于 jQuery 的 $(document).ready() ）
• beforeDestory：实例销毁前调用，用于解绑监听事件

用法/插值表达式

{{}}中还可以使用 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

小技巧：

1. 计算属性可以依赖其它计算属性
2. 不仅可以依赖当前 Vue 实例，还可以依赖其它 Vue 实例

• 计算属性缓存：计算属性都可以调用 methods 中的方法实现，如： {{函数名()}}
  • 页面方法：如果调用方法，只要页面重新渲染，会重新执行
  • 计算属性：不管是否渲染，所依赖数据未发生变化，就永远不变

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

v-bind绑定class和style

• 绑定class
  1. 对象语法： v-bind:class="{ '类名':data属性名 }"
     对象的键是类名，值时布尔值（true：类名存在；false：类名不存在）当表达式过长或逻辑复杂时，还可以绑定计算属性
  2. 数组语法：当需要多个 class 时，可以使用数组语法。数组成员为 data 属性对应类名
  3. 数组语法、对象语法混用：第一个成员是对象，第二个成员是数组，如：: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： 一般与 display:none 进行结合使用
  作用：解决页面初始化慢导致的闪动问题
• 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

• 单选按钮：
  1. 单个单选按钮，直接用 v-bind 绑定一个布尔值（用 v-model 不行）
  2. 如果是组合使用，就用 v-model 来配合 value 使用，绑定选中的单选框的 value 值，此处绑定的初始值 value 随便给
• 复选框：
  1. 单个复选框：直接用布尔值，可以用 v-model 和 v-bind
  2. 多个复选框：如果是组合使用就用 v-model 配合 value 使用， v-model 绑定一个数组，如果绑定的是字符串，则会转为 true 、 false ，与其绑定的复选框的 checked 属性相对应。
• 下拉框：
  1. 单选：绑定的 value 值初始化可以为数组、字符串，有 value 则匹配 value 值，无则匹配 text 值
  2. 多选：就需要 v-model 配合 value 使用， v-model 绑定一个数组，与复选框类似
  3. v-model 一定是绑定在 select 标签上

总结：

• 单选：初始化最好给定字符串， v-model 绑定静态字符串或布尔值
• 多选：初始化最好给定一个数组

修饰符

• lazy： v-model 与 input 绑定时，默认同步数据，加 lazy 可使其失去焦点或回车后更新
• number：将输入的字符串转化为 number 类型
• trim：自动过滤首尾空格

组件

作用：提高代码复用性（挂载都用变量名标签）

1. 全局注册：优点：所有实例都可以用；缺点：权限大，容错率低

Vue.component('变量',{
 template: '组件'
})

2. 局部注册：在 Vue 实例中定义

new Vue({
  el: '#app',
  components: {
    '变量名': {
      template: '组件'
    }
  }
})

3. Vue 组件模板在某些 html 标签中受限，如：<table>

<table><tbody is='变量名'></tbody></table>

注意：1. 必须使用小写字母加 ‘-’ 形式命名；2. template 中内容必须被一个 DOM 元素包裹，可嵌套；3. 在组件定义中，除了 template ，还可以有 data、computed、methods；4. 其中 data 在组件中必须是一个方法

父组件向子组件传递数据

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

单向数据流：通过 props 传递数据单向，子传父不行

目的：解耦。避免子组件修改父组件状态
两种情景：

• 父组件传递初始值进来，子将其作为初始值保存起来，在自己作用域下随意使用（在 data 中再申明数据，应用父 props ）
• props 作为需要被转变的原始值传入（使用计算属性进行重算）

命名规则：Vue中使用驼峰

1. 在组件中的 html 必须使用短横线命名
2. 在组件中，父组件给子组件数据，必须短横线。在 template 中，必须使用驼峰命名
3. 在组件中的 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',{
  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:'我是子组件数据' // scope后的数据
}))

函数化组件

标记组件为 functional，当该值为 true 时，意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。
此时， context 转变，作为 render 函数的第二个参数，this.$slots.default 更新为 context.children，之后 this.level 更新为 context.props.level 。

vue-router

1. 安装 npm install --save vue-router
2. 引用 import router from 'vue-router' 使用 Vue.use(router)
3. 配置路由文件，在 Vue 实例中注入

//配置路由文件
new Vue({
  router : [{
    path : '/', //跳转路径
    component : //跳转组件
  }]
})

//在 Vue 实例中注入
new Vue({
  el : '#app',
  router : router,
  component : { App },
  template : '<App></App>'
})

4. 确定视图加载位置 <router-view></router-view>

vue-router 路由跳转

<router-link to='/'><router-link>

vue-router 传参数

1. 必须在路由内添加路由的 name
2. 必须在 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

1. 安装 npm install axios
2. 引入加载 import axios from 'axios'
3. 将 axios 全局挂载到 Vue 原型 import Vue from 'vue' Vue.prototype.$http=axios
4. 发请求 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

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

1. 引入 Vuex ，并 use 方法使用
2. 创建状态仓库（store，state不能改）

var store=new Vuex.Store({
  state:{xxx:xxx},//状态
  mutations:{}
})

3. 直接通过 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}}
  调用：this.$store.getters.xxxx （判断状态）

注意： actions 提交的是 mutations ，而不是直接变更状态； actions 可以包含异步操作，但 mutation 只能同步操作

mixin

优先使用组件本身的属性