Vue02进阶脑图思维导图

灰色と青

2023-11-30

浏览量: 8

数据框架

前端框架

数据编程

Vue计算属性和wathc监听等相关内容分解

树图思维导图提供《Vue02进阶脑图》在线思维导图免费制作，点击“编辑”按钮，可对《Vue02进阶脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：b2d62df04e6ddfc363c1c62101822ed3

思维导图大纲

Vue计算属性和wathc监听

计算属性

computed:{ birth(){ return~~~~; } }

wathc监听

//3.创建vue实例 var app = new Vue({ el:"#app", //设置vue的作用域载体 data:{ shen:"", shi:"", qu:"" }, watch:{ //监听属性操作 shen(newv,oldv){ //newv : 新值 oldv : 老值 console.log(oldv+":"+newv); if (newv === "河南省"){ //实际中把这个地方换成vue的请求后端接口获取数据操作 this.shi="郑州市"; } }, shi(newv,oldv){ console.log(oldv+":"+newv); if (newv === "郑州市"){ this.qu="高新技术产业区"; } } } });

wathc: { sheng(newv,oldv) { if(~~) { this.shi=' '; } //if }//sheng }//watch

组件化

什么是组件化

自定义组件标签

大型开发中，页面有很多相同的部分，为了避免重复开发，把页面的不同部分拆分成独立的组件，然后在不同的页面进行共享在vue中，所有的vue实例都是组件

全局组件

自定义全局组件，在任何的vue实例中都可以使用参数1：自定义组件的名称，就是使用自定义组件时候的名称；参数2：自定义组件中封装的标签，以及标签所需的属性数据

名称，标签，属性数据

Vue.component( "参数一：名称", { template:`~~~count~~`//封装的标签内容,记得加逗号"," ,data(){ // 封装的标签所需的 ~数据 return{ key:value~~~~//返回的是数据模型用的属性 count:0~~等等给上面用 //真正要在自定义组件封装的标签中使 }//return }

1：组件其实也是一个 vue实例，因此他在定义时也会接收data，methods,生命周期函数等 2：组件不会与页面元素绑定，否则就无法复用了，因此没有el属性 3：全局组件定义完毕，任何 vue实例都可以直接在HTML中通过组件名称来使用组件 4：data必须是一个函数不再是一个对象

用名称来引入 <名称></名称>

创建vue实例

var app=new Vue({ el:"#app", data:{ name:"vue作用域-app" } });

组件的使用和相关介绍；

组件的data不像之前vue实例时直接提供一个对象， data: { count: 0 } 取而代之的时一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝 data() { return { count: 0 } }

局部组件

一旦全局注册，就意味着即便以后不再使用这个组件，它依然会随着vue的加载而加载，因此，不常用组件~~~~~局部注册我们现在外部定义一个对象，结构与创建组件时传递的第二个参数一致

const conuTer ={ template: ` ` ,data(){ return{ count:0 } } }

如何引入自定义局部组件呢？

components:{ //引入自定义局部组件 lanou:conuTer //key:value key: 使用自定义局部组件的名称 value:存放自定义局部组件的变量 }

components就是当前vue对象子组件集合，~~~子组件集合命名：key:value key：子组件名称 value:就是组件对象名效果与刚才的全局注册是类似的，不过这个counter组件只能再当前vue实例中使用

//3.创建vue实例 var app = new Vue({ el:"#app", data:{ name:"vue作用域-app" }, components:{ //引入自定义局部组件 lanou:conuTer //key:value key:使用自定义局部组件的名称 value:存放自定义局部组件的变量 } });

组件树

组件通信

父组件向子组件通信：通过vue指令进行各种绑定；

父组件中vue实例

const app=new Vue();

el:"#app"

data:{

shops:[

一个大数组，数组里面元素为对象

组件中使用了item数据，使用total数据，现在自定义组件中都没有，所以接下来就是构建自定义组件使用的item和total数据

在父组件body中定义组件：<good-shop></good-shop>

其次，在body标签中使用自定义组件时，设置传递数据给子组件

<good-shop v-for="item in shops" :item="item"></good-shop>

写完之后，商品列表就会展示出来，但是商品列表中的+-数量操作是没有的

首先，在子组件中设置接收父组件的数据

定义全局组件 Vue .component("goodShop",template`~标签样式`,)

goodshop

参数一

props：["item"]

//设置父组件传递给子组件数据时，使用此属性进行数据绑定，可以是字符串数组 :item="item"

template ·封装的标签·

methods:{

getCurrentNumber(num){

this.total = this.item.newPrice * num;

//根据子组件传递过来的数据，计算商品的总价

自定义商品增减数量的全局组件

Vue.component(

inputnumebr参数一名称

+-号自定义组件

参数二 template:

props:{

value：

type:

设置属性能接收的数据的类型

Number, //Object、Array、Number

default：

及不传数据时的默认值

value///设置父组件传递给子组件数据时，使用此属性进行数据绑定，时的默认值

methodss:{

+-数量自定义组件中的clickAction点击事件处理，此点击事件是+-号共用的，所以在点击事件中需要区分+号和-号，还要对应不同的操作

clickAction(event){

//+-号使用的点击事件

let $text = event.target.innerText; //通过event事件对象获取点击的标签，然后再获取标签的开始标签和结束标签中间的文本内容 if($text === "+"){ this.num+=1; }else if($text === "-"){ this.num-=1; this.num = this.num <=1 ? 1 : this.num; }

实现在+-商品数量的时候，能够动态更改商品的总价

涉及子组件（+-数量自定义组件）调用父组件（商品列表自定义组件）方法，实现传递+-的商品数量，动态更改商品的总价

在+-数量的自定义组件中构建调用父组件方法的定义

this.$emit("getNumber",this.num);

//点击此事件，处理更改输入框中商品数量之外，还要更改父组件中展示的商品的总价 //设置子组件传递数据给父组件时，用来调用父组件方法的属性， @getNumber(xxx)

在+-数量的自定义组件中，需要使用num数据，需要构建clickAction点击事件。 num数据：表示商品的数量，所以需要父组件传递过来 +-数量自定义组件，先设置接收父组件传递的数据

子组件向父组件通信：调用父组件中的方法；

种子思维脑图思维导图