Vue 学习第四天--第一部分

1.父组件向子组件传值 v-bind:临时变量名=“父组件变量名”

v-bind:value=”fathervalue”

子组件使用 props:[‘value’] 数组进行接收即可，

<body>

<!--

我们可以在引用子组件时候，通过属性绑定 v-bind 的形式，把需要传递给子组件的数据

以属性绑定的形式传递到子组件的内部，供子组件使用，

//然后子组件怎么使用呢？？？还需要定义一下，

-->

</div>

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>

<head>

<title>组件的开发</title>

</head>

<body>

<div>

<!--组件，将复用的功能进行抽取成组件，然后复用。这个是重点环节了，组件的相关使用

1. 声明临时组件变量，开辟空间

2. 开启模板，书写本文组件内容

3. 将组件定义到components 中

-->

<div>

<cmt-box>

</cmt-box>

</div>

<div>

<span class="badge">评论人：{{item.user}}</span>{{item.content}}

</li>

</ul>

</div>

<div>

</div>

</div>

</div>

</template>

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>

Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾相关推荐

吴恩达深度学习第四课第一周卷积神经网络
文章目录前言一.计算机视觉(引言) 二.边缘检测示例(过滤器) 三.更多边缘检测内容(由亮到暗还是由暗到亮?) 四.Padding(Valid.Same.p) 五.卷积步长(s) 六.三维卷积(通 ...
Vue 学习第四天 -2
4. Vue 操作Dom ,获得Dom节点, ref 属性, $refs ref 引用组件 ,然后实现相关数据和方法的引用,差不多就是父组件调用子组件, <body> <!-- ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue学习（四）—— vue中的ajax
文章目录第四部分 vue中的ajax 一.axios 1.安装 2.引入二.vue脚手架配置代理 1.方法一 2.方法二三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...
汇编语言学习——第四章第一个汇编程序
1.一个汇编语言程序从写出到最终执行的简要过程: 编写--> 编译,链接 --> 执行 2.编译,链接使用汇编语言编译程序(MASM.EXE)对源程序文件中的源程序进行编译,产生目标文件 ...
VUE学习(十四)读取json文件
1.json文件内容 2.使用import导入json <script setup>import config from '../../public/config/config.json' ...
VUE学习和开发中的注意点总结(一)，便于回顾（不断完善补充。）
1.export 和export default 的区别? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通 ...
千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）
菜鸟Vue学习笔记(四) 上周学习了使用Vue来操作表单元素进行数据双向绑定,今天我们来学习下Vue中的组件,Vue中的组件作用就是去封装一些常用的页面标签,将其当做一个整体,以便在其他位置直接使用一 ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...

Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾

Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾相关推荐

最新文章

热门文章