一些生命周期初探,表单无法注脚难题分析

fire

vue简介

是一种营造用户界面包车型客车渐进式框架。与任何重量级框架分歧的是,vue选择自底向上增量开发的筹划。vue的大旨库只关怀试图层,它不光简单上手,还便宜与第二方库或既有档次整合。另一方面,当于单文件组件和vue生态系统支持的库结合使用时,vue也全然能够为复杂性的单页应用程序提供驱动

Vue学习笔记

踏入前端,步入玄学

读在最终面:

利用办法(主讲安装方式壹)

设置形式先讲第三种艺术引进vue.js文件。

  • 评释数据
    必备的

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

  • 指令 指令以v作为起头,指令内部提供类js环境
    一、条件:v-if是还是不是出示
    2、循环v-for循环
    三、v-on来绑定事件(简写使用”@”),JS里透过methods来定义事件(点击事件v-on:click)通过this来获得到数量
    肆、v-bind来绑定属性(简写用“:”)
    5、v-model达成数据的双向绑定
    陆、修饰符 prevent(阻止暗中认可事件)

  • 算算属性和旁观者
    壹、表达式中得以放1些简单的逻辑,但复杂的逻辑应该放在总括属性之中
    例如:

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

二、观望者格局 watch
vue提供了1种更通用的不二诀要来完成观看与相应vue实例上的数量变动:侦听属性

Vue开始化对象

var vm = new Vue({
    el:"#box",  //绑定的元素
    template:"<h1>{{money}}</h1>",  //使用的模板
    data:function () {  //绑定的数据
        return{
            money:"123"
        }
    }
})

data和methods里面包车型大巴习性都以Vue这一个实例对象的代办属性,例:vm.money = 1贰三;

而vm本来的本身性质则是vm.$el,vm.$template,vm.$data,会用$符号区分开来,正是置于的自带的天性和措施

var vm = new Vue({
//        el:"#box",  //绑定的元素
    data:function () {  //绑定的数据
        return{
            age:12
        }
    }
}).$mount("#box");

$mount是壹种手动挂载的办法
$option能够读取vue实例对象方面包车型大巴静态方法和品质,也等于自定义方法和品质
$log查看数据的三个动静

 
  一七年终至1八年终附带做了vue的一部分框架搭建,中途断断续续用了某个vue,时隔多少个月后的工作又十起vue,对于有个别原理性的文化淡忘了,正值那段时间使用中相见了壹些坑,又拨了部分代码出来温习温习。

  1、此小说衔接Vue 虚拟Dom 及
部分生命周期初探,相关全部知识点请先读书后再持续本文阅读

细节描述

  • 条件渲染
    v-if,v-else,key属性,当切换相同dom节点时候,vue会复用节点,如若想让节点在渲染时候也被替换的话能够加上key属性,当key值不1样的话就不会发出复用,v-for比v-if得事先级越来越高

  • v-show和v-if
    v-show展现,v-show通过转移css来切换,耗费较小,v-if是的确的渲染节点,质量消耗大,操作频仍利用v-show,用的v-if较少

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

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

    二、事件处理方法:触发不带括号,接收时候能够选择到event对象,如:

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

    三、.内联处理器中的方法,直接传送参数;通过主要字$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>
    

    四、事件修饰符:按键修饰符(stop)鼠标按键修饰符(prevent ,once)
    伍、输入表单绑定
    复选框,绑定时要给上数组
    修饰符,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);
                  });
    

一些生命周期初探,表单无法注脚难题分析。只顾,不要在实例属性或许回调函数中使用箭头函数,因为箭头函数会绑定父级的上中午,会招致当中的this不会指向Vue实例

      正式进入大前端,新同事称谓的玄学…

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

Vue实例对象的宣示周期

读在最前边:

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

渲染方式

文件插值

<div id="box" >
    {{money}}
</div>

单次渲染 v-once

<div id="box">
    <button @click="changeData">456</button>
    {{money}}
</div>

渲染html v-html

<div id="box">

</div>

注意点:v-html是渲染html片段的,里面数据绑定会被忽视

  1、正文依照难题,讲述差不多 Vue虚拟Dom Diff
思路、数据响应式机制相关,源码版本 
Vue.js v2.5.17-beta.0

点击查阅涉及案件代码

属性绑定 v-bind

vue中的属性绑定和ng的有点分化等,ng的能够在性质上Infiniti制添加插值语法,可是在vue中不得以,要运用v-bind绑定属性,传入的也得以是布尔值

<div id="box">
    {{money}}
    <input type="radio" v-bind:checked = "true">
</div>

