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 。
vue项目中快捷语法糖的更多相关文章
- Vue项目中sass语法该怎么用?
最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- Vue项目中如何使用Element-UI以及如何使用sass
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...
- JVM(二):Java中的语法糖
JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...
- 如何在VUE项目中使用SCSS
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
- 在vue项目中如何添加eslint
随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...
- vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
随机推荐
- maven实战(5)-- settings.xml的配置
哈哈 查看maven的官方文档最权威:http://maven.apache.org/settings.html
- Watir: 如果安装sougou浏览器,有可能导致Watir不能工作
如果安装了搜狗,Watir::Browser.new并不一定能打开新的IE浏览器.这种情况下,必须卸载搜狗浏览器,当然,attach,find方法还是可以用的
- lua ffi简介
本文转自网络 由来 FFI库,是LuaJIT中最重要的一个扩展库.它允许从纯Lua代码调用外部C函数,使用C数据结构.有了它,就不用再像Lua标准math库一样,编写Lua扩展库.把开发者从开发Lua ...
- 【旧文章搬运】Windows内核常见数据结构(进程相关)
原文发表于百度空间,2008-7-24========================================================================== 进程的相关结 ...
- 037--pymysql和SQLAchemy
一.pymysql操作 1.执行SQL #!/usr/bin/env python # -*- coding:utf-8 -*- import pymysql # 创建连接 conn = pymysq ...
- 任务41:Individual authentication 模板
使用命令行创建项目 会自动加上ef core和Identity core代码的示例 默认创建mvc是不带Identity的 dotnet new -help:查看可用的命令: -au:Individu ...
- bzoj 4161 Shlw loves matrixI【常系数线性齐次递推】
并不会递推,不过板子挺好背的,只要是类似的递推都能用,但是注意c数组不能使负数 如果除了递推还有常数项的话,就用f[i]-f[i-1]的方式消掉常数项(然后多一个f[i-1]的项) #include& ...
- springcloud(二) 负载均衡器 ribbon
代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo ribbon是一个负载均衡客户端 类似nginx反向代理,可 ...
- A. Banana (2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛)
题目大意是有一堆猴子,然后每个猴子都有自己喜欢的香蕉类型,然后香蕉会在指定的位置,问每个猴子能不能在每个地方吃到自己喜欢的香蕉. 其实直接暴力即可(因为最大最大最大是50) 上代码: #include ...
- easyUI Uncaught TypeError: Cannot read property 'length' of undefined
dataGrid json 封装数据格式为 List<Object> 格式