我不知道的Vue.js

1. v-if之key

使用场景：在我们登录的时候，用户可以使用用户账号以及用户电子邮箱进行登录，后台接收账号及邮箱的参数都是同一个参数。

html部分

 
 

 切换


   提交
 

js部分

 chage(){
      let self = this;
      self.loginType = !self.loginType;
 },
 submit(){
      let self = this;
      alert(self.$refs.input.value)
      console.log(self.$refs.input.value);
 }

这样，简单的业务就实现了。可是这样就会出现一些待优化的问题（当我们切换输入框时，之前输入的内容还保存着）
产生这个问题的原因：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
有时候这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

 
 

 切换

  

      提交
  

2. 解析 DOM 模板之is

有些 HTML 元素，诸如

、
、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)