简写:

    {{money}}

       二、知识点:vue virtual dom diff、 observe 、 watch、render
,各知识点暂不深远剖析

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

事件处理器

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

传扬$event能够操作dom节点
vue提供了有的内置修饰符也足以操作dom节点

  • @click.stop阻止事件冒泡
  • @click.prevent阻止事件暗许行为
  • @keydown/@keyup前面能够点键码(@keydown.13),能够点英文(@keydown.enter)

  三、阅读本文,读者应询问Vue有一定的前端基础,知道有些名词概念如:render、vnode、virtual
dom 

澳门葡京 1

表单控件

表单控件多数行使v-model来落实数量的双向绑定
八个勾选框绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
Checked names: {{ checkedNames }}

new Vue({
    el: '...',
    data: {
    checkedNames: []
    }
})

  肆、本文先引出难题及原理,然后单用三个落实给出详情解析

流程分析:

命令的壹对注意事项和专注点

  • v-model和ng-model功效1样,都以贯彻数据双向绑定的,可是有一个组别正是,ng-model绑定的对象能够不用注解,然则v-model绑定的指标自然要表明

  • v-if有时候要切换三个要素的时候,能够用template

      <template v-if="true">
          <h1>Title</h1>
          <p>Paragraph 1</p>
          <p>Paragraph 2</p>
      </template>
    

    并且template并不会被呈现出来;也足以和if-else,v-else-if协作使用,if-else,v-else-if要紧挨着v-if的因素

  • computed能不负众望的事体,methods也能完结,那么双方有哪些分别呢?
    computed会把计算结果保存在缓存其中,唯有一个钱打二十五个结的值发送变化了才会再度计算,不过methods只要重新渲染就会重新总括,两者的界别在于你是或不是期待保留到缓存在那之中并读取它.

  • vue为了提升渲染速度,平时会复用已有元素而不是从头初始渲染

      <template v-if="loginType === 'username'">
          <label>Username</label>
          <input placeholder="Enter your username">
      </template>
      <template v-else>
          <label>Email</label>
          <input placeholder="Enter your email address">
      </template>
    

    譬如说地点的代码,当切换到email的时候,input里面包车型大巴数值如故会设有,因为复用了这么些因素
    这种格局有早晚的好处和弊病,当您须求分开这三个input的关系的时候,能够在input上添加1个唯1的key,vue就会重新渲染,不会复用前1个input

  • v-show和v-if的区别
    v-show和v-if同ng-show和ng-if很类似,v-if是惰性的,只要不须求它的时候,那么些元素就不会被渲染,直到第三次索要它的时候,而v-show分歧,不管需不必要它,都会被渲染出来,之后css的display隐藏它,不过v-if切换所开销的属性相比多,v-show开销的质量比较少,所以只要成分必要不断切换的恐怕使用v-show相比较好,只要出现3遍,不用反复切换的则用v-if

  • v-for遍历数据
    (item,key) in
    array,vue里面是item在前面,key在背后,v-for的事先级会比v-if的优先级高
    v-for遍历数据能够安装3个template然后遍历,这样浏览器并不会读取那些template模板标签

      <template v-for="product in productList">
            <h3>{{product.title}}</h3>
            <ul v-for="item in product.list">
                <li>
                    <a :href="item.url">{{item.name}}</a>
                </li>
            </ul>
            <div v-if="!product.last" class="hr"></div>
      </template>
    
  • :class的使用
    :class和ng-class的施用办法大多,:class=”{‘red’:true}”
    还能和数组混搭
    :class=”[{‘red’:true},’bule’]” 那样有bule三个类,red会判断是或不是丰硕

  • 当使用js吧图片的src利用v-bind绑定到图片上的时候,要利用require,不然会拿不到图片

v-model.lazy方法正是当失去宗旨时才刷新数据的绑定,有利于品质的升级

  4、v-if案例解析(element-ui 
form-item表单不可能验证难点剖析 )(问1)

一、首先我们按代码画出开始化vnode和点击切换后的vnode,实行首次相比较,如下图

算算属性computed

固然如此插值语法也是足以解析js的代码的,然而部分扑朔迷离的估算都写在插值语法上会导致模板不明晰和逻辑复杂,稍微复杂的乘除都尽量写在测算属性个中,改变总计前的数据,计算后的数据也会实时跟着变动的

<div id="box">
    {{message}}
    {{reversedMessage}}
</div>

var vm = new Vue({
    el:"#box",  //绑定的元素
    data:function () {  //绑定的数据
        return{
            message:"<h1>123456789</h1>"
        }
    },
    computed:{
        reversedMessage:function () {
            return this.message.split('').reverse().join('');
        }
    }

});

