1. Vue的组成文件(.vue)

一、shopCart组件

分为三部分,分别对应html,js,css

(1) goods 父组件和 子组件 shopCart 传参

<template></template>

<script></script>

<style></style>
deliveryPrice:{ // 单价 从json seller 对象数据中获取
 type:Number,
 default:0
},
minPrice:{ // 最低起送价 从json seller 对象数据中获取
 type:Number,
 default:20
}

2. Vue的生命周期函数

其中 deliveryPrice 和 minPrice 的数据都是从 data.json数据 中 seller
对象下 获得。所以在goods 组件中还要 获取到 seller对象
的数据,否则会报错:

  1. beforeCreate() 创建数据之前
  2. bet36365注册送奖金,created() 创建数据 我们在这里的得到我们在data里面创建的数据
  3. beforeMount() // Dom渲染完成前
  4. mounted() //Dom渲染完成
  5. beforeUpdate() // 更新视图 在beforeUpdate触发时,视图已经更新完成
  6. Updated() //更新数据调用的函数、。

[Vue warn]: Error in render: “TypeError: Cannot read property
‘deliveryPrice’ of undefined”

<div id='app'>

 <p>{{msg}}</p>
 <input type='text' v-model='msg'>
</div>


var app = new Vue({
 el: '#app',
 data() {
  return {
   msg: 1
  }
 },
 beforeCreate() {
  console.log('beforeCreate', this.msg); //beforeCreate undefined
  console.log('beforeCreate: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>
 },
 created() {
  // 创建数据
  console.log('created', this.msg); //beforeCreate 1 
  console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>
  // 异步处理得到渲染的dom数据
  setTimeout(() => {
   this.msg = 100
   console.log('nextTick', document.getElementsByTagName('p')[0]) 
  }, 100)
  // nextTick <p>100</p>
 },
 beforeMount() {
  console.log('beforeMount', this.msg) //beforeMount 1
  console.log('beforeMount: ', document.getElementsByTagName('p')[0]) // beforeMount <p>{{msg}}</p>
 },
 mounted() {
  // 渲染dom
  console.log('mounted', this.msg) //mounted 1
  console.log('mounted: ', document.getElementsByTagName('p')[0]) //mounted <p>1</p>
 },
 beforeUpdate() {
  console.log('beforeUpdate', this.msg) //beforeUpdate 100
  console.log('beforeUpdate: ', document.getElementsByTagName('p')[0]) //beforeUpdate <p>100</p>
 },
 updated() {
  console.log('updated', this.msg) // updated 1
  console.log('updated: ', document.getElementsByTagName('p')[0]) // updated <p>100</p>
 }
})

解决方法:根组件 App.vue 中 router-view 组件获取seller 数据,传到 goods
组件中

生命周期参考链接

1-1.app.vue (根组件 也是 goods 的父组件)

3. export default

<keep-alive>
 <router-view :sell="sellerObj"></router-view>
</keep-alive>

每一个模块都是自己的作用域,相应的属性来处理数据和函数

注意:sellerObj 是data 定义 的 对象里用来接收 data.json 数据,相当于
实参

data(声明数据,可以是函数和属性)

1-2.goods.vue (相对于跟组件的子组件 且 shopCart 的父组件)

类型:Object | Function

通过props 属性 进行组件之间的通信

组件只接受函数

props: {
  sell: Object // 相当于 形参
 },
  // 对象的形式
  export default{
   data: {
    a:1
   }
  }
  // 函数的形式
  export default{
   data(){
    return {
     a: 1
    }
   }
  }

1-3.shopCart.vue ( goods 的子组件)

methods(一些指令和其他属性的调用方法)

<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>
  1. 不要用箭头函数来写里面的函数
  2. this指向Vue的实例

(2) 选中商品 的 计算功能

 export default{
  methods: {
   plus() {
    this.a++
   }
  }
 }

1-1. 传入用户选中商品的集合

1、components (组件化定义)

说明:从父组件会 传入一个用户选中商品的 数组,数组里会存放着 n
个对象,每个对象里存放着该 商品的 价格 和 数量。

类型: Object

props:{       // 通过父组件传过来的 ( 相当于形参 )
 selefoodsArr:{   // 用户选中的商品存放在一个数组里  接收的是 data.json数据的 goods(数组)
 type:Array, // 当父组件传过来的 类型是对象或者 是数组时, default 就是一个函数
 default (){
 return []  // 返回数组 存放着选中 商品 对应的 goods下的 foods 数组(由 父组件 的 实参 决定的返回值)
 }
}

自定义元素,增加代码的复用性

1-2. 利用计算属性 选中商品数量的变化,商品总价,动态改变描述等功能

 // 当我们引用一个.vue文件的时候,就像使用这个文件来充当我们主体的一部分
 <div>
   <hello></hello> 
 </div>

 import hello from './hello.vue'
 export default {
  components: {
   hello
  }
 }
computed:{
 totalPrice (){     //计算总价,超过起送额度后提示可付款
 let total=0   // 定义一个返回值
 this.selefoodsArr.forEach((rfoods) =>{ // 遍历 这个 goods 数组 取到 价格 和 数量 (当然在这里数据库没有count 这个属性,稍后 我们会利用 vue.set() 新建一个count 属性)
  total += rfoods.price * rfoods.count // 形参 rfoods 实参 是 foods
 });
 return total;
 },
 totalCount (){   // //计算选中的food数量,在购物车图标处显示,采用绝对定位,top:0;right:0;显示在购物车图标右上角  
 let count=0
 this.selefoodsArr.forEach((rfoods) =>{ // 形参 rfoods 实参 是 foods
  count += rfoods.count
 });
 return count;
 },
 payDesc (){    //控制底部右边内容随food的变化而变化,payDesc()控制显示内容,enough 添加类调整显示样式
 let diff = this.minPrice - this.totalPrice
    if (!this.totalPrice) {
     return `¥${this.minPrice}起送`
    } else if (diff > 0) {
     return `还差¥${diff}元`
    } else {
     return '去结算'
    }
 }  
}

2、computed(计算属性)

这样就渲染到 template 里了

  1. 计算属性的结果会被缓存,依赖的数据发生变化才会重新渲染
  2. 注意计算属性和methods,watch的区别
<div class="shopCart">
 <div class="content">
  <div class="content-left">
 <div class="logo-wrapper"> 
 <!--徽章 展示选中商品的个数-->
 <div class="badge" v-show="totalCount">
 {{totalCount}}
 </div>
 <!--购物车 图标 选择商品和未选择商品 时 动态改变 样式 条件:只要选择了商品即总价不为0 ,样式变--> 
  <div class="logo" :class="{'active':totalCount}">
   <i class="icon-shopping_cart"></i>
  </div>
 </div>
 <!--同理: 总价 不为0 字体高亮-->
 <div class="price" :class="{'active':totalPrice}">
  ¥{{totalPrice}}
 </div>
 <!--配送费 data.json 提供-->
 <div class="desc">
  另需要配送费¥{{deliveryPrice}}元
 </div>
  </div>
  <!--根据条件  动态 改变样式-->
  <div class="content-right" :class="{'enough':totalPrice>=minPrice}">  
 {{payDesc}}  
 </div>
 </div>
</div>
{{this.total}} //[3,4]
<button @click='add'>添加数据</button> //点击会更新this.total  

export default {
 data: () => ({
  a: 1,
  b: [2,3]
 }),
 methods: {
  add(){
   this.b.push(8);
  }
 },
 computed: {
  total(){
   return this.b.map((item)=>{
    return item+this.a
   })
  }
 }
}

相关样式

watch(监听对应的数据)

&.active
  color white

&.enough
  background #00b43c
  color white
  1. 键值对。键是我们需要监督的数据,值是相应的回调函数
  2. 回调函数接受2个参数,新的值和旧的值(对于数组和对象不会出现旧值,对于简单的数据会出现旧值)
  3. 监听对象的内部值变化,需要添加deep:true(数组不用)

总结:通过以上学习我们能发现,selectFoods()的变化起着关键作用,它的变化会引起DOM的变化,并最终体现到界面上,而我们不用关注DOM内部的具体实现,这就是vue的一大好处。如果采用jQuery完成这些功能会略显繁杂。

// 点击后相应的变化
data(){
  return {
   a: 1,
   b: [2,4,6],
   c:{name:'hcc',age:22}
  }
 },
methods: {
  add(){
   this.a++
   this.b.push(8)
   this.c.name = 'yx'
  }
 },
watch: {
  b: function(val, oldVal){
    console.log('new', val) //[2,4,6,8]
    console.log('new', oldVal) //[2,4,6,8]
  },
  a: function(val, oldVal){
   console.log(val); //2
   console.log(oldVal); //1
  },
  c:{
   handler(val){
    console.log(val); //{name: 'yx',age: 22}
   } 
  }
},

二、cartControl 组件

props(用于接受父组件传来的数据)

说明:这个组件是控制购物车小球的。其中涉及到小球的动画

  1. 规定和接受父组件的数据
  2. 单向数据流,子组件不能修改传递过来的数据
  3. 对象和数组是引用类型,指向同一个内存空间,如果 prop
    是一个对象或数组,在子组件内部改变它会影响父组件的状态。
  4. 可以规定接受的数据类型和默认值,如果是对象和数组,默认值导出是一个函数

(1) 新增属性 count

// 父组件

<hello :formParent='num'></hello> //html
components: {
 hello
},
data(){
 return {
  num: 3
 }
}

//子组件
//1. 数组规定接受的数据
props: ['hello']
//2. 验证的方式
props:{
 hello: Number,
 hello: [String, Number],
 hello: {
  type: Object,
  default(){
   return {message: 'hello'}
  }
 }
}

说明:

v-on和v-emit(子组件向父元素传递数据)

在goods 下的 foods 添加一个属性
count,用来存储用户选中的商品个数,计算商品总价 以及
关联徽章(显示用户选择商品的个数)的变化

vm.$emit: 子元素向父元素定义讯号和传递数据

方法:通过import Vue from
‘vue’;使用set接口,通过vue.set()添加属性,当它变化时就能被检测到,从而父组件能获取到count值(遍历选中的商品时使用)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图