Vue基础中的基础+实战
文章平均质量分 55
七三里
代码世界的小白虾!
展开
-
重新启动vue-shop-maseter主支任务
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=62095104_26_oem_dg&wd=npm%20ERR!%20Missing%20script%3A%20%22dev%22&fenlei=256&oq=npm%2520%2526gt%253BRR!%2520Missing%2520script%253A%2520%2526quot%253Bdev%2526quot%253B&rsv_pq=ca15bd1e00065fc3&rsv_原创 2024-03-05 12:54:12 · 158 阅读 · 0 评论 -
Vue无人点餐 无人收银系统
Vue无人点餐 无人收银系统项目功能介绍主要功能介绍必备基础项目功能介绍扫码点餐,不用排队,多人点餐,自动收银,解放生产力,减少开支!主要功能介绍用vue和Angualr两种语言开发;支持微信、支付宝、浏览器多种扫码工具点餐;系统支持多人扫码点餐,点餐信息通过websocket同步(解决传统点餐的尴尬场景);下单无线打印小票,后厨、服务员同事收到订单消息;微信、支付宝支付在线支付...翻译 2019-07-01 20:39:41 · 1638 阅读 · 0 评论 -
00 Vue环境搭建
Vue环境搭建搭建Vue的开发环境1. 必须要安装node.js;2. vue-cli脚手架安装(官方命令行工具)3. 创建项目(必须cd到对应的一个项目里面)搭建Vue的开发环境1. 必须要安装node.js;第一步 node环境安装1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地...原创 2019-07-02 00:15:51 · 137 阅读 · 0 评论 -
01 Vue绑定数据 绑定对象 循环数组渲染数据
Vue绑定数据 绑定对象 循环数组渲染数据Vue绑定数据Vue绑定数据App.vue组件页面中的相关代码如下图:<template> <!-- vue模板里面,所有的内容要被一个根节点包含起来 --> <div id="app"> <h1>{{msg}}</h1> <br> 这是一个根组件 </d...原创 2019-07-03 17:08:56 · 982 阅读 · 0 评论 -
02 Vue绑定属性 绑定Class 绑定style-完整
Vue绑定属性 绑定Class 绑定stylev-bind 绑定属性v-html 绑定htmlv-text 绑定数据v-bind:classv-bind:style完整实验代码:v-bind 绑定属性template模板:<template> <div id="app"> <div v-bind:title="title">鼠标瞄上去看一下</...原创 2019-07-04 00:18:01 · 134 阅读 · 0 评论 -
03 Vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
Vue 双向数据绑定、事件介绍 、以及ref获取dom节点Vue 双向数据绑定(model、view)Vue 事件介绍(v-on:click 或 @click)Vue ref-获取dom节点实例一实例二完整代码如下:Vue 双向数据绑定(model、view)template模板:<template> <div id="app"> <input type=...原创 2019-07-04 11:00:17 · 292 阅读 · 0 评论 -
04 Vue事件 请求数据 执行方法传值 以及事件对象
Vue事件 请求数据 执行方法传值 以及事件对象请求数据执行方法传值事件对象完整代码请求数据实例:template:<template> <div id="app"> <ul> <li v-for="(item,key) in list"> {{key}}===== {{item}} </li> ...原创 2019-07-04 17:38:51 · 555 阅读 · 0 评论 -
05 Vue 事件结合双向数据绑定实现todolist
Vue 实现todolistVue 事件结合双向数据绑定实现todolist1.先实现简单双向绑定,及其事件响应2. 将文本框中的值push进一个数组Vue 事件结合双向数据绑定实现todolist1.先实现简单双向绑定,及其事件响应<template> <div id="app"> <input type="text" v-model="todo"/&...原创 2019-07-04 21:09:50 · 185 阅读 · 0 评论 -
06 Vue todolist 待办事项 已经完成 和进行中
Vue todolist 待办事项 已经完成 和进行中为list数据添加状态,双向绑定、以及键盘回车事件完善代码,css样式美化,完整代码为list数据添加状态,双向绑定、以及键盘回车事件template:<template> <div id="app"> <input type="text" v-model="todo" @keydown="addDat...原创 2019-07-05 18:37:25 · 1974 阅读 · 0 评论 -
07 Vue 中的模块化以及封装Storage实现todolist
Vue 中的模块化以及封装Storage实现todolist使用到的语法点html5中的localStorage本地存储JSON.stringify()、JSON.parse()对象与字符串的相互转化localhost、JSON实现todolist数据存储使用到的语法点html5中的localStorage本地存储实例:使用 localStorage 创建一个本地存储的 name/valu...原创 2019-07-06 17:09:27 · 131 阅读 · 0 评论 -
08 Vue中创建单文件组件 注册组件 以及组件的使用
Vue中创建单文件组件 注册组件 以及组件的使用组件的声明生成组件的引入、挂载及使用组件间的相互嵌套、互相挂载组件的声明生成1.在src目录下新建一个名为components的文件夹,在文件中新建一个文件夹,可命名为Home.vue.<template> <div> <h2>这是一个首页组件</h2> {{msg}} <b...原创 2019-07-07 00:59:43 · 367 阅读 · 0 评论 -
09 Vue中组件的生命周期函数
Vue中组件的生命周期函数生命周期函数:组件挂载、 以及组建更新、组件销毁的时候触发的一系列方法 这些方法叫做声明生命周期函数例如,在上篇文章中,在js代码中加入mounted. mounted() { console.log('我是生命周期函数!'); }运行效果控制台即会刷新自动输出该语句参考链接:...原创 2019-07-08 19:14:48 · 210 阅读 · 0 评论 -
10 vue中使用vue-resource、axios、fetch-jsonp请求数据
vue中使用vue-resource、axios、fetch-jsonp请求数据参考链接:https://blog.csdn.net/weixin_43675447/article/details/88781672转载 2019-07-12 21:36:07 · 145 阅读 · 0 评论 -
11 Vue父组件给子组件传值、传方法
Vue父组件给子组件传值、传方法步骤1.父组件调用子组件的时候,绑定动态属性2.在子组件里面通过props接收父组件传过来的数据父组件传值给子组件的实例Vue父组件给子组件传方法、传整个实例步骤1.父组件调用子组件的时候,绑定动态属性<v-header :title="title"></v-header>2.在子组件里面通过props接收父组件传过来的数据p...原创 2019-07-13 13:30:41 · 1258 阅读 · 0 评论 -
12 父子组件主动获取对方的数据和方法
父子组件主动获取对方的数据和方法父组件主动获取子组件的数据和方法子组件主动获取父组件的数据和方法父组件主动获取子组件的数据和方法1.调用子组件的时候定义一个ref<v-home ref="home"></v-home>2.在父组件里面通过 this.$refs.home.属性 this.$refs.home.方法3.实例Home.vue:<te...原创 2019-07-13 16:12:44 · 129 阅读 · 0 评论 -
13 Vue非父子组件传值
Vue非父子组件传值1.新建一个js文件 然后引入vue 实例化vue 最后暴露实例2.在要广播的地方引入刚才定义的实例3.通过VueEmit.$emit('名称','数据')4.在接收数据的地方通过 $on 接收广播的数据完整代码:1.新建一个js文件 然后引入vue 实例化vue 最后暴露实例在src目录下,新建一个model目录,并创建VueEvent.js文件。// 引入一个空的Vu...原创 2019-07-13 18:48:11 · 87 阅读 · 0 评论 -
14 Vue中的路由 以及默认路由跳转
vue路由配置1.安装2.在main.js中引入并Vue.use(VueRouter)3.配置路由(main.js)1.创建组件、引入组件2.定义路由(建议复制)3.实例化VueRouter4.挂载5.根组件的模板里面放上:4.路由跳转5. 重定向和别名,实现默认加载1.安装npm install vue-router --save / cnpm install vue-router --s...原创 2019-07-13 21:38:08 · 198 阅读 · 0 评论 -
15 Vue动态路由以及Get传值
Vue动态路由以及Get传值1.不同路由传值:动态路由1.配置动态路由2.获取动态路由的值3.实例2.Get方法传值1.不同路由传值:动态路由1.配置动态路由routes:[ //动态路径参数 以冒号开头 { path: '/user/:id', component: User }]2.获取动态路由的值在相应的页面中,使用> this.$routes.params获取动态...原创 2019-07-15 00:08:58 · 107 阅读 · 0 评论 -
16 Vue路由结合请求数据 实现新闻列表 新闻详情数据渲染
效果图:新闻列表新闻详情目录结构注意点:1.在index文件中,配置适应手机<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">2.在assets下面写的通用的cssbasic.scss...翻译 2019-07-15 16:57:06 · 895 阅读 · 1 评论 -
17 Vue路由编程式的导航 以及vue路由History 模式 hash 模式
Vue路由编程式的导航 以及vue路由History 模式 hash 模式编程式导航,使用js实现路由跳转History 模式 hash 模式编程式导航,使用js实现路由跳转一种跳转方式:this.$router.push('/news');this.$router.push('content/499');另一种跳转方式:{ path: '/news', component: N...原创 2019-07-16 10:11:43 · 178 阅读 · 0 评论 -
18 路由的嵌套
1.配置路由 { path: '/user', component: User, children:[ { path: 'useradd', component: UserAdd }, { path: 'userlist', component: Userlist } ] }2.父路由里面配置子路由显示的地方<ro...原创 2019-07-16 20:28:02 · 96 阅读 · 0 评论 -
19 Vue UI框架Mint UI的使用 button 索引列表 ActionSheet等
mintUI的使用:1.找官网2.安装 npm install mint-ui -S -S表示 --save3.引入mint Ui的css 和 插件 import Mint from 'mint-ui'; Vue.use(Mint); import 'mint-ui/lib/style.css'...原创 2019-07-17 19:30:40 · 274 阅读 · 0 评论 -
20. Vue UI框架 ElementUi的使用 以及webpack.config.js配置
1.对于element UI 的简单说明基于Vue的UI框架 => 饿了么公司基于vue开的的vue的Ui组件库 => Element Ui 基于vue pc端的UI框架官网 => http://element.eleme.io/2.element UI的使用(1)找官网 http://element.eleme.io/#/zh-CN/component/q...原创 2019-08-11 21:15:41 · 964 阅读 · 0 评论 -
21.Vuex状态管理
1.Vuex的简单理解Vuex => 状态管理模式 => 解决组件之间同一状态的共享问题不同组件的行为需要变更同一状态采用集中式存储管理应用的所有组件的状态组件通讯 => 共享数据更新 => 数据共享,数据持久化适用范围: 大项目2.Vuex的使用(1)src目录下面新建一个vuex的文件夹(2)vuex 文件夹里面新建一个store.js(3)安装vu...原创 2019-08-12 16:49:43 · 88 阅读 · 0 评论