Vue+mintUI+Element（vscode)入门学习

Vue 与Angular实现无人点餐无人收银系统

项目功能介绍
1，用Vue和Angular两种语言分别开发，方便不同公司，学员学习使用
2，支持支付宝，微信，浏览器多种工具扫码点餐
3，系统支持多人扫码点餐，点餐信息通过websocket同步（解决传统点餐的尴尬场景）
4，下单无线打印小票，后厨服务员同时收到订单信息
5，微信，支付宝在线支付，自动收银，方便大数据分析
对象：餐饮店以及KTV点单
必备基础知识
1，html，js，css基础
2，Vue基础以及Angular基础
vue和angular，react都是前端框架
1，单页面框架
2，基于模块化组件化的开发模式

搭建Vue的开发环境

1，必须安装node.js
2, 搭建Vue的开发环境，安装Vue的脚手架工具，官方命令工具

     npm install--global vue-cli

3， 创建项目.

1. cd 命令进入创建的工程目录，首先cd 自己建工程的名字

2. 安装项目依赖：因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

   npm  install
   

3. 安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：

   cnpm install vue-router  vue-resource --save
   

4. 启动项目，输入：

   npm run dev
   

vscode快捷键

Ctrl+Shift+P,F1 展示全局命令面板（资源管理器）
Ctrl+P （搜索）
Ctrl+Shift+N 打开新的编辑器窗口
Ctrl+Shift+W 关闭编辑器
Alt + up/down 移动行上下
Shift + Alt up/down 选择在当前行上下
Ctrl + Shift + Enter 在当前行上插入新的一行
Ctrl + Shift + | 匹配花括号的闭合处，跳转
Ctrl + ] 或 [ 行缩进
Home 光标跳转到行头
Ctrl + Home 跳转到页头
Ctrl + up/down 行视图上下偏移（同时移动滚动条和光标）
Alt + PgUp/PgDown 屏视图上下偏移
Ctrl + Shift + [ 折叠区域代码
Ctrl + Shift + ] 展开区域代码
Ctrl + / 添加关闭行注释
导航快捷键
Ctrl + G 跳转行
Ctrl + P 跳转文件
Ctrl + Shift + O 跳转到符号处
Ctrl + Shift + M 或 Ctrl + J 打开问题展示面板
F8 跳转到下一个错误或者警告
Shift + F8 跳转到上一个错误或者警告
Ctrl + Shift + Tab 切换到最近打开的文件
Alt + left / right 向后、向前
Ctrl + F 查询
Ctrl + H 替换
F3 / Shift + F3 查询下一个/上一个
Alt + Enter 选中所有出现在查询中的
Ctrl + D 匹配当前选中的词汇或者行，再次选中-可操作

多行光标快捷键
Alt + Click 插入光标-支持多个
Ctrl + Alt + up/down 上下插入光标-支持多个
Ctrl + U 撤销最后一次光标操作
Shift + Alt + I 插入光标到选中范围内所有行结束符
Ctrl + I 选中当前行
Shift + Alt + right 从光标处扩展选中全行
Shift + Alt + left 收缩选择区域
Ctrl + Shift + Alt + PgUp/PgDown 也是插入多行光标的[整屏生效]
Esc Esc 连续按两次Esc键取消多行光标
Shift + Alt + F 格式化代码
F12 跳转到定义处
Alt + F12 代码片段显示定义
Ctrl + K F12 在其他窗口打开定义处
Ctrl + . 快速修复部分可以修复的语法错误
Shift + F12 显示所有引用
F2 重命名符号

编辑器管理快捷键
Ctrl + F4, Ctrl + W 关闭编辑器
Ctrl + |切割编辑窗口
Ctrl + 1/2/3 切换焦点在不同的切割窗口
Ctrl + Shift + PgUp/PgDown 切换标签页的位置

文件管理快捷键
Ctrl + Shift + S 另存为
Ctrl + F4 关闭当前编辑窗口
Ctrl + W 关闭所有编辑窗口
Ctrl + Shift + T 撤销最近关闭的一个文件编辑窗口
Ctrl + Enter 保持开启
Ctrl + Shift + Tab 调出最近打开的文件列表，重复按会切换
Ctrl + Tab 与上面一致，顺序不一致
Ctrl + P 复制当前打开文件的存放路径、
Ctrl + R 打开当前编辑文件存放位置【文件管理器】

显示快捷键
F11 切换全屏模式
Ctrl + =/- 放大 / 缩小
Ctrl + B 侧边栏显示隐藏
Ctrl + Shift + E 资源视图和编辑视图的焦点切换
Ctrl + Shift + F 打开全局搜索
Ctrl + Shift + G 打开Git可视管理
Ctrl + Shift + D 打开DeBug面板
Ctrl + Shift + X 打开插件市场面板
Ctrl + Shift + H 在当前文件替换查询替换
Ctrl + Shift + J 开启详细查询
Ctrl + Shift + V 预览Markdown文件【编译后】
Ctrl + K v 在边栏打开渲染后的视图【新建】

调试快捷键
F9 添加解除断点
F5 启动调试、继续
F11 / Shift + F11 单步进入 / 单步跳出
F10 单步跳过

vue

目录结构分析，数据绑定，绑定属性，循环渲染数据，数据渲染

  <template>
  <div id="app">
    <h2>{{msg}}h2>
    <h3>{{obj.name}}h3>
    <br />
    <hr />
    <br />
    <ul>
      <li v-for="item in list">{{item}}li>
    ul>

    <br />
    <hr />
    <ul>
      <li v-for="item1 in list1">{{item1.title}}li>
    ul>

    <br />
    <hr />
    <ul>
      <li v-for="item2 in list2">
        {{item2.cate}}
        <ol v-for="item3 in item2.list3">{{item3.title}}ol>
      li>
    ul>
  div>
template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "你好，vue",
      obj: {
        name: "sammul"
      },
      list: ["111", "222", "333"],
      list1: [
        { title: "1111" },
        { title: "2222" },
        { title: "3333" },
        { title: "4444" },
        { title: "5555" }
      ],
      list2: [
        {
          cate: "啦啦啦",
          list3: [{ title: "1111" }, { title: "2222" }, { title: "3333" }]
        },
        {
          cate: "啦啦啦",
          list3: [{ title: "1111" }, { title: "2222" }, { title: "3333" }]
        },
        {
          cate: "啦啦啦",
          list3: [{ title: "1111" }, { title: "2222" }, { title: "3333" }]
        }
      ]
    };
  }
};
script>
 <style>
