vue初识(vue+elementUl点菜小应用)

vue初识

Vue.js，它是一套用于构建用户界面的框架，它是只关注于视图层。也是基于组件式的开发的思想。数据驱动视图。释放了对dom的操作，让dom可以随着数据的变化而变化。在开发过程中，不必过多的关注dom的操作，只需要把精力集中在数据上，就可以了。

它主要使用基于html的模板语法，可以声明式的把dom绑定到vue的实例上，写的所有的代码都是合法的html，所以不用像reactJs一样再去搞什么jsx。

Vue-cli，它是官方出品的，快速构建单页应用的脚手架。

1你要安装nodejs；

2、npm install -g vue-cli

3、在你的电脑中，创建一个工作目录，

用来存放你的vue的项目

4、在你的工作目录中，打开控制台，

输入，

vue init webpack vuetest

// vuetest，是你的项目名，随便起的，但是不能有大写字母

接下来的提示是，

To get started:

cd vue-test-pro，

npm install (or if using yarn: yarn)

npm run dev

src目录当中，main.js，是项目的入口文件

new Vue，

声明式的把dom绑定到vue的实例上，el就是element的缩写，意思就是把 app这个dom，

绑定在 new 出来的vue的实例上 -->

router,
//
components: { App },
//
template: ‘’

})

<!-- vue中，组件的结构 -->

三部分组成，

  \- 模板，template，其实就是html

  \- js，script

  \- 样式，style

也就是说，vue组件，把html、js、css，放在一个文件里了。

要注意，在vueJs当中，组件文件的后缀名是 .vue，

在vue当中，

import HelloWorld from '@/components/HelloWorld'

@/，是src目录的根目录的意思。从src为根目录的components目录中，引入了HelloWorld.vue这个文件。

其实就是引入了HelloWorld组件，

在引入的时候，不用写 .vue

