• 一些vue的知识点


    1、v-model指令:在input及textarea元素上进行双向绑定,v-model会忽略所有表单元素的value,checked,selected特性的初始值而总是将vue实例的数据作为原数据。

    我认为就是只能显示vue实例中data中的数据。

    2、v-bind指令:将元素节点的属性和vue实例属性保持一致。

    动态的绑定属性,或者组件prop到表达式

    2.1、class于style绑定:可以传给v-bind:class一个对象,以动态的切换class,可以在对象中传入更多属性来动态切换多个class,而且v-bind:class可以和class属性共存

    例:<div class="static"  v-bind:class="{active:isActive,'text-danger':has}"></div>

    data:{

      isActive:true,

      has:false

    }

    3、v-if指令:显示和隐藏一个元素

    v-if的隐藏和显示,是销毁和重建。如果要是切换多个元素,使用<template>元素包裹,在<template>元素上使用v-if

    3.1、v-else指令:用来表示v-if的“else”块,v-else必须紧跟着在带v-if或者v-else-if的元素后面

    3.2、v-else-if指令:充当v-if的“else-if”块

    4、v-for指令:绑定数组的数据来渲染一个项目列表,在v-for中,我们有父作用域属性的完全访问权限,v-for还可以支持一个可选的第二个参数当前项的索引

    第二个参数为健名:v-for=“(value,key)in object”

    第三个参数为索引

    5、v-on指令:绑定事件,当事件触发时执行。。。

    类似于按钮,摁下按钮,触发。。。

    6、计算属性:额,文档说的是对于任何复杂逻辑,都应当使用计算属性

    我感觉是就是把复杂的代码封装了起来?

    7、v-show指令:显示和隐藏一个元素

    v-if和v-show的区别:v-show的元素会始终被渲染并保留在DOM中,v-show只是简单的切换元素的CSS属性display

    v-if是真正的渲染,它会对监听器和子组件适当的销毁和重建,如果频繁的切换使用v-show

    8、单向数据流:所有的prop都是父子prop之间形成一个单向向下行绑定;父级prop的更新会向下流动到子组件中,但反过来不行;

    每次父组件发生更新时,子组件中所有的prop都会刷新到最新值

    9、两种试图改变一个prop的情形:

    9.1:这个prop用来传递一个初始值,这个子组件接下来希望作为一个本地的prop数据来使用,在这种情况下,最好定义一个本地的data属性并将这个prop用作初始值

    props:[‘ initialCounter ’],

        data function(){

          return {

          counter:this.initialCounter

          }

        }

    9.2:这个prop以一种原始的值传入且需要进行转换,在这种情况下,做好使用这个prop的值来定义一个计算属性;

    props:[‘ size ’],

    computed:{

      normalizedSize:function{

        return this.size.trim().toLowerCase()

      }

    }

    10、动态参数:用方括号括起来的JavaScript表达式作为一个指令的参数:<a v-bind:[attributeName]="url">...</a>

    这里的attributeName会被作为一个JavaScript表达式进行动态求值,求值的值将会作为最终的参数来使用,这个绑定将介于v-bind值。

    11、动态组件:在一个多标签的界面中使用is特性来切换不同的组件,每次切换之后都不是你之前选择的内容,是因为每次切换的时候,Vue都创建了一个新的实例,可以使用

    <keep-alive>元素将动态组件包裹起来。

    12、路由:

    路由中有三个基本概念:route、routes、router

    1、route,它是一条路由,由这个英文单词也可以看出来,它是单数。Home按钮=>Home内容,这是一条路由,about按钮=>about内容,这是另一条路由

    2、routes,是一组路由,把上面的每一条路由组合起来,形成一个数组,[{home按钮=>home内容},{about按钮=>about内容}]

    3、router是一个机制,相当于一个管理者, 他来管理路由,它到routers中去查找,去找到对应的home内容,所以页面中就显示了home的内容。

    4、客户端的路由,实际上就是dome元素的显示和隐藏,当页面中显示home内容的时候,about中的内容全部隐藏。

    Vue-router路由也是基于上面的内容来实现的。

    1、vue-router中,两个标签<router-link>和<router-view>来对应点击和显示部分,<router-link>就是定义页面中点击的部分

    <router-view>定义显示部分,就是点击后,区配的内容显示在什么地方,所以<router-link>还有一个属性to,定义点击之后,要到哪里去。

    2、js中配置路由

    首先要定义route,一条路由实现,它是一个对象,由两个部分组成:path和component,path指路径,component指的是组件或者routes,最后创建router对路由进行管理,它是由构造函数,new vueRouter创建,接受routes参数。

    配置完成后,把router实例注入到vue根实例中,就可以使用路由了。

    执行过程:当用户点击router-link标签时,会去寻找它的to属性,它的to属性和JS中配置的路径{path:'/home',component:Home}从而找到了匹配的组件,最后把组件渲染

    到<router-view>标签所在的地方,所有的这些实现基于Hash实现的。

  • 相关阅读:
    Spring Cloud 接口契约测试
    看我玩弄千万日志于股掌
    从哲学层面浅谈计算机学习方法论
    一切互联网优势都是效率优势,一切竞争最终都是效率之争
    Arduino--蜂鸣器
    Arduino--光感应模块--模拟输入
    Arduino---按钮
    Arduino--PWM引脚
    Arduino专用绘图软件Fritzing
    点亮LED灯
  • 原文地址:https://www.cnblogs.com/qrf1997/p/11009155.html
Copyright © 2020-2023  润新知