computed:{
        reversedMessage:{
            get:function () {
                return this.message.split('').reverse().join('');
            },
            set:function () {
                this.message+=1;
            }
        }
    }

computed完整的写法有七个,2个是get获取数值,二个是set设置数值

  5、watch案例解析(element-ui el-select
无法选中难点分析)(问2)

澳门葡京 2

Vue手动监听属性别变化化

vue也有1个看似angular的$watch属性,能够监听数据的转换

vm.$watch("red",function () {
    alert("发生变化了");
});

但那种形式是1种浅监听,若是蒙受对象类型里的某部属性别变化化就会监听不到了
此时要采取vue的贰个深监听

vm.$watch("people",function () {
    alert("发生变化了");
},{deep:true});

 

 表明:头头相比的时候,节点未有别的变化,所以直接不动即可,假使a的连带属性有转移,则直接更新即可

出殡网络请求

vue并未松开http请求的东西,所以要发送http必要导入vue-resource,导入之后就能够运用$http请求了
动用get请求数据

methods:{
        get:function () {
            this.$http.get("a.txt").then(function (res) {
                res.status //是状态码,成功一般200
                res.data  //res.data才是结果
                alert("成功了");
            },function () {
                alert("失败了");
            })
        }
    }

使用get发送数据

methods:{
        get:function () {
            this.$http.get("get.php",{
                a:1,
                b:2
            }).then(function (res) {
                alert(res.data);
            },function () {
                alert("失败了");
            })
        }
    }

应用post上传数据

post:function () {
            this.$http.post("post.php",{
                a:1,
                b:2
            },{
                emulateJSON:true
            }).then(function (res) {
                alert(res.data);
            },function () {
                alert("失败了");
            })
        }

诚如在created里面实践多少的呼吁

created:function () {
    this.$http.get("static/08-Ajax-get.php").then((data) =>{
        this.data = data;
    },(err)=> {
        console.log(err);
    })
}

极端使用es陆的箭头函数,保障this是外表的this

直接甩疑问案例,Fire!

 

Vue生命周期(钩子函数)

网上找到一张相当棒的图

澳门葡京 3

问一:当v-if为true时,会另行渲染相关dom节点吧?

 2、第二遍巡回截至后,大家a和a已经处理过了,所以下次不再实行拍卖,第1回相比较起来,如下图

Vue组件

Vue的组件其实就约等于新建了1个对象,一样拥有template,data,methods等办法
变迁组件的两种艺术

var Aaa = Vue.extend({
    template:"<h1>i am h1</h1>"
});
Vue.component("aaa",Aaa);

因而Vue对象生成组件

Vue.component("my-header",{
    template:"<p>this is my header</p>"
});

转变组件然后绑定

var myHeader = {
    template:"<p>this is my header</p>"
};

new Vue({
    el:"#box",  //绑定的元素
    data:function () {  //绑定的数据
        return{
            money:"123"
        }
    },
    components:{
        "my-header": myHeader
    }
})

作用域
零件之间的功能域都是单独的,意味着子组件无法获取到父组件上面的数额

Vue.component("my-child",{
    props:['message'],
    template:"<div>{{message}}</div>"
});

props:{
    slides:{
        type:Array,
        default:[]  //如果没传入,默认为一个空数组
    },
    interval:{
        type:Number,
        default:1000  //如果没传入,默认为1000毫秒
    }
}

<my-child :message="colorArr"></my-child>

那种方法就足以从父组件上边获取数据,先注明props然后用:message来接收,props还有别的壹种情势

Vue.component("my-child",{
    props:{
        'message':String,
        'myMsg':Number
    },
    template:"<div>{{message}}</div>"
});

那种方式会限制传进来多少的格式,假如格式不对,就传不进去了

一律,父组件也是不能得到到子组件上边的数目标
率先利用子组件$emit事件吧数据传递出去

<child @emit-msg="get"></child>//触发emit-msg的传递方法,get是要父组件调用的方法的名称

在子组件中

this.$emit("emit-msg",this.msg);//第一个参数是传递方法的名称,第二个是数据

在父组件中

get:function (m) {
    this.msg = m;  //获取到的m就是从子组件上面传递过来的数据
}

注意点:如若要在父组件上边获得的主意里面传播参数,例如那样

 <v-selection :selections="buyTypes" @on-change="onParamChange('buyType',$event)"></v-selection>

若是有其它传入的参数,那么自然从子组件里面传过来的参数就会得到不到,所以要加贰个$event参数,就可以获得得到原本传过来的参数了

去github搜索awesome-vue里面可以搜到许多零件!!!!!!!!!!!!!!

