2. 首页 > 专业解读 >

vue的修饰符_vue常用修饰符

作者：小凤考试网 • 更新时间2025-05-01 09:57:28 •阅读 1

vue 绑定keydown ,key up 失效问题

}，

查了好多文档发现原因： keydown属于input标签原生的。而el-input 没有此原生的两个初始化中心的方法：方法，所以无法。解决办法就是把el-input像原生标签一样渲染。vue给出的解决办法是加修饰符 .native

vue的修饰符_vue常用修饰符vue的修饰符_vue常用修饰符


vue的修饰符_vue常用修饰符


如下：

在这里记录下！

Vue解决ViewModel监测不到数据改变的问题

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

这也是为什么我们以 update:myPropName 的模式触发取而代之。举个例子，在一个包含 titl},e prop 的设的组件中，我们可以用以下方法表达对其赋新值的意图：

然后父组件可以那个并根据需要更新一个本地的数据属性。例如：

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据文档定义： 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 。

受现代 JaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

看以下实例：

可以看出d属性是有get 和 set方法的，而新增的e属性是没有的。

点击触发3次addd，点击触发3次adde,页面效果及控制台信息如下

此时触发1次addd,页面效果如下：

由此可以看出，更新新增属性e，是不会更新视图，但是会改变其值，当更新原有属性d时会更新视图，同时将新增的属性e的值也更新到视图里边

定义：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-ll reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.obj, 'e', 0)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.obj,'e',02)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 Object.assign(this.obj, { a: 1, e: 2 })

this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

上述实例解决如下：

点击触发3次addd，点击触发3次adde,页面效果及控制台信息如下：

Vue实战（六）通用Table组件