```javascript
export default new Router({

 routes: [
  {
 path: '/',
  // !-- 组件名是，HelloWorld -->
   name: 'HelloWorld',
  //要展示的组件是，HelloWorld 
   component: HelloWorld
}
 ]
})

< 引入路由之后，

在app组件中，以的形式引入；

，它其实是一个容器，

它用于展示，路由当中所配置的组件。

< 数据绑定>

{{}}，把数据插入到html当中，

– vue当中有很多的指令，

v-，开头的

v-html，用于输出内容到html中

v-show，用于显示、隐藏dom节点。它是隐藏dom节点

v-if，它也可以用于显示、隐藏dom节点。它是不渲染dom节点

v-on，它可以在dom节点上绑定一个事件，

简写：@

methods中定义的函数，里面的this，

指向的是当前的vue的实例。

ref，用于在vue当中【标识】一个dom节点，它的功能和id是一样的

this.$refs.ref的名字，这就获得了一个dom节点

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

elementUI，是饿了么团队出品的应用于vue的第三方框架，可以快速的开发vue的ui界面应用。让我们把精力更多的集中的业务逻辑上面。

官网：https://element.eleme.cn/#/zh-CN
npm install element-ui -save
1、在main.js中，写入以下内容：
import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;

Vue.use(ElementUI);
它们的基本的思想是，页面的栅格化。栅格化，最初始是由淘宝提出的，思想是把整个页面，均分为24列。

最开始践行这个思想的前端构架是，bootstrap，bootstrap，它的黄金时代是和jQuery一起工作。它在现在已经不是特别的流行了。

elementUI这一类的框架，其实都是基于bootstrap的。所以，elementUI它也是把整个页面均分为24列，就是说，你任何一个容器，它的宽度都是n列，最宽就是24列；它是24列，不是具体的页面的宽度，它是页面的划分的比例。，有一个名称叫“响应式页面布局”。

，这是一整个的横列，类似于一个div

，它是横列当中的某一个格，类似于div中的一个li
，
意思是说，宽度是100%

< vue 指令
v-model，双向绑定，
就是数据变化，dom同时也变化

v-bind，绑定属性，它就是添加属性的，
用法：v-bind:属性名
简写是，:属性名

v-for，这个就是vue里面的for循环
格式

<div v-for="n in obj"> {{i}} </div>

这个里面的n，就和下面的i是一样的，只是用于当前它所在的那个v-for循环里。for(var i in obj){}

<-- 过滤方法 -->
filter方法其实就是一个for循环，它用于过滤，数组或对象，

_g，arr数组当中的某一个成员，
_g.goodsId，就是_g的一个属性,
_goodsObj.goodsId，是某一个值，

意思是说，当数组中的某一个成员，和一个条件(在本例中就是_goodsObj.goodsId)，相等时，就返回数组中的某一个成员。
<-- filter的条件，你可以自定义 -->

arr.filter( _g => _g.goodsId == _goodsObj.goodsId )

//vue+elementUl点菜小应用
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
    <el-row>

      <el-col :span="7">
        <el-tabs>
            <el-tab-pane label="点菜">
              <el-table v-bind:data="tableData">
                <el-table-column prop="foodsName" label="商品"></el-table-column>
                <el-table-column prop="count" label="数量"></el-table-column>
                <el-table-column prop="price" label="金额"></el-table-column>
                <el-table-column label="操作">

                  <template slot-scope="scope">
                    <el-button type="text" size="small" 
                        @click="addOrderList(scope.row)">增加</el-button>
                    <el-button type="text" size="small" 
                        @click="delGoods(scope.row)">删除</el-button>
                  </template>

                </el-table-column>
              </el-table>

              <div style="margin-top:20px;">
                  <el-button type="primary" plain @click="emptyShopCar">删除</el-button>
                   <el-button type="success" plain @click="payMoney">结账</el-button>
              </div>

               <div>
                    <label>数量：{{totalCount}} </label>
                    <span> 金额：{{totalMoney}} </span>
                </div>

            </el-tab-pane>
            <el-tab-pane label="外送">外送</el-tab-pane>
            <el-tab-pane label="自取">自取</el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span="17">
        <div class="daily-goods">
          <div class='title'>日常商品</div>

          <div class="daily-goods-list">
              <ul>
                <li v-for="goods in oftenGoods" @click='addOrderList(goods)'>
                    <span> {{ goods.foodsName }} </span>
                    <span> {{ goods.price }}元 </span>
                </li>
              </ul>
          </div>

          <div class="goods-type">
             <el-tabs>
                <el-tab-pane label="汉堡">
                  <ul class="cookList">
                    <li v-for="goods in foods_type" @click='addOrderList(goods)'>
                        <span class="foodImg">
                          <img v-bind:src="goods.goodsImg" width='100%' />
                        </span>
                        <span class="foodName"> {{goods.foodsName}} </span>
                        <span class="foodPrice"> ￥{{goods.price}}元 </span>
                    </li>
                  </ul>
                </el-tab-pane>

                <el-tab-pane label="茶蛋">
                  <ul class="cookList">
                    <li v-for="goods in foods_type1" @click='addOrderList(goods)'>
                        <span class="foodImg">
                          <img v-bind:src="goods.goodsImg" width='100%' />
                        </span>
                        <span class="foodName"> {{goods.foodsName}} </span>
                        <span class="foodPrice"> ￥{{goods.price}}元 </span>
                    </li>
                  </ul>
                </el-tab-pane>

                <el-tab-pane label="饮料">
                  <ul class="cookList">
                    <li v-for="goods in foods_type2" @click='addOrderList(goods)'>
                        <span class="foodImg">
                          <img v-bind:src="goods.goodsImg" width='100%' />
                        </span>
                        <span class="foodName"> {{goods.foodsName}} </span>
                        <span class="foodPrice"> ￥{{goods.price}}元 </span>
                    </li>
                  </ul>
                </el-tab-pane>

                <el-tab-pane label="可乐">
                  <ul class="cookList">
                    <li v-for="goods in foods_type3" @click='addOrderList(goods)'>
                        <span class="foodImg">
                          <img v-bind:src="goods.goodsImg" width='100%' />
                        </span>
                        <span class="foodName"> {{goods.foodsName}} </span>
                        <span class="foodPrice"> ￥{{goods.price}}元 </span>
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
          </div>

        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {
  name: 'Slider',
  data () {
    return {
      msg: 'vue+elementUI，点菜应用',
      totalCount:0,
      totalMoney:0,


      // 这是已经选择的商品，开始时为空
      tableData: [],

      // 日常商品
      oftenGoods:[
        {
                  goodsId:2,
                  foodsName:'汉堡22',
                  price:15
              }, {
                  goodsId:3,
                  foodsName:'汉堡33',
                  price:15
              }, {
                  goodsId:4,
                  foodsName:'汉堡44',
                  price:80
              }, {
                  goodsId:5,
                  foodsName:'汉堡55',
                  price:10
              }, {
                  goodsId:6,
                  foodsName:'汉堡66',
                  price:20
              }, {
                  goodsId:7,
                  foodsName:'汉堡77',
                  price:10
              }, {
                  goodsId:8,
                  foodsName:'汉堡88',
                  price:18
              }, {
                  goodsId:9,
                  foodsName:'汉堡99',
                  price:15
              }, {
                  goodsId:10,
                  foodsName:'汉堡666',
                  price:17
          }],

          foods_type:[
            {
                goodsId:11,
                goodsImg:"http://pic2.16pic.com/00/05/57/16pic_557962_b.jpg",
                foodsName:'汉堡xxx11',
                price:18
            }, {
                goodsId:12,
                goodsImg:"https://gd3.alicdn.com/imgextra/i3/2485892750/TB2x9RFbNXlpuFjSsphXXbJOXXa_!!2485892750.jpg",
                foodsName:'汉堡xxx22',
                price:15
            }, {
                goodsId:13,
                goodsImg:"http://file06.16sucai.com/2016/0301/3e5a68f7afd2f172577dba8e847b41d0.jpg",
                foodsName:'汉堡xxx33',
                price:15
            }
         ],
         foods_type1:[
            {
                goodsId:14,
                 goodsImg:"http://file06.16sucai.com/2016/0301/59cf0b8f830895bdb2b1cde6d2bbd78e.jpg",
                foodsName:'汉堡xxx44',
                price:80
            }, {
                goodsId:15,
                 goodsImg:"http://pic2.16pic.com/00/05/57/16pic_557962_b.jpg",
                foodsName:'汉堡xxx11',
                price:10
            }
         ],
         foods_type2:[
            {
                goodsId:16,
                 goodsImg:"http://file06.16sucai.com/2016/0301/59cf0b8f830895bdb2b1cde6d2bbd78e.jpg",
                foodsName:'汉堡xxx22',
                price:20
            }
         ],
         foods_type3:[
            {
                goodsId:17,
                goodsImg:"https://gd3.alicdn.com/imgextra/i3/2485892750/TB2x9RFbNXlpuFjSsphXXbJOXXa_!!2485892750.jpg",
                foodsName:'汉堡xxx433',
                price:10
            }, {
                goodsId:18,
              goodsImg:"http://file06.16sucai.com/2016/0301/3e5a68f7afd2f172577dba8e847b41d0.jpg",
                foodsName:'汉堡xxx55',
                price:18
            }, {
                goodsId:19,
                 goodsImg:"http://pic2.16pic.com/00/05/57/16pic_557962_b.jpg",
                foodsName:'汉堡xxx66',
                price:15
            }
         ]
    }
  },
  methods:{
      // 增加商品
      addOrderList( _goodsObj ){
        // console.log(n)
        // 某商品是否已经存在的标识
        let _is = false;
        //判断整个订单列表当中，是否已经存在某个商品
        for(let i=0; i<this.tableData.length; i++){
          if( this.tableData[i].goodsId === _goodsObj.goodsId ){
            // 订单中已经有相同的商品了，就不必再继续循环
            _is = true;
            break;
          }
        }
        // 如果存在，_is为true，过滤出已经存在的商品，就是比较id号
        if( _is ){
           let _temp = this.tableData.filter( _g => _g.goodsId == _goodsObj.goodsId )
           // console.log( _temp );
           _temp[0].count++;
        } else {

          // 如果商品不存在
          let newGoods = {
                goodsId:_goodsObj.goodsId,
                foodsName: _goodsObj.foodsName,
                price:_goodsObj.price,
                count : 1
            }
          this.tableData.push( newGoods )
        }
        // 总金额计算
        this.getAllMoney();
      },
      // 删除单个商品，
      // 要先这么记，这里有点绕，.filter只返回符合条件的，
      delGoods( _goodsObj ){
          this.tableData = this.tableData.filter( _g => _g.goodsId != _goodsObj.goodsId )
      },
      // 删除所有商品
      emptyShopCar(){
          this.tableData = []
      },
      // 总金额计算，这种地方，你们要多想想
      getAllMoney(){
        // 每次计算所有商品，所以要归0
          this.totalCount = 0;
          this.totalMoney = 0;
          if( this.tableData ){
              this.tableData.forEach( _n =>{
                  // console.log( _n )
                  this.totalCount += _n.count;
                  this.totalMoney = this.totalMoney + ( _n.price * _n.count );
              })
          }
      },
      // 结账，这里就是一个弹出窗口的模拟 ，咱们没有支付接口
      payMoney(){
          this.$alert(`商品数量：${ this.totalCount }
                            总价：${ this.totalMoney }`, 
                      '结账', {
              confirmButtonText: '确定',
              callback: () => {
                this.$message({
                  message: `感谢支付，下次再见！`
                });
              }
            });
          this.tableData = [];
          this.totalCount = 0;
          this.totalMoney = 0;
      }
  }
}
</script>