难题源于(element-ui 
form-item表单不恐怕评释难点分析)

澳门葡京 4

渲染的措施

<my-header></my-header>

而是在一些标签内,例如table,ul,等标签内可能会促成这样的渲染格局失效,也有此外的法子

<table>
    <tr is="my-row"></tr>
</table>

绑模板的点子

  • 先是种直接写在template里面

  • 其次种写在script里面type=”x-template” id=名称

    <script type=”x-template” id=”aaa”>
    <h1 @click=’myAlert()’>{{msg}}</h1>
    </script>
    下一场template里面写入id名称就能够了

      template:"#aaa"
    
  • 其两种写在三个template标签里面,和第三种多少看似

      <template id="aaa">
          <h1 @click='myAlert()'>{{msg}}</h1>
      </template>
    

在绑定

多少时候,模板标签里面只怕也会有东西,为了不用让模板的内容完全覆盖标签里面包车型客车东西要利用到slot那个标签
渲染模板里面

<div id="box" >
    <aaa>
        这里这里这里
    </aaa>
</div>

何以才能保存”那里那里那里”同时又能渲染模板呢
这是aaa的模板

<template id="aaa">
    <div>
        <slot></slot>   //slot里面就是aaa标签里面原有的东西
        <h1>我是aaa的模板</h1>
        <slot></slot>   //这里可以放置多个,可以渲染多次
    </div>
</template>

当出现四个模板的时候,能够分配非凡slot显示的是哪一块

<aaa>
    <ul slot="ul-slot">
        <li>uuuuu</li>
        <li>uuuuu</li>
        <li>uuuuu</li>
        <li>uuuuu</li>
    </ul>
    <ol slot="ol-slot">
        <li>oooo</li>
        <li>oooo</li>
        <li>oooo</li>
        <li>oooo</li>
        <li>oooo</li>
    </ol>
</aaa>

<div>
    <slot name="ol-slot"></slot>
    <h1>我是aaa的模板</h1>
    <slot name="ul-slot"></slot>
</div>

动态组件

<component :is="tem"></component>

澳门葡京,用3个component标签,能够是:is只怕is,is就填入不变的字符串,:is就能够填入vue实例的变量,达到动态切换的效果

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

 

自定义过滤器

Vue.filter("todo",function (input) {
    return input<10?"0"+input:input;
});

<p>{{age | todo}}</p>

答:会!(什么??? 难道v-if
为true不应有一贯坚强到终极吧,是什么样让她那样微弱)

 表达:第壹轮甘休的时候曾经遍历达成2组节点配对

自定义指令

自定义指令扩充了html语法

Vue.directive("red",function (el) {
    el.style.background = "red";//el就是绑定的元素
});

使用方式

<p v-red></p>

涉及 知识点 vue virtual dom diff 

 

Vue-router

引进组件

import VueRouter from "vue-router"
Vue.use(VueRouter)
routes:[
          {
              path:"/",
              component:IndexPage
          },
          {
              path:"/detail",
              component:DetailPage,
              redirect:"/detail/analysis",  
              //这样一进入detail就会去到analysis页面,不会出现空白的页面
              children:[
                  {
                      path:"analysis",   //这里不写'/',写了'/'会默认是跟目录的
                      component:DetailAnalysis
                  },
                  {
                      path:"count",
                      component:DetailCount
                  },
                  {
                      path:"forecast",
                      component:DetailForecast
                  },
                  {
                      path:"publish",
                      component:DetailPublish
                  }
              ]
          }
     ]

<router-link>是用来跳转路由的一声令下

<router-link v-for="item in products" :to="item.path" tag="li" active-class="active">{{item.name}}</router-link>
//v-for遍历几个需要跳转的入口,to就是跳转到哪个路由上,tag就是这个标签会以什么html标签渲染,不写的话默认是a标签,acive-class就是选中的样式,不设定的话会默认有个router-link-active类的

获得当前路由地址this.$route.path 注意那里是绝非r的!!!!!!!!!!!!!

this.$router.push({path:”/detail”})可以使路由跳转

难点原理:

 叁、第3次相比较起来(注:那里child节点指外围父容器节点,内部节点为div:v-if),如下图

浏览器插件

Vue-devtools

前言:vue2引进了虚拟dom,即假如使用.vue的模板格局书写,会率先编写翻译为render函数,生成vnode,每回数据变动后,会在nexttick中展开新老vnode比较实行patch操作

澳门葡京 5

在vue中引入jquery插件

https://segmentfault.com/a/1190000007020623

