Vue
关注
分享
扫一扫
cellinlab
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue中操作真实DOM导致VDom和真实DOM不一致之Vue中使用Sortable
参考： Vue中使用Sortable 场景： 使用sortable进行拖拽后，视图发生了改变，但是Vue中负责渲染视图的数据和视图不一致，更新渲染数据后会导致重新渲染，VDOM和真实dom不一致又会导致，渲染后把拖拽的视图结果复原。 解决方案： sortable只负责采集信息，采集信息结束后恢复由于采集信息导致的视图变化，确保视图始终由Vue控制渲染 const targetCont...原创 2019-12-25 10:56:33 · 1007 阅读 · 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 · 1918 阅读 · 0 评论 -
Vue前端请求跨域解决方案
用cors在后端处理 部署时在Nginx做转发原创 2019-04-18 11:05:56 · 1172 阅读 · 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 · 8309 阅读 · 4 评论 -
Vue+webpack实战 TodoList(附项目源码)
全局安装vue-cli npm i vue-cli -g 创建项目 vue init webpack-simple vue-todos 进入项目文件夹，项目初始化 cd vue-todos npm i 运行项目，将会看到默认界面 npm run dev 这里将app.vue中其余内容删除，只保留基本框架 <template>...原创 2019-04-01 19:03:13 · 801 阅读 · 0 评论 -
Vue生命周期详解——图示&代码
生命周期图示 生命周期实例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>生命周期</title> </head> <body> <div...原创 2019-04-01 16:38:55 · 222 阅读 · 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 · 561 阅读 · 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 · 734 阅读 · 0 评论 -
Vue.js入门 0x12 实战：知乎日报项目开发-推荐列表与分类
搭建基本架构 css样式直接写在 daily/style.css,并在main.js中导入： //main.js import Vue from 'vue'; import App from './app.vue'; import './style.css'; new Vue({ el: '#app', render: h => { return...原创 2019-03-15 15:16:24 · 649 阅读 · 1 评论 -
Vue.js入门 0x11 实战：知乎日报项目开发-准备分析
下载基础项目 下载demo，复制至新建daily目录 安装webpack依赖 npm install babel@6.23.0 --save-dev npm install babel-core@6.24.0 --save-dev npm install babel-loader@6.4.1 --save-dev npm install babel-plugin-transform...原创 2019-03-15 11:33:29 · 412 阅读 · 0 评论 -
Vue.js入门 0x10 webpack
webpack基础配置 安装 webpack 与 webpack-dev-server 创建项目目录，利用npm进行初始化配置 本地局部安装 webpack及webpack-dev-server npm install webpack@2.3.2 --save-dev npm install webpack-dev-server@2.4.2 --save-dev ...原创 2019-02-20 15:00:40 · 275 阅读 · 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 · 511 阅读 · 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 · 563 阅读 · 0 评论