刚学vue，写的一个入门demo，时光网

最新推荐文章于 2022-08-09 10:07:19 发布
最新推荐文章于 2022-08-09 10:07:19 发布
阅读量121 收藏
点赞数
文章标签： javascript webpack ViewUI
原文链接：https://segmentfault.com/a/1190000009862739
版权

  • vue写的一个移动端时光网

刚学vue不久，动手写了一个demo。

  • 源代码

源代码地址：GitHub

  • 技术栈

vue2 + vuex + vue-router + webpack + ES6 + scss + flex

  • api接口
    有人收集的API 加上自己去官网找的

  • 截图
    图片描述

图片描述
图片描述
图片描述

  • 总结

因为是初学vue，demo有点简陋，海涵。也希望通过实践将vue应用到项目中，欢迎start

weixin_34377065
关注
Vue.js 入门 demo1
菜鸟小铭的博客
06-15 619
Vue.js 入门 学习 vue.js 需要 HTML CSS JavaScript 和 AJAX 的基础 Vue 是一个 JavaScript 框架，能够简化 Dom 的操作，并且可以相应式的数据驱动 Vue 的作者是中国人尤雨溪！ 这篇笔记的内容 解释 el 挂载点，也就是挂载了这个元素及其子元素可以使用 vue 里面的各种属性和方法 data 储存这个 vue 实例里面的数据 methods 储存这个 vue 实例里面的方法 v-text 或 {{ message }}
Vue 学习01——简介和菜鸟级入门【最简单的vue-demo实战】
Sicily_winner的博客
04-15 769
✎Vue入门介绍 ①三足鼎力 ②什么是MVVM ◆Vue的简单使用 ①CDN篇 ◆总结 ◆最终代码参考 Vue入门介绍 三足鼎力 现在市面最流行的前端三大框架，各自有各自的特点。但有一个共同特点，他们均是MVVM框架。 vue可以当成jquery来使用。 什么是MVVM Vue的简单使用 C...
vue写的个小demo
11-13
vue vue-cli mock写的一个demo，实现了一小部分功能。
vue 2.0写的一个小demo
12-19
项demo中基本用到所有Vue的基本功能,比如,双向绑定,渲染列表,数据绑定,组件,自定义指令,消息传递,条件渲染等,运行方法见 readme
vue中指令写了一个demo
weixin_30376323的博客
01-25 94
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> <link rel="stylesheet" href="vlib/css/index.css"> &lt...
移动开发【7】 Vue写的一个小demo
椰子奶糖的博客
07-04 1269
源码地址 求求了施舍一个star吧 说明： 这个只是vue的一个网页demo，非常乱，API也没有统一封装，拼拼凑凑的这么一个东西。 效果展示 参考报告下载地址 参考报告
Vue新建一个demo项目
午夜安全
09-12 1196
Vue新建一个demo项目 Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 1.安装node.js 首先下载安装node.js，如果已安装可以跳过，下载地址：https://nodejs.org/en/ 需要注意：按照提示一步步安装即可，其中可以选择...
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
Vue.js学习-搭建一个简单的demo
热门推荐
ch648966459的专栏
02-11 2万+
原创申明：本文为博主原创，转载请注明出处！ 这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明：本次搭建基于Win 7平台 Node.js 安装 官网提供了支持多种平台的的LTS版本下载，我们根据需要来进行下载安装。对于Windows平台提供了.mis和.zip(二进制)两种选择，我们可以根据自己需要任选一种安装。具体安装过程就不详说。 注...
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的...
Vue入门——用Vue创建一个HelloWorld
weixin_44493195的博客
06-01 3290
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统！ 如何创建HelloWorld程序 Step1：创建一个id为app的div标签 <div id="app"></div> Step2：在div当中用左右为双括号的方式声明一个变量message。 <div id="app"> {{message}} </div> 上述两步是vue.js最常见的一种文本查值的方式。 Step3：在sricpt脚本中创建vue实例（对象
vue的项目搭建demo
Hacker-Prince
09-11 2606
一、安装node环境 　　1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 　　 　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 　　 　　检查是否安装成功：
写一个vue小demo
weixin_43487804的博客
03-10 578
写一个vue小demo 从数据库中查新和修改数据显示到页面 创建sql DROP TABLE IF EXISTS user; CREATE TABLE user ( id int(11) NOT NULL AUTO_INCREMENT, age int(11) DEFAULT NULL, username varchar(20) DEFAULT NULL, PASSWORD varchar(50)...
【Vue项目复习笔记】详情页的展示
qq_40992225的博客
08-09 5003
1、点击商品跳转到详情页 当我们点击GoodListItem中的每一个item，就跳转到对应的页面。我们首先要做的就是监听GoodsListItem的点击 在GoodsListItem组件中 在methods中跳转到对应的详情页 我们可以先给详情页配置一个路由 新建datail文件夹，新建Detail.vue，然后在router的index.js里面配置与路由相关的信息 但是我们在跳转详情页的时候还需要传递一些参数，需要把点击商品的id拿到，然后根据这个id去请求更加详细的数据。这个id也就是下面对应商品的
VUE（一）.创建一个VUE Demo示例
Rooney的学习笔记
08-14 4681
今天开始，了解VUE的使用，权当是学习笔记。 本篇是VUE的第一个学习笔记，从VUE的开发环境准备，到第一个Hello VUE的创建完毕，来说起... 1、由于VUE项目依赖于Node.js，因此先要装上Node.js。 安装过程不多说，安装完毕之后，命令行输入： node -v，输出版本信息，表示安装成功； npm 全名为Node Package Manager，是Node.js 的套件...
记初学vue完成的第一个demo
silenmm的博客
08-07 8221
7.5来到苏小研报道，7.10正式参加实习工作，布置的任务要求就是熟悉vue框架，然后按要求完成一个demo。从最初的慌，懵到此刻的静，定，这一个月的学习还是很有收获的，特记录一下。项目地址：https://github.com/happy8silence/PMO.git。项目运行：npm install npm run serve 这个项目的技术栈是vue+vuex+vue-router+a...
简单的vue小demo
Young的博客
04-14 2390
这里有几个小demo大家可以看下，自己对比学习，简单的操作下vue对理解还是比较快的 新手可以尝试的vueJS小demo，点击这里
使用websocket+vue写一个小demo
最新发布
04-15
好的，我可以为你提供一个使用 WebSocket 和 Vue 实现的简单示例。 首先，你需要安装 `vue-socket.io` 包，它可以让你在 Vue 中方便地使用 WebSocket： ``` npm install vue-socket.io ``` 然后，在你的 Vue 组件中引入 `vue-socket.io`： ``` import VueSocketIO from 'vue-socket.io' export default { ... components: { ... VueSocketIO, }, ... } ``` 接着，你可以在组件的 `mounted()` 钩子函数中创建一个 WebSocket 连接： ``` mounted() { this.$socket = io('ws://localhost:3000') this.$socket.on('connect', () => { console.log('连接成功') }) this.$socket.on('disconnect', () => { console.log('连接断开') }) } ``` 在这里，我们使用了 `io()` 函数来连接 WebSocket 服务器，并使用 `on()` 函数监听连接和断开事件。 接下来，你可以使用 `send()` 函数向服务器发送消息，或者使用 `on()` 函数监听服务器发送的消息： ``` sendMessage() { this.$socket.send('这是一条消息') }, mounted() { ... this.$socket.on('message', (message) => { console.log('收到消息：', message) }) ... } ``` 这就是使用 WebSocket 和 Vue 实现的一个简单示例。希望这对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值