Vue.js學習筆記:props傳遞資料
一.傳遞資料
1.props 傳入單資料
就像 data 一樣,prop 可以用在模板內,同樣也可以在 vm 例項中像“this.message”這樣使用
<template>
<div id="app">
<h1>{{title}}</h1>
<child message="hello! Prop"></child>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('child', {
// 宣告 props
props: ['message'],
template: '<span>{{ message }}</span>'
})
export default {
name: 'app',
data: function () {
return {
title: '使用 Prop 傳遞資料'
}
}
}
</script>
<child message="hello! Prop"></child>
2.props 傳入多個數據
如果在父元件的模板類新增其他元素或者字元會有:
①在最前面加入—每個子元件渲染出來都會在其前面加上
②在最後面加入—每個子元件渲染出來都會在其後面加上
③在中間加入—他前面子元件後面加上,後面的子元件後面加上
(1)1種
<template>
<div id="app">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('child', {
props: ['msg','nihao','nisha'],
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
});
export default {
name: 'app',
data: function () {
return {
}
}
}
</script>
(2)2種
template: '<span>小明,{{ msg }}{{nihao}}{{nisha}}</span>',
(3)3種
template: '<span>{{ msg }}{{nihao}}{{nisha}}小明</span>',
(4)4種
template: '<p>{{ msg }}小明 {{nihao}} {{nisha}}小林</p>',
注意:camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名:
二.動態prop
要動態地繫結父元件的資料到子模板的 props,與繫結到任何普通的HTML特性相類似,就是用 v-bind
。每當父元件的資料變化時,該變化也會傳導給子元件
<template>
<div id="app">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'app',
data: function () {
return {
title: '使用 Prop 傳遞資料',
parentMsg: 'Message from parent'
}
},
components: {
child: {
props: ['myMessage'],
template: '<span>{{myMessage}}</span>'
}
}
}
</script>
三.表示式計算,傳遞值
如果想傳遞一個實際的 number,需要使用 v-bind
,從而讓它的值被當作 JavaScript 表示式計算
<comp v-bind:some-prop="1"></comp>
<template>
<div id="app">
<p>{{tle1}}:<comp total="123+456"></comp></p>
<p>{{tle2}}<comp :total="123+456"></comp></p>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component("comp", {
props: ["total"],
template: "<span>total: {{total}}</span>",
});
export default {
name: 'app',
data: function () {
return {
tle1: '這裡傳遞是字串',
tle2: '用了v-bind動態語法,傳遞值會通過js的表示式計算,得到個值:'
}
}
}
</script>
四.Prop型別繫結
prop 預設是單向繫結:當父元件的屬性變化時,將傳導給子元件,但是反過來不會。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。
五.prop驗證
傳入的資料不符合規格,Vue 會發出警告。當元件給其他人使用時,這很有用。
<template>
<div id="app">
<div>name:{{dr.name}}, age:{{dr.age}}.<input v-model="telphone" /> </div>
<br /><br />
<div>
<span>vue自定義元件</span><br />
<child :msg_null="123+456" msg_string="adss"
:msg_number="0" :msg_twoway.sync="telphone"
:msg_validate="mobilephone"
:msg_number2String="mobilephone"
:msg_obj2json="dr"
:msg_json2obj="drJson"></child>
</div>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component("child", {
props: {
msg_null: null,//基礎型別檢測("null"意思是任何型別都可以)
msg_string: { //String型別,必須是定義過的,可以是空字串""
type: String,
required: true,
},
msg_number: {//Number型別,預設值100
type: Number,
default: 100,
},
msg_obj: {//Object型別,返回值必須是js物件
type: Object,
default: function() {
return {
name: "DarkRanger",
age: "18",
}
}
},
msg_twoway: { //指定這個prop為雙向繫結,如果繫結型別不對將丟擲一條警告
type: String,
twoWay: true,
},
msg_validate: { //自定義驗證,必須是Number型別,驗證規則:大於0
type: Number,
validator: function(val) {
return val > 0;
}
},
msg_number2string: { //將值轉為String型別,在設定值之前轉換值(1.0.12+)
coerce: function(val) {
return val + ""
}
},
msg_obj2json: { //js物件轉JSON字串
coerce: function(obj) {
return JSON.stringify(obj);
}
},
msg_json2obj: {//JSON轉js物件
coerce: function(val) {
return JSON.parse(val);
}
},
},
template: '<div><b>msg_null=123+456=</b> {{msg_null}}</br>
</br><b>msg_string="1":</b>{{msg_string}}</br></br><b>msg_number:</b> {{msg_number}}</br>
</br><b>msg_obj:</b>{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</br>
</br><b>msg_twoway:</b><input v-model="msg_twoway"></br></br><b>msg_validate:</b>{{msg_validate}}</br>
</br><b>msg_number2String:</b> {{msg_number2string}}</br></br><b>msg_obj2json:</b> {{msg_obj2json}}</br>
</br><b>msg_json2obj:</b>{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'
});
export default {
name: 'app',
data: function () {
return {
telphone: "0356-1234567",
mobilephone: 15912345678,
dr: {
name: "DarkRanger",
age: 25
},
drJson: {"name":"DarkRanger","age":25}
}
}
}
</script>
解釋:
①、msg_null:不論什麼資料型別,只要能解析成功,就渲染成正確的html
②、msg_string:只能傳遞String型別的字串,如果將child06中的“msg_string="this is string"”更改為“:msg_string="1+2"”,
控制檯報錯:
③、msg_number:如果在child06標籤中沒有定義值,我們將會取預設值100,現在定義了“:msg_number="99"”,如果將“:msg_number="99"”更改為“msg_number="99"”,控制檯報錯:
④、msg_obj:在js中我們定義的msg_obj的default屬性是一個具有返回js物件的函式,這裡取值的時候直接取的就是返回值,如果在child06中定義或者綁定了新的js物件,則會將msg_obj更新為新的資料。取js物件屬性值的時候用{{Object.prop}}取值即可。
⑤、msg_twoway:雙向資料繫結,在測試的過程中發現,即使設定“twoWay: true”,當子元件發生變化時,vue例項的資料並不會更新,還是單向的資料繫結,這裡我將child06中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”,保證測試能夠資料雙向繫結。
⑥、msg_validate:有驗證規則的元件資料,這裡定義的規則是當前數值必須大於0,如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制檯報錯:
⑦、msg_number2string:在結果賦值之前將數值轉化為字串。
⑧、msg_obj2json:vue.js內建了JSON的兩個方法,一個是JSON.parse(jsonStr)--》將JSON字串轉化為js物件,另外一個是JSON.stringify(obj)--》將js物件序列化為JSON字串。
這裡是將obj轉化為json字串,需要新增coerce屬性,它是一個具有返回json字串的函式,當然不是必須得用JSON.stringify(obj)方法,只要方法合理,能夠轉化為json能夠識別的字串即可。
⑨、msg_json2obj: 將json字串轉化為js物件。
相關推薦
Vue.js學習筆記:props傳遞資料
一.傳遞資料 1.props 傳入單資料 就像 data 一樣,prop 可以用在模板內,同樣也可以在 vm 例項中像“this.message”這樣使用 <template> <div id="app"> <h1>{{
Vue.js學習筆記:屬性繫結 v-bind
v-bind 主要用於屬性繫結,Vue官方提供了一個簡寫方式 :bind,例如: <!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"
Vue.js學習筆記:過渡效果(含列表過渡)
Vue 提供了 transition 的封裝元件,在下列情形中,可以給任何元素和元件新增 entering/leaving 過渡 條件渲染 (使用 v-if)條件展示 (使用 v-show)動態元件
Vue.js學習筆記:關於元件掛載
最近學習到Vue.js的元件部分,在看完官方文件之後還是一頭霧水,於是自己試驗了一下,將試驗結果記錄下來,以便查閱。 我在跟著文件做了一遍之後,渲染結果為: <div id="example"> <div>A custom component
Vue.js學習筆記:在元素 和 template 中使用 v-if 指令
語法比較簡單,直接上程式碼: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <hea
vue.js學習筆記(Vuejs——組件——props數據傳遞)
元素 綁定 筆記 即使 大小寫 return span com 簡單 ①組件實例的作用域: 是孤立的,簡單的來說,組件和組件之間,即使有同名屬性,值也不共享。 <div id="app"> <add></add>
【Vue.js學習筆記】5:雙向資料繫結,計算屬性
雙向資料繫結 雙向資料繫結往往會用到input、select、textarea等表單標籤上,因為總是涉及一個數據資料的地方和輸出資料的地方。 當資料發生變化的時候,檢視也就發生變化,當檢視發生變化的時候,資料也會跟著同步變化。 資料雙向繫結,一定是對於UI控制元件來說的,
【Vue.js學習筆記】3:資料繫結,事件繫結
資料繫結 使用Vue時在Vue物件的el欄位中要指定一下根容器,這裡用id選擇器。這個例子同時學習了data和methods的基本用法。 資料繫結(data-binding)可以將Vue物件中的data的值繫結到HTML標籤中的某些位置,則修改時只需要修改物件中相應data的值即
Vue.js 學習筆記之二:資料驅動開發
在 Vue.js 框架中,與 HTML 頁面元素的互動方式沒有像原生 JavaScript 介面那麼直接,它是通過先在 HTML 元素標籤中嵌入一系列類似於普通標籤屬性的 Vue 指令屬性來繫結資料,然後再通過在 JavaScript 程式碼中修改這些被繫結的資料來修改頁面元素的顯示方式與內容。在程式設計方法
Vue.js 學習筆記之三:與伺服器的資料互動
顯而易見的,之前的`02_toDoList`存在著一個很致命的缺陷。那就是它的資料只存在於瀏覽器端,一但使用者關閉或重新載入頁面,他之前加入到程式中的資料就會全部丟失,一切又恢復到程式的初始狀態。要想解決這個問題,就需要 Web 應用的前端在適當的時間將獲得的輸入資料儲存到後端伺服器上,然後在需要時再從伺服器
Vue.js學習筆記——請求資料的幾種方式(v-resource,axios)
一、 v-resource 1. 在搭建好腳手架之後,安裝v-resource ——npm/cnpm install v-resource --save 2. 在main.js中進行註冊 import VueResource from 'vu
【Vue.js學習筆記】9:使用npm搭建Vue-CLI腳手架並建立Vue專案
在第一篇的時候確實可以建立,這次跟著視訊搭建一次,比較一下和上次的區別,更正一下上次的錯誤操作,加深理解。 重新搭建Vue-CLI腳手架 在Node.js的安裝目錄下,刪除node_cache/和node_global下的所有內容,即讓Node處於剛剛安裝完成的狀態,連cnpm也
【Vue.js學習筆記】8:建立多個Vue例項物件,認識Vue中的元件
建立多個Vue例項物件 這裡在同一個js檔案中建立了兩個Vue例項物件,它們各自能完成前面學的那些功能,同時使用物件名稱也可以互相訪問,協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-
【Vue.js學習筆記】7:v-for渲染,Vue的小Demo
v-for渲染 v-for是Vue中常用的列表渲染方法, 可以將一個列表渲染為一系列的HTML元素,也可以用來遍歷物件內的k-v對。另外關於模板元素渲染在官方文件上見這裡。 index.html <!DOCTYPE html> <html lang="en"
【Vue.js學習筆記】6:動態繫結CSS樣式,條件渲染和v-show
動態繫結CSS樣式 這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:
【Vue.js學習筆記】4:事件修飾符,鍵盤事件,鍵值修飾符
事件修飾符 在Vue的官方文件中給出了引入v-on:的事件修飾符的理念是,不希望在方法中去處理DOM細節。 事件冒泡 事件在事件源上發生,處理事件的方法並未繫結在該事件源上,事件就要向外或者向內傳播(propagation),也稱事件冒泡。在JS裡,可以用事件物件的stopP
【Vue.js學習筆記】11:元件中CSS的作用域
樣式表最終的生成位置 有兩個元件,一個是根元件App,一個是子元件Users。它們都有一個h2標籤,先只在根元件上寫CSS樣式。 App.vue <template> <div id="app"> <h2>父元件的h2標籤<
Vue.js 學習筆記之四:Vue 元件基礎
到目前為止,這個系列的筆記所展示的都是一些極為簡單的單頁面 Web 應用程式,並且頁面上通常只有幾個簡單的互動元素。但在實際生產環境中,Web 應用程式的使用者介面往往是由多個複雜的頁面共同組成的。這時候,我們就需要開始注意程式碼的可複用性了,針對這個問題,Vue.js 框架提出的解決方案就是先將使用者介面上
Vue.js 學習筆記之六:構建更復雜的元件
在掌握瞭如何構建與編譯 Vue 元件的基礎知識之後,接下來就可以試著來構建一些更具有實際用處的複雜元件了。為了賦予元件更具實用性的後面,首先要做的就是讓這些元件具備監聽使用者自定義事件的能力,並且允許使用者為這些自定義事件註冊相應的處理函式,而這一切都要從`v-on`指令在 Vue 元件中的使用說起。 ##
vue.js學習筆記
bsp 系統 特性 學習 數據綁定 學習筆記 開始 問題 mvvm模式 1、vue.js的目的 Vue的產生主要是解決三個問題 1.1、主要解決的是數據綁定的問題 1.2、主要是構建大型的單頁面程序,解決app頁面卡頓的問題 1.3、支持組件式開發,采用積木式編程