Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾
?Vue ??學(xué)習(xí)第四天--第一部分
?
1.父組件向子組件傳值 v-bind:臨時(shí)變量名=“父組件變量名”
v-bind:value=”fathervalue”
子組件使用 props:[‘value’] 數(shù)組進(jìn)行接收即可，
<body>
???? <!--需求，這個(gè)是實(shí)現(xiàn)動(dòng)畫(huà)，-->
????<div?id="app">
<!--
我們可以在引用子組件 時(shí)候，通過(guò)屬性綁定 v-bind 的形式，把需要傳遞給子組件的數(shù)據(jù)
以屬性綁定的形式傳遞到子組件的內(nèi)部，供子組件使用，
//然后子組件怎么使用呢？？？ 還需要定義一下，
?
-->
<com1?v-bind:parentmsg="msg"></com1>
</div>
<script>
var?vm?= new?Vue({
el :?'#app',
data :?{
msg :?'父組件給子組件傳遞123'
},
methods :?{
},
components :?{
//經(jīng)過(guò)演示，發(fā)現(xiàn)自組件中，默認(rèn)是無(wú)法訪問(wèn)到父組件中data的數(shù)據(jù)，會(huì)報(bào)錯(cuò)，
//那么父組件向子組件傳值呢？？
com1 :?{
template :?'<h1 @click="change">這個(gè)是一個(gè)子組件--{{parentmsg}}---{{mymsg}}</h1>',
//組件中的所有props 里面的值，都是父組件傳遞過(guò)來(lái)的，
props :?['parentmsg'], //把父組件傳遞過(guò)來(lái)的屬性，先在props 數(shù)組中定義一下，這樣才能傳遞成功
//才能使用成功。
//其中，自己有data ,私有數(shù)據(jù),但是data 必須是一個(gè)函數(shù)，并且返回的是對(duì)象數(shù)據(jù)
//這個(gè)主要是由于 私有組件的性質(zhì)決定的。
// data 數(shù)據(jù)中的數(shù)據(jù) 一般是通過(guò)Ajax 請(qǐng)求回來(lái)的數(shù)據(jù)，當(dāng)?shù)纃ata 上面
//data 中的數(shù)據(jù)是可讀可寫(xiě)的，props 中的數(shù)據(jù)只能是可讀
data?:?function() {
return?{
mymsg :?'mymesssag11e'
}
},
filters :{},
directives :?{},
components :?{},
methods :?{
change(){
//this.mymsg = '被修改了哦';
this.parentmsg?= '修改父組件的值？？';
}
}
?
}
}
?
});
?
?
2.父組件向子組件傳遞 方法 ?v-on : 零時(shí)函數(shù)名 = “父組件函數(shù)名”
在這個(gè)里面還實(shí)現(xiàn)了子組件向父組件傳遞數(shù)值，父組件還能將其保存，，
1.v-on:sonfunc=”fatherfunc”
2.子組件中再觸發(fā)一下，this.$emit(‘sonfunc’);
2.1也可以子數(shù)值傳遞給父數(shù)值 ?this.$emit(sonfunc,sondata);
我的問(wèn)題是：子組件的data 封裝不正確，子組件中data 是這樣封裝的
data : function (){ ??//data 是函數(shù)
return {}; ???//返回對(duì)象數(shù)據(jù)
}
?
3. 實(shí)現(xiàn)一個(gè) 評(píng)論列表
<!--熟悉使用 最新的 組件命名與使用，子函數(shù)，字?jǐn)?shù)據(jù)，父函數(shù)，父數(shù)據(jù)的使用，
1.主要是對(duì)評(píng)論框這個(gè)組件實(shí)現(xiàn)復(fù)用
-->
我的學(xué)習(xí)盲點(diǎn)： 1.關(guān)于json轉(zhuǎn)成數(shù)組 ??array = JSON.stringify(Object)
2. 數(shù)組轉(zhuǎn)換成對(duì)象， ?object = JSON.parse(array)
還有就是關(guān)于 localstroage 的存取使用
<!doctype html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<meta?name="Generator"?content="EditPlus?">
<meta?name="Author"?content="">
<meta?name="Keywords"?content="">
<meta?name="Description"?content="">
<title>組件的開(kāi)發(fā)</title>
??<script?src="../../lib/vue.min.js">?</script>
<link?href="../../lib/bootstrap.min.css"?rel="stylesheet">
?
</head>
<body>
???? <!--需求，這個(gè)是實(shí)現(xiàn)動(dòng)畫(huà)，-->
????<div?id="app">
<div>
<!--組件，將復(fù)用的功能進(jìn)行抽取成組件，然后復(fù)用。這個(gè)是重點(diǎn)環(huán)節(jié)了，組件的相關(guān)使用
1. 聲明臨時(shí) 組件變量，開(kāi)辟空間
2. 開(kāi)啟模板，書(shū)寫(xiě)本文組件內(nèi)容
3. 將組件定義到components 中
-->
<div>
<cmt-box>
?
</cmt-box>
</div>
<div>
<ul?class="list-group">
<li?class="list-group-item"?v-for="item in list"?:key="item.id">
<span?class="badge">評(píng)論人：{{item.user}}</span>{{item.content}}
</li>
</ul>
</div>
</div>
</div>
<template?id="temp1">
<div>
<div?class="form-group">
<label>評(píng)論人：</label>
<input?type="text"?class="form-control"?v-model="user">
</div>
<div?class="form-group">
<label>評(píng)論內(nèi)容：</label>
<textarea?class="form-control"?v-model="content"></textarea>
</div>
<div?class="form-group">
<input?type="button"?value="發(fā)布評(píng)論"?class="btn btn-primary"?@click="postComment">
<!--在這里犯錯(cuò)的原因是，數(shù)據(jù)的ing一位置錯(cuò)誤-->
</div>
</div>
</template>
<script>
var?commentBox?= {
//再次犯錯(cuò)，是因?yàn)閿?shù)據(jù)的封裝不正確，
data?(){
return?{
user :?'',
content :?''
}
},
template :?'#temp1',
methods :?{
postComment(){
//發(fā)表評(píng)論 子函數(shù)函數(shù)
//邏輯分析 1. 評(píng)論數(shù)據(jù)存到哪里？？ ----》》》 存放到localStorage 中，調(diào)用localStorage.setItem('key','value');
//2.先組織出一個(gè)最新的評(píng)論數(shù)據(jù)對(duì)象，
//3.把第二步的數(shù)據(jù)對(duì)象存到localStorage 中
//3.1 localStorge 中只支持 字符串?dāng)?shù)據(jù)，需要先將對(duì)象調(diào)用JSON.stringify函數(shù)進(jìn)行轉(zhuǎn)換
//3.2 在保存最先數(shù)據(jù)之前，要先從localStorge 中拿到之前歷史數(shù)據(jù)，將string數(shù)據(jù)轉(zhuǎn)換成
//一個(gè) 數(shù)組對(duì)象，然后把最新的評(píng)論數(shù)據(jù)push 到這個(gè)數(shù)組中，//push 是在前面插入，因此要在后面插入
//3.3 3.2 的bug 是如果之前沒(méi)有數(shù)據(jù)怎么辦，那么則置空，考慮業(yè)務(wù)完整性。返回一個(gè)'[]' 讓JSON.parse 去轉(zhuǎn)換。
// 3.4 把最新的評(píng)論列表再次調(diào)用JSON.stringify 轉(zhuǎn)換成數(shù)組字符串，然后調(diào)用localStorage.setItem
?
var?comment?= {id :?Date.now(),user :?this.user,content :?this.content};
//獲取所有的歷史數(shù)據(jù)，做空處理，并且轉(zhuǎn)換成數(shù)組對(duì)象 調(diào)用 JSON。parse
var?list?= JSON.parse(localStorage.getItem('cmts') || '[]') ;
//數(shù)組對(duì)象中加入新的數(shù)據(jù)
list.push(comment); //放到最前面，用list.unshift(comment);
//將最新的數(shù)據(jù)存進(jìn)去、記得將對(duì)象轉(zhuǎn)換成數(shù)組，
localStorage.setItem('cmts',JSON.stringify(list));
this.user?= this.content?= '';
?
}
}
};
var?vm?= new?Vue({
el :?'#app',
data :?{
list:[
{id :?Date.now(),user :?'李白',content :'天生我才必有用'},
{id :?Date.now(),user :?'杜甫',content :?'大避天下寒士'},
{id :?Date.now(),user :?'白居易',content :'猶抱琵琶半遮面'}
]
},
methods :?{
},
components :?{
'cmt-box'?:?commentBox,
methods :{
add(){
}
}
}
?
});
</script>
?
</body>
</html>
?
?
?
4.
?
5.
?
6.?
總結(jié)
以上是生活随笔為你收集整理的Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 股票的下跌缺口一定会回补吗 用户最好提
- 下一篇： Vue 学习第四天 -2