Vue

1.1 Vue

keep-alive是缓存页面的，配合activated使用

activated (){ //重新执行ajax }

1.2 Vue去中心化

• 使用webpack的require_context实现路由”去中心化”管理
• 当你在开发一个大型单页面应用的时候，项目之初一般做法是所有的路由规则都维护在一个route.js的文件里
• 有了require.context(),我们可以通过正则匹配引入相应的文件模块

1.3 Vue 代理

   proxyTable: {
        '/api':{
            target:'http://localhost:8080',
            pathRewrite:{
                '^/api':'/static/mock'
            }
        }
    },

1.4 Vuex

• 先调用Actions时，一定要调用dispatch方法
• 先调用Actions, 再去调用Mutations

1.5 emit

//向外触发这个事件，然后父组件去监听

this.$emit('change',e.target.innerText)

//父组件

<CityAlphabet :cities="cities"
   @change="handleLetterChange"
></CityAlphabet>

1.6 父组件向子组件传值

<HomeHeader :city="city"></HomeHeader>

//子组件接收
props:{ //接收父组件传递来的属性
  city: String
}

1.7 指令directives

指令是用来操作dom的

<div v-frag class="a"></div>
<button v-color="flag">变色</button>

<script>
  var vm = new Vue({
     el:"#app",
     data:{
       flag:'red'
     },
     directives:{ // v-可以默认不写
        color(el,bindings){ // el指代的是button按钮
           el.style.background = bindings.value
        },
        drag(el){
           //拖拽
        }
     }
  })
</script>

1.8 watch和computed

computed默认调用get方法，必须要有return

computed不支持异步

如果是异步的，则使用watch

对于任何复杂逻辑，都应当使用计算属性

1.9 实例上的方法

this.$nextTick()表示最后执行

如果数据变化后想获取真实dom中的内容需要等待页面渲染完毕后，再去获取，所有的dom操作，最好 放在 this.$nextTick()里

在mounted里面操作时，最好套上this.$nextTick(),保证dom渲染完毕后，再去获取dom

mounted(){
    this.$nextTick(()=>{
        console.log(this.$refs.wrap);
    });
}

1.10 父传子props

<Header :msg="msg"></Header>

1.11 发布订阅

vm.$on 绑定事件

vm.$once 绑定一次

vm.$off 解绑事件

vm.$emit 触发事件

1.12 子传父

this.$emit 触发自己的自定义事件，让父亲的方法执行

//子组件
methods:{
  getData (){
    // 触发事件
    this.$emit('son-add',800)
  }
}

//父组件
<son @son-add="add"></son>

1.13 ref的作用

ref的作用是获取真实DOM元素

但是在组件中，获取的是组件的实例，而不是DOM元素

1.14 强调nextTick的用法

想操作DOM, 就加一个nextTick,保证没问题

1.15 Vue公共方法应该写在哪里

lib下面建个utils,用的时候import下就好了，在main.js文件中引入

放到独立的 Repo，写成独立的组件或插件，其他项目用的时候 npm link

写插件，应当有一个公开方法 install

utils\utils.js

export default {
  install:function(Vue,opt){
    //所有内容写在这
  }
}

1.16 Vue的修饰符

@touchstart.prevent="handleTouchStart"  //阻止touchstart事件的默认行为

1.16.1 v-model的修饰符

• .lazy , .lazy修饰符延迟了同步更新属性值的时机。即将原本绑定在input事件的同步逻辑转变为绑定在change事件上。

<input type="text" v-model.lazy="input_lazy" />

var vm = new Vue({
  el:'#app',
  data:{
    input_lazy:''
  }
});

• number , 该修饰符用来将输入内容自动转换成数值。

var vm = new Vue({
  el:'#app',
  data:{
    input_number:""
  }
});

<!-- 当开始输入数字时，属性值将实时更新成Number类型的数值 -->
<input type="text" v-model.number="input_number" />

• .trim, 该修饰符用来自动过滤字符串前后的空字符。

var vm = new Vue({
  el:'#app',
  data:{
    input_trim:""
  }
});

<input type="text" v-model.trim="input_trim" />

1.16.2 v-on的修饰符

绑定的事件修饰符可以改变事件的触发方式

• .stop , 该修饰符将阻止事件向上冒泡，同理于调用event.stopPropagation()方法

<button type="button" @click.stop="stop_click">StopPropagation</button>

• .prevent, 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

<form @submit.prevent="form_submit">
  <button type="submit">Submit</button>
</form>

• .self, 该指令只当事件是从事件绑定的元素本身触发时才触发回调

<div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
    <button type="button" @click="stop_click">Button</button>
</div>

• .once, 该修饰符表示绑定的事件只会被触发一次

<button type="button" @click.once="once_click">Button</button>

• 键值修饰符

该修饰符可以用来监听键盘事件

<input type="text" @keyup.enter="enter_click"/>