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.
5175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
