在 Vue.js 中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。
我们用v-for指令根据一组数组的选项列表进行渲染，v-for指令需要以item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名 基本用法
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
当函数执行到this.agents.splice()时，我设置了断点。发现传参index是0，但是页面上的列表项对应的第一行数据没有被删除，
这段代码在运行之后会在控制台抛出错误,意思就是获取不到div元素，这里就涉及vue一个很重要的概念：异步更新队列
摘要总结：本篇文章主要介绍了如何使用Vue.js实现列表渲染和条件渲染，通过一个综合案例来演示了如何使用Vue.js实现动态表格的显示。
3.1. 条件渲染 有时候我们要根据数据的情况，决定标签是否进行显示或者有其他动作。最常见的就是，表格渲染的时候，如果表格没有数据，就显示无数据。如果有数据就显示表格数据。 Vue帮我们提供了一个v-
var app=new Vue({el:"#app",data:{msg:"hello vue!"}})
在「vue」框架中，如果需要遍历渲染模板数据，那么就需要使用v-for命令，其中还有随之而来的「key」问题，下面来看看如何基本使用、以及问题解决！！
v-if,根据true或是false,来决定是否插入到页面当中，dom节点，不在页面中
除了使用for in，还可以使用for of。以of代替in，在数组遍历与对象遍历中是通用的。
Vue.js，这个JavaScript框架在开发者圈子里可谓是大名鼎鼎，以其简洁和灵活著称，让开发者们能够高效地构建出既有趣又动态的网页应用。不过，就像任何技术一样，它也有自己的学习曲线和可能的陷阱。
Vue中的循环关键字并没有Java的那么多，只有v-for，但用法上有多种。接下来我们来逐一介绍。
// 数组解构赋值 const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr
一、条件渲染 1.1、v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： {{#if ok}} Yes {{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能： Yes 也可以用 v-else 添加一个 “else” 块： Yes No 1.1.1、template v-if 因为 v
不要在实例属性或者回调函数中（例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文，所以 this 不会按照预期指向 Vue 实例，然后 this.myMethod 将是未定义。
今天开始系统学习vue前端框架. 我是有前端基础的, 刚工作那会, 哪里分那么清楚啊, 前后端我都得做, 所以, css, js, jquery, bootstrap都会点, 还系统学过ext, 哈哈,是不是都不知道是啥, 没事, 都过时了. 现在开始, 学习最流行的Vue, 后端不会页面, 说不过去呀.....
1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。
MVVM如果没听说过，但是我们知道MVC编程模式！ MVC：M是指业务模型（Model），V是指用户界面（View），C则是控制器（Controller）。
https://github.com/vuejs/vue-devtools#vue-devtools
您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...
一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。 eg： 例如，某个key 只能传递number类型， 你传递过来的是 string 类型， 这不就尴尬了。 // 正确做法 props: { status: { type: String, // 类型 required: true // 必填 } }
看这个循环，大家如果熟悉python的估计都能猜出怎么用的大概。那么它是循环什么的？
可以看到展示的是下面定义的数据,IDEA内部展示,不需要切换到浏览器窗口,方便修改代码实时查看效果,非常好用
这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。
最近公司活多，好长时间没有精下心来写文章了。公司刚分配了一个活，这个活是外包过来的，项目整体结构非常差，理解起来费劲。面对这种项目只能硬着头皮上了。
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
在看demo的时候看到在vue-router写着keep-alive，keep-alive的含义： 如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查，否则通不过校验。
v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：
列表渲染，其实给人的感觉就是 JavaScript 中的 for 循环，只不过将其提取到 HTML 模板层面了，将其指令化，本质还是 for 循环。
Vue.set()方法有三个参数，分别是数组，索引，新内容，用这个办法可以代替操作，以实时更新视图
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
animated 类可以加在被包裹的标签或transition类中 ，加在transition类中时需要加在每一个class中
MVX模式简介： MVX框架模式：MVC+MVP+MVVM MVC: Model模型+View视图+Controller控制器
答案： 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，造成性能方面的浪费。所以永远不要把 v-if 和 v-for 同时用在同一个元素上。 解析： 一般我们在两种常见的情况下会倾向于这样做： * 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。 * 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：
前言：这两天把vuejs官方文档都看了一遍（路由的文档还没看），现在回过头来再结合英文文档重新看一遍 ，为的是学下英文，然后总结性的写一下。尽管vuejs的官方文档写得详细又好，但是总觉得吧，知识这东西还是得自己跟着文档把代码手敲一遍，把要点写写，这样才能把别人的知识变成自己的。感觉自己要学的东西还有很多，长路漫漫，上下求索吧！
我们在遍历基础元素()括号里可以指定两个数组,前面的是数据基本元素,后面是的索引值
（1）v-for语法 https://cn.vuejs.org/v2/guide/list.html 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
用Vue开发一个网页并不难，但是也经常会遇到一些问题，其实大部分的问题都在文档中有所提及，再不然我们通过谷歌也能成功搜索到问题的答案，为了帮助小伙伴们提前踩坑，在遇到问题的时候，心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧，结合查阅资料整理成的一篇文章，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。
首先，你可以在这里下载本文使用到的vue.js文件，使用的是v2.6.10开发版本。
在每个组件或HTML标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。这些钩子有：
参考Vuejs官网，里面关于v-for指令已经说得很清楚了。 v-for指令可以绑定数组的数据来渲染一个项目列表：
基本上就是将数据以字符串的方式拼接到HTML标 签中，前端代码风格大体上如下所示。
v-if 指令用于条件性地渲染一块内容。如下所示，当且仅当show为true时，p标签才会被创建并渲染：
指令 (Directives) 是带有 v- 前缀的特殊 特性 相当于自定义html属性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM；参考 手册 、 API
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
