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 。

vue项目中快捷语法糖的更多相关文章

  1. Vue项目中sass语法该怎么用?

    最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...

  2. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  3. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  4. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  5. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  6. JVM(二):Java中的语法糖

    JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...

  7. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  8. 在vue项目中如何添加eslint

    随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...

  9. vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...

随机推荐

  1. MongoDB C++ gridfs worked example

    使用libmongoc,参考:http://mongoc.org/libmongoc/current/mongoc_gridfs_t.html #include <mongoc.h> #i ...

  2. sid, pid, gid

    (一) 参考 :https://unix.stackexchange.com/questions/18166/what-are-session-leaders-in-ps 命令: ps xao pid ...

  3. .NET 4.0 System.Threading.Tasks学习笔记

    由于工作上的需要,学习使用了System.Threading.Tasks的使用,特此笔记下来. System.Threading.Tasks的作用: Tasks命名空间下的类试图使用任务的概念来解决线 ...

  4. SPOJ:Ada and Orange Tree (LCA+Bitset)

    Ada the Ladybug lives near an orange tree. Instead of reading books, she investigates the oranges. T ...

  5. 【BZOJ 3884】 上帝与集合的正确用法

    [题目链接] 点击打开链接 [算法] 通过欧拉拓展定理,列出递推公式 [代码] #include<bits/stdc++.h> using namespace std; typedef l ...

  6. 【旧文章搬运】Windows句柄表分配算法分析(二)

    原文发表于百度空间,2009-03-30========================================================================== 四.句柄表 ...

  7. 【203】利用UltraISO制作和刻录光盘映像的方法

    参考:利用UltraISO制作和刻录光盘映像的方法 软件:UltraISO注册版(制作镜像).rar 目录: 1.利用UltraISO制作光盘映像2.利用UltraISO刻录光盘映像文件 1.利用Ul ...

  8. 深入分析 JDK8 中 HashMap 的原理、实现和优化

    HashMap 可以说是使用频率最高的处理键值映射的数据结构,它不保证插入顺序,允许插入 null 的键和值.本文采用 JDK8 中的源码,深入分析 HashMap 的原理.实现和优化.首发于微信公众 ...

  9. C++笔试题(四)

    华为从事通信网络技术与产品的研究.开发.生产与销售,是中国电信市场的主要供应商之一,并已成功进入全球电信市场.每年华为都要在各大高校招聘大批的应界生,特别是华中科技大学.公司网址是:http://ww ...

  10. hdoj5115【区间DP·基础】

    题意: 有n头wolf排成一排,杀一头wolf回受到受到的伤害=它的本身a[i]+相邻两个b[i-1]+b[i+1].然后杀死第k个位置的wolf的话,k-1和k+1默认相邻(满足的话). 思路: 用 ...