Vue
关注
分享
扫一扫
cellinlab
这个作者很懒，什么都没留下…
展开
-
Vue中操作真实DOM导致VDom和真实DOM不一致之Vue中使用Sortable
参考：Vue中使用Sortable场景：使用sortable进行拖拽后，视图发生了改变，但是Vue中负责渲染视图的数据和视图不一致，更新渲染数据后会导致重新渲染，VDOM和真实dom不一致又会导致，渲染后把拖拽的视图结果复原。解决方案：sortable只负责采集信息，采集信息结束后恢复由于采集信息导致的视图变化，确保视图始终由Vue控制渲染const targetCont...原创 2019-12-25 10:56:33 · 912 阅读 · 0 评论 -
在Vue中使用OpenLayers 0x0 项目初始化
使用环境npm install -g @vue/cli项目初始化vue init webpack ol-vue安装依赖npm i ol -save初体验<template> <div id="map"class="map"></div></template><script>impor...原创 2019-04-24 17:53:41 · 1888 阅读 · 0 评论 -
Vue前端请求跨域解决方案
用cors在后端处理部署时在Nginx做转发原创 2019-04-18 11:05:56 · 1149 阅读 · 0 评论 -
Vue+OpenLayers加载天地图
项目需要，实现功能:加载天地图，标注用户位置，定位到用户位置<template> <div id="map" ref="rootmap"> <div id="mouse-position"></div> </div></template><script>import 'ol/ol.css...原创 2019-04-22 09:53:02 · 8240 阅读 · 4 评论 -
Vue+webpack实战 TodoList(附项目源码)
全局安装vue-cli npm i vue-cli -g创建项目vue init webpack-simple vue-todos 进入项目文件夹，项目初始化cd vue-todosnpm i 运行项目，将会看到默认界面npm run dev 这里将app.vue中其余内容删除，只保留基本框架<template>...原创 2019-04-01 19:03:13 · 775 阅读 · 0 评论 -
Vue生命周期详解——图示&代码
生命周期图示生命周期实例代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>生命周期</title> </head> <body> <div...原创 2019-04-01 16:38:55 · 197 阅读 · 0 评论 -
Vue.js入门 0x13 实战：知乎日报项目开发-文章详情页
加载内容 右侧的文章内容区域封装成了一个组件。在components目录下新建daily-article.vue组件，它唯一接收唯一的一个prop:id,也就是文章的id，如果id变化了，就说明切换了文章，需要请求新的文章内容。 在app.vue中导入daily-article.vue组件，并在文章列表的Item组件上绑定查看文章事件//app.vue<templ...原创 2019-03-15 18:16:03 · 538 阅读 · 0 评论 -
Vue.js入门 0xD Render函数（3）函数化组件、JSX
函数化组件 Vue.js提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。<!DOCTYPE html><html> <head> <meta ...原创 2019-02-10 17:26:42 · 690 阅读 · 0 评论 -
Vue.js入门 0x12 实战：知乎日报项目开发-推荐列表与分类
搭建基本架构 css样式直接写在 daily/style.css,并在main.js中导入：//main.jsimport Vue from 'vue';import App from './app.vue';import './style.css';new Vue({ el: '#app', render: h => { return...原创 2019-03-15 15:16:24 · 570 阅读 · 1 评论 -
Vue.js入门 0x11 实战：知乎日报项目开发-准备分析
下载基础项目 下载demo，复制至新建daily目录安装webpack依赖npm install babel@6.23.0 --save-devnpm install babel-core@6.24.0 --save-devnpm install babel-loader@6.4.1 --save-devnpm install babel-plugin-transform...原创 2019-03-15 11:33:29 · 389 阅读 · 0 评论 -
Vue.js入门 0x10 webpack
webpack基础配置安装 webpack 与 webpack-dev-server 创建项目目录，利用npm进行初始化配置 本地局部安装 webpack及webpack-dev-servernpm install webpack@2.3.2 --save-devnpm install webpack-dev-server@2.4.2 --save-dev ...原创 2019-02-20 15:00:40 · 251 阅读 · 0 评论 -
Vue.js入门 0xF Render函数（5）实战：留言列表
index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>留言列表</title> <link rel="stylesheet" typ原创 2019-02-14 15:44:50 · 479 阅读 · 1 评论 -
Vue.js入门 0xE Render函数（4）Render 函数开发可排序的表格组件
一个标准的表格由＜table＞、＜thead＞、＜tbody＞ 、< tr >、 ＜th＞、＜td＞等元素组成。 表格组件的所有内容（表头和行数据）由两个 prop 构成 ： columns 和 data。两者都是数组， columns用来描述每列的信息 ， 井渲染在表头＜thead> 内 ，可以指定某一列是否需要排序： data 是每一行的数据，由 colum...原创 2019-02-12 15:58:33 · 533 阅读 · 0 评论