indd
indd

Vue 知识总结

基于vue 2+ 写一份知识总结，可以说是学习笔记

目录：

一、vue实例的基本结构
二、vue事件处理、绑定属性
三、vue指令、自定义指令
四、vue过滤器
五、vue数据监听
六、vue组件
七、vue-router
八、axios

一、Vue 实例的基本结构

Vue官网API

 <div id="app">
   <p>{{msg}}<p>
 div>

 Welcome

var vm = new Vue({
  el: '#app', //等价于后面的 .$mount('#app') 用其中之一就可以了
  render: h => h(App), //理解不够深入，参考（https://cn.vuejs.org/v2/api/?#render）
  data: { 
    //页面响应的数据都放在这里如上（组件只接受 function 且必须返回一个对象），zhicvm.$data 访问这里面的data
    msg: 'Welcome',
  },
  props:{
    //props 可以是数组或对象，接收任何值
  },
  methods:  {
    //页面或组件定义的方法的集合，可通过 vm.reset() 直接调用
    reset: function(){
      this.msg = '这是重新设置之后的数据'
    }
  },
  computed: {
    //计算属性(computed)与方法(methods) 类似，如果计算数据量比较大，建议放到这里
    //计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
    //参考（https://cn.vuejs.org/v2/api/?#computed）
  },
  components：{
    // 局部组件注册的地方
    'component-a': ComponentA,
    'component-b': ComponentB
  },
  directives: {
    // 局部指令注册的地方
    focus: {
      // 指令的定义
      inserted: function (el,binding) {
        el.focus(); 
      }
    }
  },
  filters:{
    // 局部过滤器注册的地方
  },
  //生命周期钩子
  beforeCreate: function (){}, //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  created: function (){},//在实例创建完成后被立即调用。
  beforeMount: function (){},//在挂载开始之前被调用：相关的 render 函数首次被调用。
  mounted: function (){},//el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  beforeUpdate: function (){},//数据更新时调用，发生在虚拟 DOM 打补丁之前。
  updated: function (){},//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  beforeDestroy: function (){},//实例销毁之前调用。在这一步，实例仍然完全可用。
  destroyed: function (){
    //Vue 实例销毁后调用。
    //调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  },
}).$mount('#app')
二、Vue 事件处理、绑定属性

v-on：

1、绑定事件监听器。用在普通元素上时，只能监听原生 DOM 事件（如：click、keyup/down、mouseenter/over/move/down/out 等）。也可以监听自定义事件即 methods 里面的事件。
2、在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。

修饰符：
.stop - 调用 event.stopPropagation()。阻止冒泡
.prevent - 调用 event.preventDefault()。阻止默认事件
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法：

<button v-on:click="doThat('hello', $event)">button>

<button @click="doThis">button>

<button @click.stop="doThis">button>

<button v-on="{ mousedown: doThis, mouseup: doThat }">button>
  • v-on 还提供了按键修饰符 
键盘按钮的别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

// 可以通过全局 `config.keyCodes` 对象自定义按键修饰符别名
// 使用 方式 `v-on:keyup.f1` ，f1 这个名字你可以任意取，你知道是什么意思就可以了
Vue.config.keyCodes.f1 = 112

v-bind：

动态地绑定一个或多个特性，或一个组件 prop 到表达式。


<img v-bind:src="imageSrc">

<img :src="imageSrc">

<img :src="'/path/to/images/' + fileName">

<div :class="{ red: isRed }">div>
<div :class="[classA, classB]">div>
<div :class="[classA, { classB: isB, classC: isC }]">

<div :style="{ fontSize: size + 'px' }">div>
<div :style="[styleObjectA, styleObjectB]">div>

<div v-bind="{ id: someProp, 'other-attr': otherProp }">div>

<my-component :prop="someThing">my-component>
.

三、Vue 指令、自定义指令

Vue指令：

v-text：

<span v-text="msg">span>

<span>{{msg}}span>

v-html：

//输出真正的 HTML

"html">div>
data{
  html:'我是真正的html'
}

v-show：

//根据表达式之真假值，切换元素的 display CSS 属性。

"ok">Hello!h1>

v-if、v-if-else、v-else：

//v-if 是“真正”的条件渲染，如果条件为假，dom不会渲染在页面当中
//v-show 会一直渲染在dom当中
//当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
<h1 v-if="ok">Yesh1>
<h1 v-if="ok">Yesh1>
<h1 v-else>Noh1>
<div v-if="type === 'A'">Adiv>
<div v-else-if="type === 'B'">Bdiv>
<div v-else-if="type === 'C'">Cdiv>
<div v-else>Not A/B/Cdiv>

v-for：

//基于源数据多次渲染元素或模板块。
<div v-for="item in items">
  {{ item.text }}
div>
//另外也可以为数组索引指定别名 (或者用于对象的键)：val->对象的键值  key->对象的键  index->对象的下标
<div v-for="(item, index) in items">div>
<div v-for="(val, key) in object">div>
<div v-for="(val, key, index) in object">div>

v-model：作用于、