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