vue-demo

在实战之前，你需要对vuejs的基础语法有一定的了解，可以通过以下几个途径进行学习： vue.js官方文档： https://cn.vuejs.org/v2/guide/index.html vue.js 教程： https://www.mingtern.com/course/vuejs/ 官方的文档内容比较多且杂，对于初学者来说可能没有系统性的引导，可以查看明灯小站的基础教程，对一些常用的基础语法都进行了整理，还可以在线进行调试。 好了，如果你对基础语法有一定的了解了，那就可以开始我们的实战项目了，这次我们要做的是一个简单的webapp，课程中会使用原生的vuejs语法，有非常详细的解释，对于小白用户来说，可以轻松掌握。 正式开始之前，可能你还需要对flex布局有一定的了解，可以查看阮一峰大神的两个教程，也非常简单。 Flex 布局教程：语法篇 Flex 布局教程：实例篇 Pure vue demo教程列表 Pure vue demo 实战第一节：Vue基础一 Pure vue demo 实战第二节：Vue基础二 Pure vue demo 实战第三节：Vue组件 Pure vue demo 实战第四节：Vue实例的生命周期 Pure vue demo 实战第五节：数据获取 来源： oschina 链接： https://my.oschina.net/u/4352408/blog

windows 版安装 下载安装 安装 http://nodejs.cn/ 默认路径C:\Program Files\nodejs\ 验证 配置 命令行配置参数 npm config set prefix " D:\Program Files\nodejs\node_global " npm config set cache " D:\Program Files\nodejs\node_cache " 配置环境变量 NODE_PATH D:\Program Files\nodejs\node_global\node_modules 验证 npm install express -g 安装完成后D:\Program Files\nodejs\node_global\node_modules\express 有express目录 命令验证 查看path ， 确认path已加载 加载成功 安装cnpm 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 环境变量添加 D:\Program Files\nodejs\node_global 测试 cnpm -v linux版环境安装 #todo vue-cli安装 npm install -g vue-cli 安装完测试vue命令正常 安装vue init

目录 什么是SVG？ viewport和viewBox preserveAspectRatio Mid，Min，Max meet，slice demo案例 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 viewport和viewBox 学好svg需要先了解svg中的viewport和viewBox这两个概念。 viewpart是整个svg的可见区域即svg标签的宽高。 viewBox是svg在绘图过程中使用的坐标系，viewBox存在于viewPort中。可以通过viewBox属性设置viewBox的大小和在viewPort中的相对位置。如：下面的标签表是svg画布的大小为200px*200px，view Box位于viewpart坐标中的(0, 0)位置并且大小为100*100。 <svg width='200px' height='200px' viewBox='0 0 100 100'></svg> preserveAspectRatio

安装node.js最新版 这里安装的是 8.11.4 版 image.png 更新npm至最新版 安装node.js后， npm默认版本为： 6.1.0 image.png 使用 npm install npm -g 更新npm至最新版 image.png 安装vs code 安装过程就忽略了. 安装@vue/cli > npm install -g @vue/cli image.png 创建一个vue-demo-project工程 创建过程中默认配置（开箱即用） image.png image.png 打开工程 image.png 默认情况下， VS code是使用英文的， 有需要的话， 大家也可自行修改为中文： 按下ctrl+p, 输入: > Config , 选择： “Configure Display Language" image.png 将原先的： image.png 修改为： image.png 修改并保存后， 会提示安装语言包， 安装即可： 打开一个 .vue 的文件时， 会提示推荐安装 vetur 插件， 当然选择安装了。安装成功后，会提示重启vscode image.png Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript等等 eslint

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

一 Vue官网 https://cn.vuejs.org/v2/guide/ 二 实战代码 1 App.vue // 模板 <template> <!-- id 值 app表示挂载点 --> <div id="app"> <!-- 待办事项功能 --> <h1>待办事项功能</h1> <div> <input class="item" v-model="inputVaule" /> <!-- 绑定事件标准写法 --> <button v-on:click="handleSubmit">待办事项</button> <!-- 绑定事件简化写法 --> <button @click="handleSubmit">待办事项</button> </div> <ul> <!-- 使用组件，通过item和index设置组件属性，将数据传递给子组件，这也是一个在组件上使用v-for的例子 --> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handDelete" ></todo-item> </ul> <!-- 和后端通信 --> <h1>和后端通信</h1> <div> <button @click="handleSubmit1">提交</button>

作者：小土豆biubiubiu 博客园： www.cnblogs.com/HouJiao/ 掘金： https://juejin.im/user/58c61b4361ff4b005d9e894d 简书： https://www.jianshu.com/u/cb1c3884e6d5 微信公众号：土豆妈的碎碎念（扫码关注，一起吸猫，一起听故事，一起学习前端技术） 码字不易，点赞鼓励哟~ 一.前言 　　上一篇文章 《Vuex入门实践（上）》 ，我们一共实践了vuex的这些内容： 　　1.在state中定义共享属性，在组件中可使用[$store.state.属性名]访问共享属性 　　2.在 mutations可中定义修改共享数据的方法，在组件中可使用[$store.commit('方法名')]同步修改共享属性 　　3.在actions中可定义异步修改共享数据的方法，在组件中可使用[$store.dispatch('方法名')]异步修改共享属性 　　4.在 getters中可定义共享数据的计算属性，在组件中可使用[$store.getters.计算属性名]访问共享数据的计算属性 　　这篇文章接着实践和探究vuex的奥秘。 二.创建多个store模块 　　前面的文章中，我们在vuex的实例方法Store上分别创建了state、mutations、actions和getters这几个配置选项。

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。Vue.js的 官方中文教程 其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。要学会使用教程文档！ 下面的教程会围绕vue的以下的基本点进行讲解： 新建vue对象 数据绑定 事件绑定 表单控件绑定 新建Vue对象 引用vue.js 在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 新建Vue实例 在Vue.html中插入一个id为 firstVue 的 <div> <div id="firstVue"></div> 在Vue.html中插入下面js代码: <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue" }) </script> 然后整个代码看起来是这样的: <!DOCTYPE html>

第一步：输入 vue init webpack vue_demo 第二步： 来源： oschina 链接： https://my.oschina.net/u/3621360/blog/3138833

第一步：输入 vue init webpack vue_demo 第二步： 来源： https://my.oschina.net/u/3621360/blog/3138833