VUE DAY2

按键修饰符

<div id="dog"> 
  <input type="text" v-model="msg" @keyup="fn">
</div>

<script>
  var vm = new Vue({
    el:'#dog',
    data:{
      msg:''
    },
    method:{
      fn(){
        console.log('nihao')
      }
    }
  })
</script>

以上代码增加需求，要求只有点击回车键才会调用fn函数，那么可以：

方式一：注册时间后面加上.keycode

//@keyup="fn"
@keyup.13="fn"

方式二：Vue中提供了大量按键修饰符的名字，如

enter、esc、delete等

方式三：自定义别名

Vue.config.keyCodes.name = code;
Vue.config.keyCodes.test = 13;

v-show:控制元素的显示或者隐藏

v-show是通过css样式控制元素，diplay:block或者display:none

<div id="dog">
  <p v-show="isShow"><p>
</div>

<script>
  var vm = new Vue({
    el:'dog'.
    data:{
      isShow: true
    }

  })
</script>

v-if：也是控制元素的显示或者隐藏

v-if通过创建和删除元素来实现

v-else-if / v-else：跟在v-if后面

v-cloak：解决闪烁问题（需要配合CSS样式），在vue加载完成的时候，会自动移除v-cloak属性

<style>
  [v-cloak] {
    display:none
  }
</style>

<p v-cloak>{{ msg }}</p>

v-pre：vue碰到了有v-pre指令的元素，会直接跳过，不会进行解析

v-once：只会解析第一次，后续如果数据发生了改变，不会再次的解析