![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vuejs
雪月青
养码学徒
展开
-
vue学习系列-认识vue.js
Vue.js 特点 - 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。 - 数据驱动: 自动追踪依赖的模板表达式和计算属性。 - 组件化: 用解耦、可复用的组件来构造界面。 - 轻量: ~24kb min+gzip,无依赖。 - 快速: 精确有效的异步批量 DOM 更新。 - 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作原创 2017-04-17 21:22:51 · 454 阅读 · 0 评论 -
vuejs学习系列-vue-cli的安装
1、安装vue-cli需要nodejs环境,首先需要在自己的机器上安装node 2、安装vue-clinpm i vue-cli -g3、开始初始化项目vue init webpack my-project(即项目目录)4、进到项目目录 cd my-project5、安装依赖npm install6、开始运行npm run dev原创 2017-04-17 21:34:07 · 293 阅读 · 0 评论 -
vuejs学习系列-第一个小demo
现在上节中安装的项目的src目录中建立pages文件用来装demo源码 我们现在的目录结构是这样的 首先在pages里新建demo01文件夹,顺便在demo01下,建立index.vue文件,然后在router里添加{ path: '/demo01', name: 'DEMO01', component: demo01 }index.vue里将会放置我们所有的demo原创 2017-04-17 21:58:11 · 4175 阅读 · 2 评论 -
IMWeb训练营作业-完成Todolist小demo
先上最终的效果图吧,简单小例子,30分钟左右完成 demo本身非常简单,但是可以很好的总结最近学习vue的收货。 首先构建简单的template模板,对于我们前端来说,页面是一切的工作的开始<template> <div id="demo02"> <div class="header"> <h1>Vue js TodoList Demo</h1>原创 2017-04-19 21:13:20 · 271 阅读 · 0 评论 -
vue学习系列-完成一个分页组件的封装
分页是我们前端开发中经常要用到的一个组件,也有很多人提供了这样的组件,比如jquery.page.js、layer等等,都比较好用,几天我们就自己用vue来撸一个page组件,首先先来看看最终完成的效果就是一个这样的,很简单的组件。老规矩,先看下html结构<div class="page-box"> <a href="javascript:;" :data-page="currPa原创 2017-05-10 21:06:12 · 710 阅读 · 0 评论 -
vue学习系列-demo04实现商城购物车功能
首先,先上最终的效果图 效果并不是很好看,但是这不是重点。首先,我们先看下布局,<template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class="car-list">原创 2017-05-03 21:20:49 · 2725 阅读 · 0 评论 -
IMWeb训练营作业-完成第一个组件select下拉框组件
下面是效果图 经过几天的vue学习,终于可以自己动手完成一个像样的组件了,下面是具体的过程首先我们先书写template结构<template> <div id="demo03"> <div class="header"> <h1>第一个组件:下拉框组件</h1> </div> <div class="conten原创 2017-04-21 21:14:34 · 394 阅读 · 0 评论