style>

数据绑定

1，{{}}
2，v- 例：v-text=“msg”

属性绑定

v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）
完整语法：，解释：v-bind 是指令，: 后面的 class 是参数
缩写语法：，解释：: 后面的 class 是参数
两种方式
(1)v-bind：title=“title”
v-bind：src=“url”
(2):src=“url”

<template>
<div>
  <p>{{title}}</p>
  <span v-bind:value="first">{{text}}</span>
</div>
</template>
<script>
    export default {
        name: "v-bindLearn",
        data() {
          return {
            title: "v-bind学习",
            first: "span1",
            text: "绑定一个属性"
          }
        }
    }
</script>

HTML绑定

<template>
     <div v-html="h">
     </div>
</template>
<script>
   data() {
       return {
            h:'
我是一个h2
'
         }     
    };
</script>

vue双向数据绑定 vue中的ref获取dom节点

双向数据绑定（mvvm）

(必须在表单中使用） vue就是mvvm框架
 M：model    V:view
 MVVM：model改变会影响view，view改变也会影响model

例：


vue事件和方法

方法

  methods（）{
  方法名：function（）{}，//写方法第一种方法
  方法名（）{}，//写方法第二种方法
  }

事件

 1，v-on：click=“方法名” 
 2，@click=“方法名”

 <template>
       <input type="text" ref="userinfo"/>
 </template>
 <script>
   data() {
        
    },methods（）{
	getinputvalue(){
	console.log(this.$refs.userinfo);
	}
	}
 </script>

改变data里面的msg

方法名（）{
this.msg;
} 
@click=“方法名（$event）”
方法名（e）{
}

事件对象($event)：获取dom节点，获取自定义属性

 <template>
      <div id="root">
        <h1 @click="handleClick">{{msg}}</h1>
    </div>
 </template>
  
    <script>
            new Vue({
                el:"#root",
                data: {
                    msg:"hello dog!",
                    number: 123
                },
                methods: {
                    handleClick: function() {
                        // alert(123)
                        this.msg = "twodoge"
                    }
                }
            })
        </script>

vue-todolist完整–最简单代办事项列表

this.list.push(" ");//增加list
list索引值：key
push：赋值
this.list.splice(key,1);//删除list

<template>
  <div id="app">
    
    <hr />
    <input type="text" v-model="userinfo" @keyup="getmodel($event)" />
    <!-- <button @click="getmodel()">+增加</button> -->
    <br />
    <h2>未完成</h2>
    <hr />
    <ul>
      <!-- 通过循环添加或者删除list -->
      <li v-for="item4 in list4" v-if="!item4.checked"> 
        <div>
          <input type="checkbox" v-model="item4.checked" />
          {{item4.title}}
          <button @click="delmodel(key)">---删除</button>
        </div>
      </li>
    </ul>

    <br />
    <h2>已完成</h2>
    <hr />
    <ul>
      <!-- 判断checked -->
      <li v-for="item4 in list4" v-if="item4.checked">
        <div>
          <input type="checkbox"  v-bind="savelist()"  v-model="item4.checked" />
          {{item4.title}}
          <button @click="delmodel(key)">---删除</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Storage from "./model/Storage.js";//封装操作localStorage（本地缓存）方法
export default {
  name: "App",
  data() {
    return {
      userinfo: "",
      list4: []
    };
  },
  methods: {
    getmodel(e) {
      if (e.keyCode == 13) {//回车键（事件对象）keycode：13
        this.list4.push({
          title: this.userinfo,
          checked: false
        });
        this.userinfo = "";
      }
      Storage.set('list4', this.list4);
    },
    delmodel(key) {
      this.list4.splice(key, 1); //删除list
      Storage.set('list4', this.list4);
    },//删除事项
    savelist() {
      Storage.set('list4', this.list4);
    }//保存缓存事项
  },
  mounted() {
    var list4 = Storage.get("list4"); //反序列化
    if (list4) {
      /*注意判断*/
      this.list4 = list4;
    }
  }
};
</script>
 <style>
</style>

v-if:判断语句
. check:选择框状态判断
@keyup，@keydown 监听鼠标事件
回车键（事件对象）keycode：13

转换为json缓存数据： localStorage.getItem('list',JSON.stringify(this.list));

封装js
****封装操作localStorage（本地缓存）方法
新建文件：model 文件里建js文件
js文件（node.js基础）：

var Storage={ 
			     set(key,value){
				     localStorage.setItem(key,JSON.stringify(value));//序列化
					 },
					 get(key){
					 return JSON.parse(localStorage.getItem(key));
				 }，remove(key){
				    localStorage.removeItem(key); 
				 }
		 }

引入方法：
script里面： import Storage from './model/Storage.js';

vue组件（树型）以及生命周期函数

路由可以动态挂载组件
新建文件夹componets装载组件
在文件夹中建立 .vue文件
所有内容都要被根节点div包含

APP.vue 挂载根组件

 1.引入组件
  import 组件名 from 路径
 2.挂载组件
 data同级 
 componets：{
 '标签名':组件名，
 }
 3.在模板中引用