共计 2969 个字符，预计需要花费 8 分钟才能阅读完成。
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 通过相应运算或办法解决的最终后果，很灵便。
总结
- 根本语法要本人入手写，一步步打好根底就能够了，官网文档在前言里有，能够去看。
正文完
