Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾
?Vue ??學習第四天--第一部分
?
1.父組件向子組件傳值 v-bind:臨時變量名=“父組件變量名”
v-bind:value=”fathervalue”
子組件使用 props:[‘value’] 數組進行接收即可，
<body>
???? <!--需求，這個是實現動畫，-->
????<div?id="app">
<!--
我們可以在引用子組件 時候，通過屬性綁定 v-bind 的形式，把需要傳遞給子組件的數據
以屬性綁定的形式傳遞到子組件的內部，供子組件使用，
//然后子組件怎么使用呢？？？ 還需要定義一下，
?
-->
<com1?v-bind:parentmsg="msg"></com1>
</div>
<script>
var?vm?= new?Vue({
el :?'#app',
data :?{
msg :?'父組件給子組件傳遞123'
},
methods :?{
},
components :?{
//經過演示，發現自組件中，默認是無法訪問到父組件中data的數據，會報錯，
//那么父組件向子組件傳值呢？？
com1 :?{
template :?'<h1 @click="change">這個是一個子組件--{{parentmsg}}---{{mymsg}}</h1>',
//組件中的所有props 里面的值，都是父組件傳遞過來的，
props :?['parentmsg'], //把父組件傳遞過來的屬性，先在props 數組中定義一下，這樣才能傳遞成功
//才能使用成功。
//其中，自己有data ,私有數據,但是data 必須是一個函數，并且返回的是對象數據
//這個主要是由于 私有組件的性質決定的。
// data 數據中的數據 一般是通過Ajax 請求回來的數據，當道data 上面
//data 中的數據是可讀可寫的，props 中的數據只能是可讀
data?:?function() {
return?{
mymsg :?'mymesssag11e'
}
},
filters :{},
directives :?{},
components :?{},
methods :?{
change(){
//this.mymsg = '被修改了哦';
this.parentmsg?= '修改父組件的值？？';
}
}
?
}
}
?
});
?
?
2.父組件向子組件傳遞 方法 ?v-on : 零時函數名 = “父組件函數名”
在這個里面還實現了子組件向父組件傳遞數值，父組件還能將其保存，，
1.v-on:sonfunc=”fatherfunc”
2.子組件中再觸發一下，this.$emit(‘sonfunc’);
2.1也可以子數值傳遞給父數值 ?this.$emit(sonfunc,sondata);
我的問題是：子組件的data 封裝不正確，子組件中data 是這樣封裝的
data : function (){ ??//data 是函數
return {}; ???//返回對象數據
}
?
3. 實現一個 評論列表
<!--熟悉使用 最新的 組件命名與使用，子函數，字數據，父函數，父數據的使用，
1.主要是對評論框這個組件實現復用
-->
我的學習盲點： 1.關于json轉成數組 ??array = JSON.stringify(Object)
2. 數組轉換成對象， ?object = JSON.parse(array)
還有就是關于 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>組件的開發</title>
??<script?src="../../lib/vue.min.js">?</script>
<link?href="../../lib/bootstrap.min.css"?rel="stylesheet">
?
</head>
<body>
???? <!--需求，這個是實現動畫，-->
????<div?id="app">
<div>
<!--組件，將復用的功能進行抽取成組件，然后復用。這個是重點環節了，組件的相關使用
1. 聲明臨時 組件變量，開辟空間
2. 開啟模板，書寫本文組件內容
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">評論人：{{item.user}}</span>{{item.content}}
</li>
</ul>
</div>
</div>
</div>
<template?id="temp1">
<div>
<div?class="form-group">
<label>評論人：</label>
<input?type="text"?class="form-control"?v-model="user">
</div>
<div?class="form-group">
<label>評論內容：</label>
<textarea?class="form-control"?v-model="content"></textarea>
</div>
<div?class="form-group">
<input?type="button"?value="發布評論"?class="btn btn-primary"?@click="postComment">
<!--在這里犯錯的原因是，數據的ing一位置錯誤-->
</div>
</div>
</template>
<script>
var?commentBox?= {
//再次犯錯，是因為數據的封裝不正確，
data?(){
return?{
user :?'',
content :?''
}
},
template :?'#temp1',
methods :?{
postComment(){
//發表評論 子函數函數
//邏輯分析 1. 評論數據存到哪里？？ ----》》》 存放到localStorage 中，調用localStorage.setItem('key','value');
//2.先組織出一個最新的評論數據對象，
//3.把第二步的數據對象存到localStorage 中
//3.1 localStorge 中只支持 字符串數據，需要先將對象調用JSON.stringify函數進行轉換
//3.2 在保存最先數據之前，要先從localStorge 中拿到之前歷史數據，將string數據轉換成
//一個 數組對象，然后把最新的評論數據push 到這個數組中，//push 是在前面插入，因此要在后面插入
//3.3 3.2 的bug 是如果之前沒有數據怎么辦，那么則置空，考慮業務完整性。返回一個'[]' 讓JSON.parse 去轉換。
// 3.4 把最新的評論列表再次調用JSON.stringify 轉換成數組字符串，然后調用localStorage.setItem
?
var?comment?= {id :?Date.now(),user :?this.user,content :?this.content};
//獲取所有的歷史數據，做空處理，并且轉換成數組對象 調用 JSON。parse
var?list?= JSON.parse(localStorage.getItem('cmts') || '[]') ;
//數組對象中加入新的數據
list.push(comment); //放到最前面，用list.unshift(comment);
//將最新的數據存進去、記得將對象轉換成數組，
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.?
總結
以上是生活随笔為你收集整理的Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 股票的下跌缺口一定会回补吗 用户最好提
- 下一篇： 企业年金最佳领取方案 看看过来人的有用经