TanYanjie456
TanYanjie456

Vue基础知识

文章目录

  • 1.无人点餐 无人收银系统 多用户点餐 智能打单 在线支付系统介绍
    • 项目介绍：
    • 项目功能介绍：
    • 无人点餐、无人收银系统主要功能介绍：
    • 适用场景——餐饮店以及KTV
  • 2.Vue的介绍 Vue环境搭建 运行项目
      • cnpm——下载包的速度更快一些。
      • 搭建vue的开发环境：
  • 3.Vue目录结构分析 绑定数据 绑定对象 循环数组渲染数据
      • 代码示例：
  • 4.Vue绑定属性 绑定Html 绑定class 绑定style
  • 5.Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
        • 自定义方法要放在export default里面
        • 获取表单数据——DOM节点
  • 6.Vue事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象
        • 事件对象——可以获取DOM节点
        • 方法函数：
  • 7.Vue 事件结合双向数据绑定实现todolist
        • addData()
        • deleteData()
  • 8.Vue 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中
  • 9.Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化
  • 10.Vue中创建单文件组件 注册组件 以及组件的使用
        • App.vue---根组件
  • 11.Vue中组件的生命周期函数
  • 12.Vue vue-resource 请求数据
    • VUE请求数据：
      • 官方：vue-resource 官方插件
      • 非官方也可以使用的插件
  • 13.Axios fetchJsonp请求数据
      • axios使用：
  • 14.Vue父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
      • 父组件给子组件传值：
  • 15.父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
  • 16.Vue非父子组件传值
        • 非父子组件传值：
        • 复杂情况考虑专门的状态管理模式
  • 17.Vue中的路由 以及默认路由跳转
  • 18.Vue动态路由 Get传值
        • 路由之间的传值：动态路由：
  • 19.Vue路由结合请求数据 实现新闻列表 新闻详情数据渲染
  • 20.Vue路由编程式的导航 以及vue路由History 模式 hash 模式
  • 21.Vue中路由的嵌套
  • 22.Vue UI框架Mint UI的使用 button 索引列表 ActionSheet等
  • 23.Vue UI框架Mint Ui infinite-scroll结合api接口实现真实上拉分页加载更多
  • 24.Vue UI框架 ElementUi的使用 以及webpack.config.js配置
          • element UI组件的单独使用（第一种方法）：
          • element UI组件的单独使用（第二种方法）：
  • 25.Vue UI框架 ElementUi 按需引入
        • 按需引入
  • 26.vue 路由模块化
  • 27.Vuex 的使用 State Mutation 实现多个页面共享计数
      • vuex的使用：
      • 组件里面使用vuex：
  • 28.Vuex 的使用 State Mutation Getter Action 以及实现不同组件新闻数据共享 以及新闻数据的持久化
      • vuex的使用：
      • 组件里面使用vuex：

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的配置文件