vue.js_0

不知道1.v-if的关键使用场景：我们登录的时候，用户可以使用用户账号和用户邮箱登录，账号和参数的参数后台收到的email地址都是一样的参数。html部分用户名Email切换

js部分chage(){letself=this;self.loginType=!self.loginType;},submit(){让self=this;警报（self.$refs.input.value）console.log（self.$refs.input.value）；}这样简单的业务就实现了。但是这样会存在一些需要优化的问题（当我们切换输入框的时候，之前输入的内容还是会被保存）。出现这个问题的原因：Vue会尽可能高效地渲染元素，通常会重用已有的元素，而不是从头开始渲染。有时这并不总能满足实际需求，因此Vue为您提供了一种方式来表示“这两个元素是完全独立的，不要重用它们”。只需添加一个具有唯一值的键属性：Username电子邮件切换

提交

2.解析DOM模板是一些HTML元素，比如

,
,和对哪些元素可以出现在其中有严格的限制。而一些元素，例如
1. 、
和，只能出现在某些其他元素中。当我们使用这些受约束的元素时，这可能会导致一些问题。例如：这个自定义组件会作为无效内容被提升到外部导致最终的渲染结果错误。幸运的是，这个特殊的is属性给了我们一个解决方法：:string(例如:template:'...')单文件组件(.vue)3.组件的v-model,.nativeWith$listeners,.sync*使用v-model自定义事件的组件也可用于创建支持v-model的自定义输入组件。请记住：等同于：在组件上使用时，v-model看起来像这样：必须：将它的value属性绑定到一个名为value的prop当它的input事件被触发时，通过一个自定义的input事件抛出新的值写完代码后，它看起来像这样：Vue.component('custom-input',{props:['value'],template:``})现在v-model应该在此组件上完美运行：*自定义组件的v-model组件上的v-model默认使用prop命名为value和一个事件命名为input，但是输入控件类型如单选按钮、复选框等可以使用valueattri但出于不同的目的。模型选项可以用来避免这样的冲突：Vue.component('base-checkbox',{model:{prop:'checked',event:'change'},props:{checked:Boolean},template:``})现在在这个组件上使用v-modelWhen:这里的lovingVue的值会被传递给名为checked的prop。同时，当触发一个新值的更改事件时，lovingVue属性将被更新。*请注意，您仍然需要在组件的props选项中声明checkedprop。*将原生事件绑定到组件可能很多时候你想直接在组件的根元素上监听原生事件。这时候，你可以使用v-on的.native修饰符：当尝试收听像这样非常具体的元素时。例如，上面的组件可能会重构如下，所以根元素实际上是一个元素：{{label}}此时，父级的.native监听器将静默失败。它不会产生任何错误，但不会像您预期的那样调用onFocus处理程序。为了解决这个问题，Vue提供了一个$listeners属性，它是一个包含所有作用于这个组件的监听器的对象。例如：{focus:function(event){/*...*/}input:function(value){/*...*/},}有了这个$listeners属性，就可以匹配v-on="$listeners"将所有事件侦听器定向到此组件的特定子元素。对于像这样你也想和v-model一起工作的组件，为这些监听器创建一个计算属性通常很有用，比如下面的inputListeners：Vue.component('base-input',{inheritAttrs:false,props:['label','value'],computed:{inputListeners:function(){varvm=this//`Object.assign`将所有对象合并为一个新对象returnObject.assign({},//我们添加所有来自父级的监听器this.$listeners,//然后我们添加自定义监听器，//或者覆盖一些监听器的行为{//这里我们确保组件与`v-model`一起工作input:function(event){vm.$emit('input',event.target.value)}})}},模板：`{{label}}`})现在组件是一个完全透明的包装器，这意味着它可以完全像一个普通的元素一样使用：都一样属性和侦听器将起作用，无需使用.nativeli调速器。*.sync修饰符在某些情况下，我们可能需要“双向绑定”一个prop。不幸的是，真正的双向绑定会带来维护问题，因为子组件可以更改父组件，而父组件或子组件的任何一侧都没有明显的更改源。这就是为什么我们建议改为使用模式update:myPropName触发事件。例如，在一个包含title道具的假设组件中，我们可以表达我们的意图为其分配一个新值：this.$emit('update:title',newTitle)并且父组件可以监听该事件并更新根据需要的本地数据属性。例如：为了方便起见，我们提供了一个缩写，即.sync修饰符：*注意带有.sync修饰符的v-bind不能与表达式一起使用（例如v-bind:title.sync="doc.title+'!'"无效）。相反，您只能提供要绑定的属性的名称，类似于v-model。当我们使用一个对象同时设置多个props时，我们还可以结合v-bind使用这个.sync修饰符：这样会将doc对象中的每个属性（比如title）作为一个独立的prop传递，然后添加v-on监听器进行更新。*在文字对象上使用v-bind.sync，例如v-bind.sync="{title:doc.title}"，将无法正常工作，因为在解析像这样的复杂表达式时，有很多边缘情况需要考虑。