vue项目中快捷语法糖

1.Vue.js是渐进式框架，采用自底向上增量开发的设计基于MVVM思想。
2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
3.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
4.指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。
5.站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
6.请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
7.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除
-------------------------------------------------------------------------------
Vue.set(object, key, value) //动态响应的数据；
如：this.$set(this.someObject,‘b‘,2)
    Vue.set(vm.someObject, ‘b‘, 2)
-------------------------------------------------------------------------------
向已有对象上添加一些属性：
使用 Object.assign() 或 _.extend() 方法来添加属性，但是添加到对象上的新属性不会触发更新；
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
-------------------------------------------------------------------------------
<form v-on:submit.stop="onSubmit"></form> //阻止事件冒泡
<form v-on:submit.prevent="onSubmit"></form> //阻止默认行为
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 键盘事件,按键修饰符 -->
<input v-on:keyup.13="submit">
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112(可以使用 v-on:keyup.f1)
-------------------------------------------------------------------------------
computed和methods的区别；
计算属性是基于它的依赖缓存，计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
而methods需要每次执行；如果你不希望有缓存，请用 method 替代。
-------------------------------------------------------------------------------
<input v-model.number="age" type="number"> //自动将用户的输入值转为 Number 类型
<input v-model.trim="msg">  //去空格处理，免去校验
<input v-model.lazy="msg" > //v-model 在 input 事件中同步输入框的值与数据,转变为在 change 事件中同步
-------------------------------------------------------------------------------
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
-------------------------------------------------------------------------------
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
支持传值类型;
type 可以是下面原生构造器：
? String
? Number
? Boolean
? Function
? Object
? Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
在某个组件的根元素上监听一个原生事件：
my-component v-on:click.native="doTheThing"></my-component>
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。牢记，表单控件进行数据绑定时的语法：
<input v-bind:value="something" v-on:input="something = $event.target.value">
-------------------------------------------------------------------------------
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit(‘id-selected‘, 1)

// 在组件 B 创建的钩子中监听事件
bus.$on(‘id-selected‘, function (id) {
// ...
})
在更多复杂的情况下，你应该考虑使用专门的 状态管理模式vuex(建议用此方法管理数据状态变化).
-------------------------------------------------------------------------------
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染
<keep-alive>
    <component :is="currentView">
    <!-- 非活动组件将被缓存！ -->
    </component>
</keep-alive>
动态组件用is绑定:多个组件可以使用同一个挂载点，然后动态地在它们之间切换
1.ref 是一个数组或对象，包含相应的子组件。
2.$refs 只在组件渲染完成后才填充，并且它是非响应式的，应当避免在模版或计算属性中使用 $refs 。

原文地址：https://www.cnblogs.com/lhl66/p/8608433.html