zoukankan      html  css  js  c++  java
  • 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 。

     

  • 相关阅读:
    读《构建之法- 现代软件工程》一书
    自我介绍
    jQuery Validate表单验证
    oracle数据库 expdp/impdp 和 exp/imp
    Java JDK安装及环境配置
    《JavaScript》JS中的跨域问题
    Python语言基础
    .net web 应用程序C#
    C# string 常用方法
    前端获取URL和SESSON中的值
  • 原文地址:https://www.cnblogs.com/lhl66/p/8608433.html
Copyright © 2011-2022 走看看