Vue基础知识

1.无人点餐 无人收银系统 多用户点餐 智能打单 在线支付系统介绍

项目介绍：

无人点餐、无人收银系统是一个颠覆传统行业的智能点单系统。无人点单、手机支付、免收银员、免点餐员、免硬件、免布线的一套智能管理系统。

项目功能介绍：

扫码点餐，让每一个桌码都成为您的点餐、收银通道。微信/支付宝扫一扫，不用排队，上桌点餐，多人点餐，自动收银，解放老板娘，减少开支。

无人点餐、无人收银系统主要功能介绍：

1.用VUE和Angular两种语言分别开发，方便不同公司、学员学习使用
2.支持微信、支付宝、浏览器多种扫码工具扫码点餐、
3.系统支持多人扫码点餐，点餐信息通过websocket同步（解决传统点餐的尴尬场景）
4.下单无线打印小票，后厨、服务员同时收到订单信息
5.微信、支付宝在线支付，自动收银，方便大数据分析

适用场景——餐饮店以及KTV

传统中西餐、快餐店、奶茶店、火锅店、咖啡店、甜品店、大排档、酒吧、小吃店、KTV

2.Vue的介绍 Vue环境搭建 运行项目

前端技术薪资介绍

• Html5+Css3+Jquery PC端 移动端静态页面 6k-8k
• Angular 、 Vue 、React 10k+
• Nodejs 13+
• 混合app开发 Ionic ReactNative 15k+

Vue和Angular、React都是前端框架

1. 单页面框架
2. 基于模块化组件化的开发模式

中国人开发很重要——Vue简单 灵活 高效 国内的中小企业里面用的非常多

cnpm——下载包的速度更快一些。

地址：http://npm.taobao.org/

安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建vue的开发环境：

https://cn.vuejs.org/v2/guide/installation.html

1. 必须要安装nodejs

2. 搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具

   npm install --global vue-cli/cnpm install --global vue-cli
   （此命令只需要执行一次）

3. 创建项目 必须cd到对应的一个项目里面

    vue init webpack vue-demo01（创建的时候ESLint选择no,是一个代码检查器）
   
    cd  vue-demo01
   
    cnpm install   /  npm install    如果创建项目的时候没有报错，这一步可以省略。
    如果报错了  cd到项目里面运行  cnpm install   /  npm install
   
    npm run dev
   

4. 另一种创建项目的方式 （推荐） ***

    vue init webpack-simple vuedemo02
   
    cd  vuedemo02
   
    cnpm install   /  npm install
   
    npm run dev
   

3.Vue目录结构分析 绑定数据 绑定对象 循环数组渲染数据

1. cd 到demo里面
2. 安装依赖： cnpm install
3. 运行项目 npm run dev

• node_modules 项目需要的各种模块
• src 配置的各种资源
• index.html html的入口文件
• package.json 项目配置文件
• readme.md 项目介绍文件
• webpack.config webpack的配置文件

<template>html代码
<script>业务逻辑，JS代码
<style>css代码

实例化VUE
VUE的模板里面 所有的内容需要被一个根节点包含起来
所有东西都在<template>中的<div>里面

业务逻辑：
data()——业务逻辑里面定义的数据
绑定数据——{ {msg}}
绑定对象——{ { obj.name}}
绑定数组——数据渲染，数组嵌套

代码示例：

list:['111','222','333'],
　　list1:[
　　　　{'title':'111'},
　　　　{'title':'222'},
　　　　{'title':'333'},
　　　　{'title':'444'}
　　　　],
　　　　list2:[
　　　　  {
           "cate":"国内新闻",
           "list":[
              {'title':'国内新闻111'},
              {'title':'国内新闻222'}
           ]
          },
          {
           "cate":"国际新闻",
           "list":[
              {'title':'国际新闻111'},
              {'title':'国际新闻222'}
           ]
          }
      ]

<ul id="example-1">
         <li v-for="item in list">
            {
  
  { item }}
         </li>
    </ul>
    <br />
    <hr />
    <ul id="example-2">
         <li v-for="item1 in list1">
            {
  
  { item1.title }}
         </li>
    </ul>
    <br />
    <hr />
    <ul id="example-3">
         <li v-for="item2 in list2">
            {
  
  { item2.cate }}
            <ol>
               <li v-for="news in item2.list">
                   {
  
  { news.title}}
               </li>
            </ol>
         </li>
    </ul>`

挂载组件

4.Vue绑定属性 绑定Html 绑定class 绑定style

数据绑定到属性上去

    <div v-bind:title="title">鼠标喵上去看一下</div>
     <img :src="url" />——简写，动态绑定数据

绑定html-让浏览器解析html代码

<div v-html="h"></div>
其中——h:'<h2>我是h2</h2>',

绑定数据另一种方式

    <div v-text="msg"></div>

绑定Class与Style

<v-bind:class   :class的使用>
 <!-- 循环数据 第一个数据高亮 -->
<ul id="example-5">
      <li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}">
          {
  
  {key}}--{
  
  { item }}
      </li>
</ul>

<v-bind:style   :style的使用>
 <div class="box"  v-bind:style="{width:boxWidth + 'px' }">
      我是一个Div
 </div>

style css里面要写东西

<style lang="scss">
.red{
    color:red;
  }

.blue{
    color:blue;
  }

.box{
  height:100px;
  width:100px;
  background: red;
}
</style>

5.Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

自定义方法要放在export default里面

双向数据绑定 MVVM vue是一个MVVM框架
Model改变会影响View View改变反过来影响Model
借鉴Angular
双向数据绑定必须在表单中——input、select

 <input type="text" v-model='msg' />
  <button v-on:click="getMsg()">获取表单里面的数据</button>
  <button v-on:click="setMsg()">设置表单里面的数据</button>

获取表单数据——DOM节点

<hr>横线
<br>换行

ref获取DOM节点

    <input type="text" ref="userinfo" />
   <div ref="box">我是一个box</div>
    <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
    getInputValue(){
       //获取ref定义的dom节点
      console.log(this.$refs.userinfo);
 this.$refs.box.style.background='red';
      alert(this.$refs.userinfo.value);
}

6.Vue事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象

事件对象——可以获取DOM节点

 <button @click="eventFn('$event') ">事件对象</button>
e.srcElement

<br />
    <hr />
    <button v-on:click="run1()">执行方法的第一种写法</button>

    <button @click="run2()">执行方法的第一种写法</button>
    <br />
    <hr />
    <button @click="getMsg()">获取数据-data里面的msg</button>
    <br />
    <hr />
    <button @click="setMsg()">设置数据-data里面的msg</button>
    <br />
    <hr />
    <button @click="setMsg()">设置数据-data里面的msg</button>
    <br />
    <hr />
    <button @click="requestData()">请求数据-data里面的msg</button>
    <br />
    <hr />