vue 父传子_Vue.js教程Vue基本指令
前言
本文僅介紹基本常用指令(不包括自定義指令和相應的修飾符，這兩個以后再寫)。
再附上官方API文檔，大家也可以去看官方解釋，更全面更具體。VueAPI
本文所有指令寫在views文件夾下的Home.vue文件中，自己學習的時候直接在App.vue中引入一下該文件就行了，不用配置路由。
Vue指令
插值表達式
在data中定義字符串或?qū)ο?#xff0c;在html語句中使用?{{}}雙花括號方式獲取data里的字符串或者對象。
字符串：
對象：
在這里分為兩種情況：
第一種是直接取出對象。
第二種是取出對象的相應字段，也就是字符串或者數(shù)字唄。
直接取出對象：
?
取出對應字段：
在插值表達式中也支持三目運算符、數(shù)字和數(shù)組的一些基本方法，可以自己去嘗試。
v-bind
v-bind用于綁定數(shù)據(jù)和元素屬性，父傳子數(shù)據(jù)時也能用到。
v-bind的簡寫是?:
v-bind：接的是自己起的屬性名(可以隨便起)，然后接等于號=，雙引號里面寫在data里的東西，也可以直接在里面寫個對象，例如設置Css啥的。
最主要的還是使用父傳子，在子組件中定義props，下一章再說這個，也是比較簡單。
兩張圖片唯一的不同就是第二張用了v-bind的簡寫，很方便。
??
v-model
對數(shù)據(jù)進行雙向綁定的指令，也是經(jīng)常用。
具體效果親自試一試。
?
v-on
它就是一個調(diào)用方法的指令，簡寫為?@
怎么使用在v-if里會提到。
v-if、v-else、v-else-if
v-if和v-else一聽就能搭配使用，也沒有什么好說的，和Java里面一樣，if里如果為true，就顯示if里的東西，否則顯示else里的東西。
我這里使用官方樣例，就是切換登錄方式，點擊按鈕切換登錄方式，并不是真的登錄。?
<template>
<div>
<div v-if="logintype === 'username'">
<label>Usernamelabel>
<input placeholder="Enter your username" key="username-input">
div>
<div v-else>
<label>Emaillabel>
<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>
解釋一下代碼，v-if中使用了雙引號，所以在雙引號里面要使用單引號。
key的作用是讓這個區(qū)域是唯一的，因為如果不加key的話，無法做到切換時刷新該區(qū)域，就相當于是這個區(qū)域的身份證，給他個名字。
@click是單擊事件，@是v-on的簡寫。
@click里面的方法名字其實是簡寫，完整寫法?@click="changelogintype()"，當我們不需要為這個方法傳遞參數(shù)時，我們可以不傳參，有些特定的方法中傳入的是event，根據(jù)具體情況使用。
在methods里要想獲取同一組件內(nèi)data里的東西，那么要使用?this關(guān)鍵字。
v-show和v-if的區(qū)別
v-show和v-if的作用是一樣的，顧名思義，是讓某個區(qū)域進行顯示或消失。
在原理上的區(qū)別：
在初始化加載時，v-show是全部加載進去了，v-if是根據(jù)條件進行加載，也就是v-if會控制DOM中這個結(jié)點是否存在，而v-show只是不讓這個區(qū)域顯示了，但還是存在。
在初始化時v-show消耗的資源更多。但在后續(xù)的情況下，如果只需要切換組件的隱藏狀態(tài)，那么v-show消耗的資源會很小。如果條件很少發(fā)生改變，那么v-if會比較好。
v-show其實用的會更多，個人認為，跟做的項目有關(guān)系吧。。
v-for
遍歷數(shù)組唄，跟Java里面的功能一樣，但不同點在于，v-for可以設置一個key提供排序提示。
<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>
在第三個遍歷對象里的字段時，key代表鍵，val代表值。
在和v-if一起使用時，v-for的優(yōu)先級更高，去看列表渲染教程。
v-slot
簡寫為?#，因為v-slot是新款，在使用時只能用于template里。
也可用于父子傳參。
在使用時，父組件中的插槽可以被子組件中的插槽替換，相當于是把子組件放到父組件中的插槽。
具名插槽
就是有名字的插槽。
父組件：
兩個子組件：
作用域插槽
父組件能夠獲取到子組件中的數(shù)據(jù)。
父組件：
子組件：
動態(tài)插槽名
官網(wǎng)上的代碼：
v-slot:[dynamicSlotName]>
...
其實?[]里填寫的東西就是動態(tài)插槽名，里面可以寫拼接的字符串、計算屬性和方法，變化挺多的，但只會渲染出dynamicSlotName經(jīng)過相應運算或方法處理的最終結(jié)果，很靈活。
總結(jié)
基本語法要自己動手寫，一步步打好基礎就可以了，官方文檔在前言里有，可以去看。
總結(jié)
以上是生活随笔為你收集整理的vue 父传子_Vue.js教程Vue基本指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自动控制原理第二版王建辉_气箱脉冲布袋除
- 下一篇： Vue第一部分(5)：计算属性和过滤器