VueJs Study Notes

1. v-on:后面可以跟的事件有： click mouseover mousedown dblclick mouseout...

2. bootstrap [ˈbu:tstræp] btn-sm btn-lg

• 模态框 modal： data-toggle data-target data-dismiss

3. html中&time可以出现很多图标，比如×：&times

4. vue中的事件对象：$event

• 事件冒泡处理：
  对这个对象的属性cancelBubble设置true可以防止事件冒泡
  又或者使用@click.stop
  eg:

<div id="app" @click="show2">
    <input type="button" value="Button" @click="show">
</div>

• 阻止默认事件处理：
  @contextmenu是鼠标右键的一个产生事件，可以使用JS原生$event的preventDefault（）
  亦或是使用@contextmenu.prevent

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

• Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令

• 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：
  <span v-once>This will never change: {{ msg }}</span>

• new一个Vue实例的时候，使用 el: '#app' 等同于调用 vue.$mount('#app')（手动挂载）

• Vue实例访问自定义属性

        var vm = new Vue({
            data: {
                a: 1
            },
            aa: 2,
            show: function () {
                alert(1)
            }
        }).$mount('#app')
        vm.$options.show()
        console.log(vm.$options.aa)

vm.$log()则可输出实例data属性的状态

• 自定义键盘事件：

Vue.directive('on').KeyCodes.ctrl = 17
Vue.config.KeyCodes.ctrl = 17（Vue 2.x）
@keyup.ctrl='show'

• Vue2.x生命周期如下：
  Create beforeCreate beforeMount Mounted beforeUpdate Updated beforeDestroy destroyed

• 响应式布局生效：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

• export default and export :
  有default和没有default的区别在于：有default在引用时可以自定义名称，而没有default时需要使用{}括起来且名称必修和class名称一致
  每个文件里只能有一个default组件，但可以有多个非default组件

• JS中对对象进行非浅复制：JSON.parse(JSON.stringify(this.info_c))

转载于:https://www.jianshu.com/p/cd18332b64e8