childMyAge: function (val) {

本文是 Vue实战 系列的第六篇文章，主要介绍Falcon项目中通用 Table 组件的开发和使用 。Falcon项目地址：

handler (val) {

随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

对于一个中后台类的项目，一个比较常见的展示形式就是Table了，相信大家都不陌生，如下图所示：

一个Table通常由如下几个部分构成：

除此之外，由于 Table 中的数据往往都是从后端获取的，所以这个包含 Table 的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个 Loading 动画；当请求数据为空时，需要显示一个占位的空元素控件。

在 Falcon 项目的实践中，我们发现，每一个页面中的 Table 除了行数，列数，及单元格的内容不同之外，其它的地方，包括样式，分页及数据处理逻辑都是一样的，每次新增一个这样的页面无非就是拷贝粘贴了，那么在这种情况下，我们抽取出了一个通用的 Table 组件，取名为：TableBox。

说到这里插一个题外话：

关于这个问题我认为，如果一个功能只出现在了一个或两个页面中，往往是没有必要处理的，因为一两个功能的重复还不足以说明问题，也很难看出其中的共性，如果强行抽取的话，反而会增加维护的负担；如果出现的地方超过了两处，那么我们就需要考虑将这个功能进行抽取了，我也常常和 Team 的人说：“如果一个功能你拷贝粘贴了1次，没关系，不用纠结；2次的话，就得考虑其复用性和组件化了”。

当然，以上内容只适用于那些初期开发过程中无法预测未来变化的项目，如果刚开始产品设计的时候，就能够充分的预见和考虑未来的业务发展，并且给出详细的产品及UI设计方案，那么就另当别论了。

回到我们的主题，抽取这个 TableBox 其实并不是一气呵成的，而是在业务迭代中，不断地发现新的场景，新的问题，带着这些问题我们不断的优化 TableBox，最终达到一个较为完整的状态。这也符合 Vue 本身渐进式的理念。接下来我们花些时间，一起探讨一下这些场景和问题：

我们发现，对于不同的页面，只要带有 Table 的，其数据都需要从远端获取，一般情况下，我们会在每个业务中都去写一下这个网络获取数据的逻辑，但是，如果仔细想想，你就会发现，其实这类列表数据获取和处理的逻辑都是一样的。所以针对这个情况，我们只要和后端协商好列表相关的统一 API 数据结构，如：

那么数据获取，渲染，Loading 动画展示隐藏，分页加载等作都可以在 TableBox 中完成。

这个组件需要的只是向外暴露出数据请求的 API 地址及各种参数：

然后写好对应的获取数据的 fetchData 方法：

这样对于调用者来说，只需要简单的传入相关 API 地址及参数就可以了，数据加载的事情让 TableBox 去处理就好了，非常的方便。

因为 TableBox 组件本身是和业务无关的，所以其肯定无法知道我的这个 Table 的表头是什么，有多少行，也无法知道每一行展示什么数据，这些内容全部应该由父组件告知 TableBox。

要实现以上的功能，我们可以借助于 Vue 本身提供的强大的工具 Slot，如果简单点说，大家可以把 Slot 理解为一个坑位，因为大多数情况下，组件自己无法预先知道某块区域放置什么内容，那么组件可以先将个区域放置一个 Slot，就是挖个坑，当父组件引入子组件时，会告诉子组件往这个坑位中填充什么样的内容。

回到我们的 TableBox 组件，我们首先挖两个坑（放置两个 Slot ），命名为 ths 和 ，分别用于表头和行列表内容：

这样对于表头的数据，可以由引入 TableBox 的父组件来指定，用法如下，其中 slot='ths' 就是刚才我们在 TableBox

中放置的 Slot

同样，对于每一行的内容，也是由引入 TableBox 的父组件来指定，用法如下：

在开发业务的过程中，遇到一个场景：当页面数据已经全部加载完毕后，在某些场景下需要改变 Table 中某些数据的状态（删除某列或改变某一列的数据）。

这里具体举个 Falcon 中的实际例子：

我们允许用户给每个项目分配多个环境，以区分测试，生产，开发和各种自定义的场景，在每个环境下，用户可以设置不同的 Git Branch 。用户点击 Choose Branch 按钮后，会触发一个请求到后端，变更当前环境的 Git Branch， 修改成功后该列表项的按钮会显示为 Current Branch 。

由于以上逻辑都是在引入了 TableBox 的父组件中完成的，其能够控制数据的刷新，由于 场景1 中我们已经把数据请求的逻辑都封装在了 TableBox 中，所以我们需要让其向外暴露出一个 Boolean 属性：reloadData，当此属性为 true 时，TableBox 会重新请求一次API，并刷新列表。

同理，由于作数据是由父组件发起的，所父组件中也需要有同样的属性，并且和 TableBox 中的 reloadData 保持数据同步，这里用到了 Vue 2.3 版本增加的一个 .sync 修饰符进行处理 。

这样，当 reloadData 在数据更新完毕后还原为 false 状态时，我们可以显示的触发一个 emit ：

由于目前所有的数据获取都是在 TableBox 内部处理的，所以父组件本身是无法直接获取到数据的。但是在某些情况下，我们又希望父组件能够获取到数据，以便能够在顶层进行更灵活的处理，这时我们就需要在 TableBox 内部将数据抛出。

抛出的方式也很简单，我们可以使用 emit 方法抛出一个。根据这个思路我们改造一下上文提到的 fetchData 方法：

解决了以上4个场景的问题后，我们这个 TableBox 可以说告一段落了，后续如果有遇到新的场景，新的问题，我们只需要不断的去优化去完善这个组件即可。

到目前为止，TableBox 已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。

并且随着这样的组件越来越多，甚至我们的后端工程师经过简短的培训，也可以上手部分前端页面的开发了。

附上 TableBox 的地址：

怎样作Vue表单类父子组件数据传递

}这是在父组件里定义的数据，当然名字不会这样取了。

这次给大家带来怎样作Vue表单类父子组件数据传递，作Vue表单类父子组件数据传递的注意事项有哪些，下面就是实战案例，一起来看一下。

childMyAge: this.myAge

使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。

// 这个 prop 属性接收父组件传递进来的值

在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。

与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。

1、传递基本类型数据

先看个例子：

给子组件的 input 绑定一个方法 changeName，每次执行这个方法的时候都会触发自定义 input，并且把输入框的值传递进去。

父组件通过 v-model 指令绑定一个值，来接收子组件传递过来的数据。但这样只是父组件响应子组件的数据，如果还要子组件响应父组件传递的数据，就需要给子组件定义一个props属性 value，并且这个属性必须是 value，不能写个其它单词。

v-model 其实就是一个语法糖，详情可以参考使用自定义的表单输入组件。

2、传递引用类型数据

当子组件里的内容比较多时，比如子组件有多个表单元素，如果还像上面那样给每个表单元素绑定值，那就要写很多重复代码了。所以这个时候通常传递的是一个对象，传值的基本原理不变，不过写法上会有些不同。

还是先看代码：

props 是单向数据流，当我们需要对 props 内的属性进行双向绑定时，就需要用到.sync 修饰符，详情请参考.sync 修饰符，这里不做赘述。

这里需要注意的是，vue 中是不能直接修改 props 的，所以如果我们要向父组件传值，还是需要通过修改 data 里的值，prop 只是作为父子之间通话的中间人存在。

另外，如果我们想要预览父组件最开始传的数据，就需要通过 watch prop 的变化，在子组件初始化的时候就把值传进去。

注意： 我在子组件里把 this.$emit('update:formData', this.form) 放在 mounted 当中的，其原因是为了避免在每个 input 标签的 input 中触发自定义，但这样写的前提是，父子组件都要共用一个对象。

这里还需要注意的是，如果有多个子组件使用一个对象，那就要避免这种写法，因为一个组件修改了这个对象的数据，那么其它子组件也就都跟着改变了。

所以我在用的时候都是给每个子组件分配了一个自己的对象，比如：

data () {

return {

parentObject: {

child_1_obj: {},

child_2_obj: {},

结尾

也没什么说的了，对 Vue 还是处于使用的阶段，对其底层的东西了解还不够，我也好想读读源码，但总只是想想.....大家觉得有什么不妥的地方尽管说，大家相互交流交流。

使用JS判断字符串中包含内容方法总结

JS+HTML5实绑定鼠标的粒子动画

vue 组件通信方式，六种方法

组件内部需要修改 props

“，善哉善哉。”

“魔镜啊！魔镜，谁是这世界上最美丽的女人？”

“愿上帝保佑你，阿门！”

等等，这些语句是不是特别经典？特别有画面感？眼前立马浮现出家人、后母和牧师？

通过言语，可以判断一个人的职业、身份、地位。

通过特殊语句可以与神明通话，可以和精灵共舞。

（1）props / $emit 适用 父子组件通信

父组件注入，子组件接收。

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

注意：props是单向数据流，既只能从父级传到子级，如果想要达到双向，子级能够修改父级，则需要给props加sync修饰符。(文章后部分有详细介绍)

（2）ref 与 $parent / $children 适用 父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

这也就是上面代码中，父组件中使用 :formData.sync="form" 绑定值时，form 是一个对象，而子组件中的触发自定义 this.$emit('update:formData', this.form) ，this.form 也得是一个对象。（3）$attrs / $listeners 适当子组件内容较少时，会直接传递基本类型数据，通常为String, Number, Boolean三种。用于 隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 。它可以通过 v-on="$listeners" 传入内部组件

（4）provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（5）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为总线（中心），用它来触发和，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（6）Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

vuex的详细使用方法： vuex管理状态仓库使用详解

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你知道的回答出越多方法越加分，表明你对 Vue 掌握的越熟练。

举例props使用

a.vue 引用了一个detail组件

详解ntBus通信方法

步：首先需要创建总线并将其导出，以便其它模块可以使用或者它。

第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击，发送一则消息，想通知 B页面。

接下来，我们需要在 B页面 中接收这则消息。

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：

如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复作的页面，EventBus在的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus。

如果想移除的，可以像下面这样作：

$on是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个，会重复到数据。

可以使用EventBus.$off('aMsg')来移除应用内所有对此某个的。

或者直接调用EventBus.$off()来移除所有频道，不需要添加任何参数 。

总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意两点，组件A$emit应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。

Vue2.0怎么实现组件数据的双向绑定

这次给大家带来Vue2.0怎么实现组件数据的双向绑定，Vue2.0实现组件数据的双向绑定的注意事项有哪些，下面就是实战案例，一起来看一下。

然后在父组件中这个，这样就能获取到完整的数据了。

通过上一节的学习，我们了解到了在Vue的组件中数据传递： prop 向下传递，向上传递 。意思是父组件通过 prop 给子组件下发数据，子组件通过给父组件发送消息。但Vue中， props 是单向数据绑定，虽然在Vue 1.0版本中，通过 .sync 能实现双向数据绑定。但 .sync 在几个版本中被移除，尽管在2.3版本重新引入 .sync 修饰符，可这次引入只是作为一个编译时的语法糖存在。如果直接使用 .sync 修饰符来做双向数据绑定，会报信息。那么我们如何在组件中实现双向数据绑定呢？这一节我们就来学习这方面的相关知识。

实现组件双向数据绑定

在上一节中的示例使用的是Vue 1.0版本中的 .sync 实现数据双向绑定。那我们先来看看抛弃 .sync 修饰符来实现组件双向数据绑定的工作： 通过Vue提供的机制，绕开直接修改 prop 来实现组件双向数据绑定 。

其思路大致是这样：

在数据渲染时使用 prop 渲染数据

将 prop 绑定到子组件自身的数据上，修改数据时修改自身数据来替代 prop

watch 子组件自身数据的改变，触发通知父组件更改绑定到 prop 的数据

这样做的好处是： 父组件数据改变时，不会修改存储 prop 的子组件数据，只是以子组件数据为媒介，完成对 prop 的双向修改 。

继续拿上一节的示例来举例，只不过接下来的示例，并没有使用 .sync 来实现双向数据绑定的效果。

修改的代码如下：

父组件Parent数据

  • {{ name }}

  • {{ age }}

    • 在上面的这个示例中，我们并没有使用 .sync 修饰符，但在调用子组件的时候使用了 @update ：

    子组件中渲染到HTML模板的数据是用的 prop 数据，但 input 是使用的子组件自身定义的数据作为 v-model 。这样一来就不会直接修改 prop 。简单来说， 一切 prop 的改变从本质上来说都由父组件完成 。JaScript的代码如下：

    let parent = new Vue({

    el: '#app',

    data () {

    return {

    }},

    components: {

    'child': {

    template: '#child',

    props: ['myName', 'myAge'],

    data () {

    return {

    childMyName: this.myName,

    }},

    childMyName: function (val) {

    this.$emit('update:my-name', val)

    this.$emit('update:my-age', val)

    })最终效果如下：

    上面的示例效果，不管是修改父组件的数据还是子组件的数据，都会相互影响：

    因为子组件中 props 的 myName 和 myAge 不可写，所以在 data 中创建一个副本 childMyName 和 childMyAge 。初始值为 props 属性 myName 和 myAge 的值，同时在组件内所有需要调用 props 的地方调用 data 中的 childMyName 和 childMyAge 。

    components: {

    'child': {

    template: '#child',

    props: ['myName', 'myAge'],

    data () {

    return {

    childMyName: this.myName,

    }},

    }}接下来在子组件中通过 watch 来对 props 属性的 myName 和 myAge 进行。当 props 修改后对应 data 中的副本 childMyName 和 childMyAge 也要同步数据。

    childMyName: function (val) {

    this.$emit('update:my-name', val)

    this.$emit('update:my-age', val)

    ...接下来要做的事情就是当组件内的 props 属性发生变化时，需要向组件外（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来决定是否变更他的数据。

    接下来我们按上面的方案来改造上一节示例中的switch按钮。

    至此，实现了组件内部数据与组件外部的数据的双向绑定，组件内外数据的同步。简而言之： 组件内部自已变了告诉外部，外部决定要不要变更 。

    什么样的 proname: 'w3cplus',ps 适合做双向绑定

    事实上，在Vue中，双向绑定的 props 是不利于组件间的数据状态管理，尤其是较为复杂的业务当中，因此在实际项目中应该尽量少用双向绑定，过于复杂的数据处理，建议使用 Vuex 。但很多时候又避免不了使用双向绑定。那么什么场景之下使用 props 来做双向绑定呢？

    如果在你的项目中，同时满足下面的条件时，我们就可以考虑使用 props 来做双向绑定：

    组件需要可以由外部在运行时动态控制，而非单纯的初始化

    组件父部需要读取组件内的状态来进行处理

    虽然上面的示例展示了我们怎么在Vue 2.0中实现 props 的双向绑定，但如果项目中有更多这样的双向绑定，那么就会让你做一些重复的事情，而且代码也很冗余，事情也会变得复杂。为了改变这样的现象，可以借助Vue的 mixin 来自动化处理 props 的双向绑定的需求。不过在这节中，我们不会学习这方面的知识，后面我们在学习 mixin 时，可地再回过头来实现这样的功能。

    在Vue中除了上述介绍的组件通讯之外，还有其他一些方法，在下一节中，咱们将会继续学习这方面的知识。

    v-for索引index在html中的使用

    vue+webpack打包路径有哪些问题

    vue阻止冒泡，穿透

    vue修饰

    @touchmove.stop = ""，阻止滚动穿透

    点击tap1不加 .stop ：先弹出999 再弹出666

    watch: {加 .stop后 就只弹出999；

    后加修饰符后就会阻止影响默认

    uni-app使用Vue.js

    ...

    说明 ：uni-app基于 Vue 2.0 实现，开发者需注意Vue 1.0 -> 2.0 的使用异，详见 从 Vue 1.x 迁移 。

    uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数：

    注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMod 也会是未定义的。

    几乎全支持 Vue文档：模板语法 ，下面讲下不支持的情况。

    (1)不支持纯HTML

    uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。

    (2)不支持部分复杂的 JaScript 渲染表达式

    非H5端无法支持复杂的 JaScript 表达式。目前可以使用的有 + - % ?: ! == === > < [] .，剩下的还待完善。

    (3)不支持过滤器

    编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（comd）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。

    备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。

    data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

    注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：

    需修改为：

    支持 Vue文档：计算属性 。

    实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。

    非H5端不支持在 template 内使用 mods 中的函数。

    备注 ： 自HBuilderX 1.7.1起，在微this.$emit('update:formData', this.form)信小程序平台支持支持在 template 内使用 mods 中的函数。

    为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。

    全支持 Vue文档：条件渲染 。

    全支持vue列表渲染 Vue文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key="xx" 。

    注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。

    几乎全支持 Vue文档：处理器 。映射表如下所示：

    注意 ：

    (1)映射表中没有的原生也可以使用，例如map组件的regionchange 直接在组件上写成 @regionchange,同时这个也非常特殊，它的 nt type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么，所以你在此类的时候同时名和类型既 。

    (2)为兼容各端，需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行绑定。

    (3)修饰符

    (4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prnt="moveHandle"，moveHandle 可以用来处理 touchmove 的，也可以是一个空函数。

    (5)按键修饰符：uni-app运行在手机端，没有键盘，所以不支持按键修饰符。

    支持 Vue文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例：

    (1)H5 的select 标签用 picker 组件进行代替

    (2)表单元素 radio 用 radio-group 组件进行代替

    组件是整个 Vue.js 中最复杂的部分，支持 Vue文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和