一、比较前后 vnode对象相同颜色的节点开始展览同层级相比 ,如下图

 表达:到那里,已经见到了干吗有v-if 为
ture,但节点如故重新渲染了,其余节点类推

登录框的时候能够用computed监听输入框的规则

computed:{
        userError(){
            let errorText, status;
            if(this.usernameModel.length<6 ){
                status = false;
                errorText = "不能小于6位"
            }else{
                status = true;
                errorText = "";
            }
            if(!this.userFlag){
                errorText = "";
                this.userFlag = true;
            }
            return {
                status,
                errorText
            }
        },
        passwordError(){
            let errorText, status;
            if(this.passwordModel.length<6 ){
                status = false;
                errorText = "密码不能小于6位"
            }else{
                status = true;
                errorText = "";
            }
            if(!this.passwordFlag){  //因为没有在页面渲染,所以也不用声明
                errorText = "";
                this.passwordFlag = true;
            }
            return {
                status,
                errorText
            }
        }
    }

 澳门葡京 6

 

 

归来element-ui form-item  结合 v-if
动态生成rule规则\表单成分,表单无法证实难点也是同理

二、大家选拔深褐节点表明:0、一、二标识节点序号 , 头、尾
分别表示节点的头顶和节点的尾巴

因为form-item绑定验证事件是在mounted中展开的,规则变化后未有举行再度绑定验证事件,v-if渲染组件节点diff后被复用了,所以验证也就自然失效了

   相比较序号从0、0(分别对应老节点序号0,新节点序号0)起首,每一回巡回相比叁个节点数据(使用sameVNode方法判断,见上边代码示例,源码5858行),新老相比范围为
,老(0-2)新(0-二)

 

(一)头头,即老0->新0 若是同样,则新老开始节点 序号 +1 而且,跳出循环
,初步下贰个循环比较 新老相比较范围为 ,老(1-二)新(一-二)

备注:  

(2)尾尾,即老贰->新2 如若相同,则新老甘休节点 序号 -一 同时,跳出循环
,初始下一个循环往复比较 新老相比较范围为 ,老(0-一)新(0-一)

  1、virtual-dom-diff
会有dom节点复用难点,针对有事态注重关系的尽心加key作为有别于,那样能防止不相干节点因为未有key而出现非常

(三)头尾,即老0->新二 就算壹致,则老起第1节点 序号
+一,新得了节点序号-一  同时,跳出循环
,初步下2个循环往复比较 新老相比范围为 ,老(一-二)新(0-一)

  二、在设有大气标签的情状下,尽量不要激化dom层级,块级切换v-if能够用template包裹

(四)尾头,即老二->新0 假使相同,则老截至节点 序号 -一,新初叶节点序号+壹  同时,跳出循环
,开头下二个巡回相比较 新老相比较范围为 ,老(0-一)新(1-二)

 

(5)用新节点去未遍历过的的老节点中寻觅

 by:海豚湾-丰

(6)老节点全体遍历完或新节点全体遍历完,则脱离大循环(对未遍历到的老节点执行删除操作,对未遍历到的新节点执行新增操作)

   

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}  

 

大概如图:

澳门葡京 7

 问二:子组件中名满天下有watch value,为何this.$emit(‘input’,
88八);未有触发watch回调,反而在父组件data数据变动后触发回调?

难题源于(element-ui el-select
不可能选中难题分析)

    <child v-model="b"></child> // b在父组件中没有初始化,即没有执行父组件的observe
    var child = Vue.extend({
      template: '<p>数据响应及render相关-案例说明</p>',
      props: {
        value: {
          required: true
        }
      },
      mounted() {
        this.$emit('input', 888);
      },
      watch: {
        value(val, oldVal) {
          console.log(val, oldVal, 'child')
        }
      }
    });

 涉及 知识点 observe、render、watch**

标题原理:

一、vue实例在转变时,会经历相比较遥远的初阶化进程如:起始化事件、渲染器、注入器、数据代理\绑架等等

二、v-model指令为被默许构造 :value=”b” @input=”b = xxx”
(此处b为地点代码中v-model=”b”),执行this.$emit(‘input’, 888),会更新b的值

3、每一回data数据变化的时候,会采集watcher进入二个行列,队列中募集了全数此时刻周期中有连带变更形成queue沃特cher,在下四个时日周期中展开数据响应更新 flushSchedulerQueue,并举行render 、patch

四、在render中会举办新老vnode
patch,在更新进度中会执行node的prepatch(源码593八行)操作,个中会执行updateChildComponent
-> validateProp 从而革新了
value的值,从而进入了watch回调

大体如图:

澳门葡京 8

    

 by:海豚湾-丰

   

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website