【4858美高梅】if案例分析,vue学习笔记

By admin in 4858美高梅 on 2019年4月5日

fire

vue简介

是一种创设用户界面的渐进式框架。与任何重量级框架分化的是,vue接纳自底向上增量开发的规划。vue的大旨库只关切试图层,它不仅不难上手,还便宜与第一方库或既有品种组成。另1方面,当于单文件组件和vue生态系统支持的库结合使用时,vue也统统能够为复杂性的单页应用程序提供驱动

Vue学习笔记

踏入前端,步入玄学

读在最前面:

利用情势(主讲安装格局1)

设置方式先讲第1种办法引进vue.js文件。

  • 声称数据
    要求的

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

  • 指令 指令以v作为开始,指令内部提供类js环境
    1、条件:v-if是或不是出示
    2、循环v-for循环
    三、v-on来绑定事件(简写使用”@”),JS里透过methods来定义事件(点击事件v-on:click)通过this来博取到数码
    四、v-bind来绑定属性(简写用“:”)
    五、v-model达成数量的双向绑定
    6、修饰符 prevent(阻止暗许事件)

  • 测算属性和观察者
    1、表明式中能够放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");

【4858美高梅】if案例分析,vue学习笔记。$mount是一种手动挂载的方法
$option能够读取vue实例对象方面包车型地铁静态方法和质量,也便是自定义方法和质量
$log查看数据的3个场所

 
  一七年初至1捌年底附带做了vue的局地框架搭建,中途断断续续用了有个别vue,时隔多少个月后的办事又10起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>
    

    二、事件处理方法:触发不带括号,接收时候能够选择到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.壹三),能够点英文(@keydown.enter)

  叁、阅读本文,读者应询问Vue有早晚的前端基础,知道有个别名词概念如:render、vnode、virtual
dom 

4858美高梅 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: []
    }
})

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

流程分析:

一声令下的1些注意事项和专注点

  • 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上添加五个唯壹的key,vue就会再一次渲染,不会复用前贰个input

  • v-show和v-if的区别
    v-show和v-if同ng-show和ng-if很接近,v-if是惰性的,只要不须要它的时候,那么些因素就不会被渲染,直到第3回索要它的时候,而v-show不一致,不管需不必要它,都会被渲染出来,之后css的display隐藏它,然则v-if切换所消耗的属性比较多,v-show成本的质量相比较少,所以1旦成分必要不停切换的依旧选择v-show比较好,只要出现1遍,不用反复切换的则用v-if

  • v-for遍历数据
    (item,key) in
    array,vue里面是item在头里,key在末端,v-for的优先级会比v-if的优先级高
    v-for遍历数据足以设置一个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的代码的,但是1些复杂的测算都写在插值语法上会导致模板不明晰和逻辑复杂,稍微复杂的盘算都尽量写在总结属性个中,改变总结前的数码,计算后的数码也会实时跟着变动的

<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完整的写法有四个,三个是get获取数值,一个是set设置数值

  5、watch案例解析(element-ui el-select
不可能选中难题浅析)(问二)

4858美高梅 2

Vue手动监听属性别变化化

vue也有一个近似angular的$watch属性,能够监听数据的更换

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

但那种格局是一种浅监听,假设赶上对象类型里的有个别属性别变化化就会监听不到了
此时要运用vue的2个深监听

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生命周期(钩子函数)

网上找到一张非常棒的图

4858美高梅 3

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

 二、第叁回巡回截止后,大家a和a已经处理过了,所以下次不再举行处理,第二次相比较起来,如下图

Vue组件

Vue的组件其实就卓绝新建了一个目的,一样具有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还有其它1种艺术

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表单不恐怕证实难题分析)

4858美高梅 4

渲染的办法

<my-header></my-header>

但是在部分标签内,例如table,ul,等标签内或许会造成那样的渲染格局失效,也有别的的措施

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

绑模板的不2秘诀

  • 首先种直接写在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>

用二个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不应有平素坚强到终极吧,是怎么着让她那样微弱)

 表明:第1轮截止的时候曾经遍历完结二组节点配对

自定义指令

自定义指令扩张了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”})能够使路由跳转

难题原理:

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

浏览器插件

Vue-devtools

序言:vue贰引进了虚拟dom,即只要使用.vue的沙盘方式书写,会首先编写翻译为render函数,生成vnode,每趟数据变动后,会在nexttick中举行新老vnode比较进行patch操作

4858美高梅 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
            }
        }
    }

 4858美高梅 6

 

 

再次回到element-ui form-item  结合 v-if
动态生成rule规则\表单成分,表单不或许验证难题也是同理

二、大家采纳北京蓝节点表明:0、壹、二标识节点序号 , 头、尾
分别代表节点的尾部和节点的尾巴

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

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

 

(一)头头,即老0->新0 假设壹致,则新老早先节点 序号 +一 并且,跳出循环
,开首下一个循环往复比较 新老相比范围为 ,老(一-二)新(1-贰)

备注:  

(二)尾尾,即老二->新贰 假诺同样,则新老停止节点 序号 -一 同时,跳出循环
,伊始下三个巡回相比较 新老相比范围为 ,老(0-1)新(0-一)

  1、virtual-dom-diff
会有dom节点复用难题,针对有情状依赖关系的尽心加key作为有别于,那样能制止不相干节点因为尚未key而出现至极

(叁)头尾,即老0->新2 假设相同,则老开始节点 序号
+一,新告竣节点序号-一  同时,跳出循环
,起先下八个巡回比较 新老相比范围为 ,老(一-2)新(0-1)

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

(四)尾头,即老二->新0 如若同样,则老结束节点 序号 -1,新起来节点序号+1  同时,跳出循环
,开头下八个循环相比较 新老相比较范围为 ,老(0-一)新(一-二)

 

(五)用新节点去未遍历过的的老节点中找寻

 by:海豚湾-丰

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

   

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)
      )
    )
  )
}  

 

差不多如图:

4858美高梅 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’, 88八),会更新b的值

三、每趟data数据变化的时候,会采集watcher进入2个行列,队列中收集了全体此时刻周期中有连带变更形成queue沃特cher,在下八个时日周期中展开数量响应更新 flushSchedulerQueue,并进行render 、patch

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

大体如图:

4858美高梅 8

    

 by:海豚湾-丰

   

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有