v-for遵循的是vue的就地复用原则.文本与数据是绑定的,所以当文本被重新渲染的时候,列表也会被重新渲染. 就地复用只适用于不依赖子组件状态或临时DOM状态的列表渲染输出.[比如表单输入值的列表渲染输出].这种就地复用原则在一般的列表展示的场景中不会有问题.但是:如果列表元素存在于用户交互的场景[比如form表单或者重新排序等]中,就可能会报错,最好在v-for的同时设置key参数. 因为vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法.而key指向的是列表中…

页面中不添加  :key 索引的时候,会不停的提示虚线,但不影响使用 后来加了一个索引,加成了:key= "content" 从后台取出来的contents是一个list,里面有多条content记录, content对象中会有id,name,等属性 这时候,也不影响使用,但是控制台console中会不停的出现提示 [Vue warn]: Avoid using non-primitive value as key 意思是不要绑对象数组啥的啊, 用元素或者String类型啊 然后就改了…

---template部分 div el-popover(ref="message", placement="top-start", title="标题", width="100", trigger="hover",content="这是一段内容,这是一段内容,这是一段内容,这是一段内容." a(href="javascript:void(0)", v-if=&quo…

Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难. 同时,Vue.js 的接口和语法十分自由,实现同一功能有若干种方法.每个人解决问题的思路不一样,写出来的代码也就不一样,缺乏团队内的规范. 本文旨在从组件开发的不同方面列举出合理的解决方法,作为建立组件规范的一个参考. 导航 构成组件 组件间…

不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据 相关钩子加载顺序为: beforeRouteUpdate 设置 router-view 的 key 属性值为 $route.path 从/page/1…

vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 VM new Vue({ el:'选择器' 要控制的那片html代码 data:{key:value}数据 methods:{fnName:fn} 方法 }) M: 初始化数据 data 选项 number/string/boolean/array/json/undefined/null V: 数据绑定 插值表…

本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表. 首先看看quiList.vue //quiList.vue <template> <div class="qui-list"> &…

<el-select v-model="addform.province" placeholder="请选择省份" multiple>             <el-option               v-for="item in provinces"               :key="item"               :label="item.value"      …

组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合.   开发可复用性的组件应遵循以下原则:   1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来.每个 prop 应该是一个简单类型的数据.这样做有下列几点好处:    (1) 组件接口清晰.(2) props 校验方便.(3) 当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象. 扁平化的 props…

软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择. 本文介绍几种比较常见的方法和模式,希望对你有所帮助. 扩展组件是否必要 要知道,所有的组件扩展方法都会增加复杂性和额外代码,有时候还会增加性能消耗. 因此,在决定扩展组件之前,最好先看看有没有其…