input不管用 vue_重读 VUE 官方文档 lt;2gt;
当在一个自定义组件上使用 class 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
v-if vs v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
你也可以提供第二个的参数为 property 名称 (也就是键名):
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>
Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- 例如filter()、concat()和slice()。它们不会改变原始数组,而总是返回一个新数组。当使用非变异方法时,也可以触发试图更新。
Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性
v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数。
<div> <span v-for="n in 10">{{ n }} </span> </div>
当它们处于同一节点,v-for的优先级比v-if更高,这意味着v-if将分别重复运行于每个v-for循环中
需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:
<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
// ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() alert(message) } }
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
v-model
指令在表单<input>
、<textarea>
及<select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model
会忽略所有表单元素的value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data
选项中声明初始值。
- text 和 textarea 元素使用
value
属性和input
事件; - checkbox 和 radio 使用
checked
属性和change
事件; - select 字段将
value
作为 prop 并将change
作为事件;
.lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy
修饰符,从而转变为使用 change
事件进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符:
<input v-model.number="age" type="number">
这通常很有用,因为即使在 type="number"
时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()
解析,则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<input v-model.trim="msg">
父级组件可以像处理 native DOM 事件一样通过 v-on
监听子组件实例的任意事件:
<blog-post...v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
同时子组件可以通过调用内建的 $emit
方法 并传入事件名称来触发一个事件:
<button v-on:click="$emit('enlarge-text')">Enlarge text
</button>
有了这个 v-on:enlarge-text="postFontSize += 0.1"
监听器,父级组件就会接收该事件并更新 postFontSize
的值。
有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 <blog-post>
组件决定它的文本要放大多少。这时可以使用 $emit
的第二个参数来提供这个值:
<button v-on:click="$emit('enlarge-text', 0.1)">Enlarge text
</button>
然后当在父级组件监听这个事件的时候,我们可以通过 $event
访问到被抛出的这个值:
<blog-post...v-on:enlarge-text="postFontSize += $event"
></blog-post>
或者,如果这个事件处理函数是一个方法:
<blog-post...v-on:enlarge-text="onEnlargeText"
></blog-post>
那么这个值将会作为第一个参数传入这个方法:
methods: {onEnlargeText: function (enlargeAmount) {this.postFontSize += enlargeAmount}
}
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
<input v-model="searchText">
等价于:
<inputv-bind:value="searchText"v-on:input="searchText = $event.target.value"
>
input不管用 vue_重读 VUE 官方文档 lt;2gt;相关推荐
- Vue官方文档梳理-全局API
Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图 ...
- vue怎么把api 挂载到全局_深入理解Vue官方文档梳理之全局API
Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图 ...
- [VUE系列二]vue官方文档总结和整理
一.选项/数据 1. data 类型:Object | Function 组件的定义只接受Function 因为组件可能被用来创建多个实例.如果data仍然是一个纯粹的对象,则所有的实例将共享引用同一 ...
- Vue官方文档(48): vuex的基本使用
1.在package.json中增加vuex "vuex": "^3.6.2" 2.运行npm install 3.在src目录下新建store目录,在stor ...
- 都在夸Vue文档简洁易懂?官方文档编写指南了解一下
来源:Vue官方文档 编写文档是一种换位思考的练习.我们并不是在描述客观现实--源代码已经做到了.我们的工作是帮助塑造用户与 Vue 生态系统之间的关系.这份不断发展的指南提供了一些规则和建议,说明如 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- 基于vue的微信小程序开发5分钟上手教程(官方文档转)
使用手册 mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致. 注:其实就是官方文档,只是习惯看博文学习才直接copy过来的,详见官方文档 本文档适用于有一定 Vue.j ...
- 都在夸官方文档 Vue.js 2021 年度报告出炉!
整理 | 苏宓 出品 | CSDN(ID:CSDNnews) 作为前端开发框架三剑客之一,Vue 自 2014 年发布以来,成为很多开发者必备的工具. 近日,国外软件开发机构 Monterail 在对 ...
- Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
最新文章
- HTML 5 视频/音频参考手册
- DCMTK:OFerror_code的测试程序
- c++ explicit 修饰构造函数
- How to uninstall Internet Explorer 7
- 异步服务_微服务全链路异步化实践
- 使用预训练模型进行句对分类(Paddle、PyTorch)
- 为什么QQ能用网络,而浏览器却不能用网络?
- selenium 处理cookie及switch的使用
- 中剪取一种颜色的板块_不知道UI设计中APP界面版式如何排版?来看这个!
- dll可以在linux下使用吗_Linux下使用rm删除文件,并排除指定文件
- sql 查询数据库索引重建_SQL查询性能的杀手– –了解不良的数据库索引
- 比较两个对象是否一样的代码
- 51Nod 1046 A^B Mod C(日常复习快速幂)
- docker容器的标准使用过程_docker容器的使用
- 天梯赛L2-10:排座位
- 计算机技术与园林,计算机技术在园林绿化设计中的应用
- 相机成像原理与数学模型
- uv转化率多少正常_浏览量(PV)和访客数(UV)和跳出率是什么意思?
- go install报错no install location for directory outside GOPATH
- Unity3D自动旋转屏幕