Vue.js学习笔记3 | 易学教程

此处是在git中上传代码到github中Repository的命令

1、在对git进行上传之前，必须先进行build（项目打包），这样才能够产生dist文件夹（dist=distant，里面是编译过适合远程部署的文件）

执行$ npm run build

2、将打包好的文件上传到git

git init
   
git add .
   
git commit -m 'init vue project'

~~GOOD~~ git remote add origin https://swanf.github.io/vue-pizza-app.git // 用https协议访问仓库

~~BAD~~ git remote add origin git@github.com:Rain120/demo.git // 通过git@来访问github已经过时，现在应该用https了
   
git pull origin master --allow-unrelated-histories
   
git push -u origin master

(原文在这里)

可以按照上面的，也可以用vs code的git插件，进行先commit后push。看后面的原理图，弄懂了原理就不必纠结于某句代码了。

上图展示了git的整体架构，以及和各部分相关的主要命令。先说明下其中涉及的各部分。

**工作区(working directory)，**简言之就是你工作的区域。对于git而言，就是的本地工作目录。工作区的内容会包含提交到暂存区和版本库(当前提交点)的内容，同时也包含自己的修改内容。

**暂存区(stage area, 又称为索引区index)，**是git中一个非常重要的概念。是我们把修改提交版本库前的一个过渡阶段。查看GIT自带帮助手册的时候，通常以index来表示暂存区。在工作目录下有一个.git的目录，里面有个index文件，存储着关于暂存区的内容。git add命令将工作区内容添加到暂存区。

本地仓库(local repository)，版本控制系统的仓库，存在于本地。当执行git commit命令后，会将暂存区内容提交到仓库之中。在工作区下面有.git的目录，这个目录下的内容不属于工作区，里面便是仓库的数据信息，暂存区相关内容也在其中。这里也可以使用merge或rebase将远程仓库副本合并到本地仓库。图中的只有merge，注意这里也可以使用rebase。

**远程版本库(remote repository)，**与本地仓库概念基本一致，不同之处在于一个存在远程，可用于远程协作，一个却是存在于本地。通过push/pull可实现本地与远程的交互；

**远程仓库副本，**可以理解为存在于本地的远程仓库缓存。如需更新，可通过git fetch/pull命令获取远程仓库内容。使用fech获取时，并未合并到本地仓库，此时可使用git merge实现远程仓库副本与本地仓库的合并。git pull 根据配置的不同，可为git fetch + git merge 或 git fetch + git rebase。rebase和merge的区别可以自己去网上找些资料了解下。

看到这里，不仅清楚了 git fetch 与 git pull。而且我们使用每个命令时，也能清楚的明白此时git做了什么工作。

(原文在这里)

以下是shopcart的笔记

在export default中的props中的变量，需要用键值对k-v来表明，key是变量名，value是变量类型，可以是primitive也可以是一个JSON对象。而当我们用一个JSON对象标明变量类型的时候，需要注意的是，类型type表示变量类型，default()则是一个方法（而不是键值对），负责给这个变量赋初始值。
遇到了反撇号。引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。模板字符串名之有理，它为 JavaScript 提供了简单的字符串插值功能，从此以后，你可以通过一种更加美观、更加方便的方式向字符串中插值了。

        var minPrice = this.minPrice
        var totalPrice = this.totalPrice
        if (totalPrice === 0) {
          return `￥${minPrice}元起送`
        } else if (totalPrice < minPrice) {
          return `还差￥${minPrice - totalPrice}元起送`
        } else {
          return '去结算'
        }

需要注意，前两种情形中都可以直接用美元符号加大括号（${}）插入当前语块中的字符串变量，而不需要去用加号"+"来把字符串连起来。

Vue吹

在购物车的开发中，我们只要传入的foodList（即添加进购物车的商品）改变，然后所有的DOM都能随之而动（购物车图标，商品数量上标显示，还差多少钱可以送货等等），实现了数据的沟通共享和联动。如果用DOM+JQuery来做的话，每一个DOM都需要进行判断，开发将会十分繁琐。

添加到购物车

    <!-- .stop阻止单击事件继续传播 -->
    <div class="cart-add icon-add_circle" @click.stop="updateFoodCount(food, true, $event)"></div>

通过调用goods.vue里面的updateFoodCount方法来实现购物车中商品的增/减。这里使用了@click.stop，意思是接受到了click事件就stop了，能够防止不小心多按一下导致下单2件。详见这里

JS的一个特性

虽然能够通过Vue.set(food, 'count', 1)去给food（JSON对象）添加一个它本身不存在的属性，但是其他的组件在使用它的时候（如<div class="cart-count" v-show="food.count">{{food.count}}</div>）并不能够得到这个值。

重点：理解不同Vue组件之间的通信

原文见此

共6种方法，但是目前项目中理解props和data两者足矣。

通常，props的作用是声明从父组件得来的数据（变量、函数），具有props的当前是子组件（相对的）。

而data中初始化数据，然后通过v-bind在DOM中的子组件实例的标签中通过K-V对传播，<template></template>中具有子组件的component标签（如下图），当前是父组件（相对的）。

    <shopcart
		:food-list="foodList"
		:delivery-price="seller.deliveryPrice"
		:min-price="seller.minPrice"
		:update-food-count="updateFoodCount"
		:clear-cart="clearCart"
    ></shopcart>

对应的javascript中的组件

export default {
...
  components: {
    shopcart
  }
}

含泪推荐的找bug神器

transition all 0.4s linear

最后花了三个小时找的bug，竟然是因为忘记在transition的时间后面加上单位：秒（0.4 -> 0.4s）

还是在这个找bug神器代码对比网页中找到错误的。。。

来源：oschina

链接：https://my.oschina.net/swanf/blog/3132351

标签

github

git

Vue.js

re-base