乐趣区

关于vue.js:Vuejs教程Vue基本指令

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 通过相应运算或办法解决的最终后果,很灵便。

总结

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