Vue.js教程-Vue根本指令

  • 前言
  • Vue指令
    • 插值表达式
    • v-bind
    • v-model
    • v-on
    • v-if、v-else、v-else-if
    • v-show和v-if的区别
    • v-for
    • v-slot
      • 具名插槽
      • 作用域插槽
      • 动静插槽名
  • 总结

前言

  • 本文仅介绍根本罕用指令(不包含自定义指令和相应的修饰符，这两个当前再写)。
  • 再附上官网API文档，大家也能够去看官网解释，更全面更具体。VueAPI
  • 本文所有指令写在views文件夹下的Home.vue文件中，本人学习的时候间接在App.vue中引入一下该文件就行了，不必配置路由。

Vue指令

插值表达式

  • 在data中定义字符串或对象，在html语句中应用{{}}双花括号形式获取data里的字符串或者对象。
  • 字符串：
  • 对象：

  • 在这里分为两种状况：

    • 第一种是间接取出对象。
    • 第二种是取出对象的相应字段，也就是字符串或者数字呗。
  • 间接取出对象：
  • 取出对应字段：
  • 在插值表达式中也反对三目运算符、数字和数组的一些根本办法，能够本人去尝试。

v-bind

  • v-bind用于绑定数据和元素属性，父传子数据时也能用到。
  • v-bind的简写是:
  • v-bind：接的是本人起的属性名(能够轻易起)，而后接等于号=，双引号外面写在data里的货色，也能够间接在外面写个对象，例如设置Css啥的。
  • 最次要的还是应用父传子，在子组件中定义props，下一章再说这个，也是比较简单。
  • 两张图片惟一的不同就是第二张用了v-bind的简写，很不便。

v-model

  • 对数据进行双向绑定的指令，也是常常用。
  • 具体成果亲自试一试。

v-on

  • 它就是一个调用办法的指令，简写为@
  • 怎么应用在v-if里会提到。

v-if、v-else、v-else-if

  • v-if和v-else一听就能搭配应用，也没有什么好说的，和Java外面一样，if里如果为true，就显示if里的货色，否则显示else里的货色。
  • 我这里应用官网样例，就是切换登录形式，点击按钮切换登录形式，并不是真的登录。
`<!-- v-if登录 --><template>  <div>      <div v-if="logintype === 'username'">        <label>Username</label>        <input placeholder="Enter your username" key="username-input">      </div>      <div v-else>        <label>Email</label>        <input placeholder="Enter your email address" key="email-input">      </div>      <button @click="changelogintype">切换登录形式</button>  </div></template><script>export default {  data () {    return {      logintype : 'username'    }  },  methods:{    changelogintype(){      if(this.logintype === "username"){        this.logintype = "email"      }      else{        this.logintype = "username"      }    }  }}</script><style  scoped></style>` *   1*   2*   3*   4*   5*   6*   7*   8*   9*   10*   11*   12*   13*   14*   15*   16*   17*   18*   19*   20*   21*   22*   23*   24*   25*   26*   27*   28*   29*   30*   31*   32*   33*   34*   35*   36*   37
  • 解释一下代码，v-if中应用了双引号，所以在双引号外面要应用单引号。
  • key的作用是让这个区域是惟一的，因为如果不加key的话，无奈做到切换时刷新该区域，就相当于是这个区域的身份证，给他个名字。
  • @click是单击事件，@是v-on的简写。
  • @click外面的办法名字其实是简写，残缺写法@click="changelogintype()"，当咱们不须要为这个办法传递参数时，咱们能够不传参，有些特定的办法中传入的是event，依据具体情况应用。
  • 在methods里要想获取同一组件内data里的货色，那么要应用this关键字。

v-show和v-if的区别

  • v-show和v-if的作用是一样的，顾名思义，是让某个区域进行显示或隐没。

  • 在原理上的区别：

    • 在初始化加载时，v-show是全副加载进去了，v-if是依据条件进行加载，也就是v-if会管制DOM中这个结点是否存在，而v-show只是不让这个区域显示了，但还是存在。
    • 在初始化时v-show耗费的资源更多。但在后续的状况下，如果只须要切换组件的暗藏状态，那么v-show耗费的资源会很小。如果条件很少产生扭转，那么v-if会比拟好。
  • v-show其实用的会更多，集体认为，跟做的我的项目有关系吧。。

v-for

  • 遍历数组呗，跟Java外面的性能一样，但不同点在于，v-for能够设置一个key提供排序提醒。
 `<!-- v-for --><template>  <div>      <!--数字数组-->      <p v-for="item in list">{{item}}</p>      <br/>      <!--对象数组-->      <p v-for="item in listObj" :key="item.id">{{item.id}}：{{item.name}}      <br/>       <!--对象-->      <p v-for="(val,key) in obj">{{key}}：{{val}}</p>  </div></template><script>export default {  data () {    return {      list:[1,2,3,4,5,6],      listObj:[        {id:1, name:'zs1'},        {id:2, name:'zs2'},        {id:3, name:'zs3'},        {id:4, name:'zs4'},        {id:5, name:'zs5'},        {id:6, name:'zs6'},      ],      obj:{        id : 1,        name : "CoderHqf",        age : 20      }    }  }}</script><style  scoped></style>` *   1*   2*   3*   4*   5*   6*   7*   8*   9*   10*   11*   12*   13*   14*   15*   16*   17*   18*   19*   20*   21*   22*   23*   24*   25*   26*   27*   28*   29*   30*   31*   32*   33*   34*   35*   36*   37*   38*   39
  • 在第三个遍历对象里的字段时，key代表键，val代表值。
  • 在和v-if一起应用时，v-for的优先级更高，去看列表渲染教程。

v-slot

  • 简写为#，因为v-slot是新款，在应用时只能用于template里。
  • 也可用于父子传参。
  • 在应用时，父组件中的插槽能够被子组件中的插槽替换，相当于是把子组件放到父组件中的插槽。

具名插槽

  • 就是有名字的插槽。
  • 父组件：
  • 两个子组件：

作用域插槽

  • 父组件可能获取到子组件中的数据。
  • 父组件：
  • 子组件：

动静插槽名

  • 官网上的代码：
`<template v-slot:[dynamicSlotName]>    ...  </template>` *   1*   2*   3
  • 其实[]里填写的货色就是动静插槽名，外面能够写拼接的字符串、计算属性和办法，变动挺多的，但只会渲染出dynamicSlotName通过相应运算或办法解决的最终后果，很灵便。

总结

  • 根本语法要本人入手写，一步步打好根底就能够了，官网文档在前言里有，能够去看。