vue 学习第四天-尊龙游戏旗舰厅官网
vue 学习第四天--第一部分
1.父组件向子组件传值 v-bind:临时变量名=“父组件变量名”
v-bind:value=”fathervalue”
子组件使用 props:[‘value’] 数组进行接收即可，
<body>
<div id="app">
<com1 v-bind:parentmsg="msg">com1>
div>
<script>
var vm = new vue({
el : '#app',
data : {
msg : '父组件给子组件传递123'
},
methods : {
},
components : {
//经过演示，发现自组件中，默认是无法访问到父组件中data的数据，会报错，
//那么父组件向子组件传值呢？？
com1 : {
template : '
',//组件中的所有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.关于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>
<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">
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 学习第四天--第一部分 --盲点整理与昨天知识回顾的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：