v-if案例解析(element-ui form-item 结合 v-if 动态生成

fire

vue简介

是一种构建用户界面的渐进式框架。与其他重量级框架不同的是,vue采用自底向上增量开发的设计。vue的核心库只关注试图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当于单文件组件和vue生态系统支持的库结合使用时,vue也完全能够为复杂的单页应用程序提供驱动

读在最前面:

使用方式(主讲安装方式一)

安装方式先讲第一种方式引入vue.js文件。

  • 声明数据
    必不可少的

    var app=new Vue({
          el:"#app",
           data:{
                  //添加数据
            }
     })
    
  • 表达方式
    文本插值 {{}}
    将数据解析成dom节点 <div v-html="rawhtml"></div>

  • 指令 指令以v作为开头,指令内部提供类js环境
    1、条件:v-if是否显示
    2、循环v-for循环
    3、v-on来绑定事件(简写使用"@"),JS里通过methods来定义事件(点击事件v-on:click)通过this来获取到数据
    4、v-bind来绑定属性(简写用“:”)
    5、v-model实现数据的双向绑定
    6、修饰符 prevent(阻止默认事件)

  • 计算属性和观察者
    1、表达式中可以放一些简单的逻辑,但复杂的逻辑应该放在计算属性里面
    例如:

      computed:{
            nameReserve:function(){
                  return this.myname.splice("").reserve().join("");
             }
       }
    

2、观察者模式 watch vue提供了一种更通用的方式来实现观察与相应vue实例上的数据变动:侦听属性

  1、此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读

细节讲述

  • 条件渲染
    v-if,v-else,key属性,当切换相同dom节点时候,vue会复用节点,如果想让节点在渲染时候也被替换的话可以加上key属性,当key值不一样的话就不会产生复用,v-for比v-if得优先级更高

  • v-show和v-if
    v-show显示,v-show通过改变css来切换,开销较小,v-if是真正的渲染节点,性能消耗大,操作频繁使用v-show,用的v-if较少

  • 事件处理
    v-on
    1、触发一些简单的函数,如:

    <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{       counter }} times.</p>
    </div>
    

    2、事件处理方法:触发不带括号,接收时候可以接收到event对象,如:

        <button v-on:click="greet">Greet</button>
    

    3、.内联处理器中的方法,直接传递参数;通过关键字$event来传递event对象;如:

    <div id="example-3">
     <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    

    4、事件修饰符:按键修饰符(stop)鼠标按键修饰符(prevent ,once)
    5、输入表单绑定
    复选框,绑定时要给上数组
    修饰符,lazy,number,trim,可以和v-model复用
    6、axios的使用,如:

    axios.post("/post",{
                      ...this.users
                  }).then(function (res) {
                      if(res.data.status==2){
                          console.log("注册成功")
                      }
                  }).catch(function (error) {
                      console.log(error);
                  });
    

问:当v-if为true时,会重新渲染相关dom节点吗?

<child v-if="true"></child>

点击查看涉案代码

点击图中【切换】字样 查看效果,如下图:

图片 1

流程分析:

1、首先我们按代码画出初始化vnode和点击切换后的vnode,进行第一次 对比,如下图

图片 2

 说明:头头比较的时候,节点没有任何变化,所以直接不动即可,如果a的相关属性有变动,则直接更新即可

 

 2、第一次循环结束后,我们a和a已经处理过了,所以下次不再进行处理,第二次对比开始,如下图

图片 3

 

本文由金沙官网线上发布于Web前端,转载请注明出处:v-if案例解析(element-ui form-item 结合 v-if 动态生成

您可能还会对下面的文章感兴趣: