随笔分类 - Vue
摘要：在SF问题中看到了一个关于vue-cli中的template问题，问题是这样的：用vue-cli工具生成的main.js中： 然后问友的问题是：【template: '<App/>'】这句是什么意思？是指使用app.vue模板吗？但在vue没有看到这样的用法哦！里面只有:1 template:'#x
阅读全文
摘要：资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.
阅读全文
摘要：新建项目 开始（确认已经安装node环境和npm包管理工具） 1、新建项目文件名为start_vuedemo 2、npm init -y 初始化项目，我的win7系统，工程在d盘的vue_test_project文件夹下的名为start_vuedemo的工程文件夹 如图所示： 在该工程下自动生成一个
阅读全文
摘要：前言 通过前面几章的实战，我们已经顺利的构建项目，并且从API接口获取到数据并且渲染出来了。制作更多的页面，更复杂的应用，就是各位自己根据自己的项目去调整的事情了。 本章讲一下如何配置子路由，因为我们的项目不可能只有一个页面，而是由众多页面构成的。 新建子路由页面 在第二节中，我们新建了一个src/
阅读全文
摘要：通过前面几篇教程，我们已经顺利搭建起来了，并且已经组建好路由了。本章节，我们需要做一个列表页面，然后利用获取 http://cnodejs.org/api 的公开API，渲染出来。 我们打开src/page/index.vue文件，在这里写入下面的代码： 通过浏览器，我们可以看到如图所示的渲染结果：
阅读全文
摘要：制作.vue模板文件 通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，
阅读全文
摘要：通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战（一）：准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇文章详细介绍下项目的结构。 项目目录以及文件结构 如图所示： 如上图所示，自动构建的vue项目的结构就是这样。 src文件夹 如上图所示，这是sr
阅读全文
摘要：环境准备 首先，要开始工作之前，还是需要把环境搭建好。需要的环境是nodejs+npm，当然现在安装node都自带了npm。 在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来，就说明，npm也已经安装好了。 vue-cil构建项目 vue-cil是v
阅读全文
摘要：html-webpack-plugin 插件地址：https://www.npmjs.com/package...安装指令： 插件作用：生成html文件，并且引用相关的 assets 文件(如 css, js)参考地址：html-webpack-plugin详解html-webpack-plugin
阅读全文
摘要：初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpa
阅读全文
摘要：上一篇文章介绍了vuejs实现的简单分页，如果我有几个页面都需要有分页效果，不可能每个页面都去复制一下这段代码吧，意思是封装一下，变成通用的组件。 首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options ) 这儿创建了一个全局的pagenav，可以在其它地方都可以调用
阅读全文
摘要：用js实现的分页结果如图所示： css 模版 js 调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 pageBar.el就是element的缩写,定位模版的位置.data就是数据了.知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.所以我们要用comput
阅读全文
摘要：简介 在使用vue1.x之前的版本的时候，页面中的拖拽功能，我在项目中是直接用的jquery ui中的sortable.js，只是在拖拽完成后，在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了，于是使用了下面代码。 该案例主要是在用于vuejs
阅读全文
摘要：结果如图所示，可以搜索过滤，点击table th可以降序，升序排列当前列
阅读全文
摘要：如题所示，自定义过滤器根据搜索框输入的值，筛选复杂的列表数据。如图所示： html代码： js自定义过滤器代码： 比如在输入框中输入'mm'，得到筛选的结果如图所示：
阅读全文
摘要：直接贴代码了： 先上输入前的样子： 当在输入框中输入'合同'，得到结果如图:
阅读全文
摘要：vuejs 2.0中js实时监听input 在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样： ref="myElement"， v-ref:my-component 变
阅读全文
摘要：v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下： 由于v-if是一个指令，需要将它添加到一个元素上。但是如果想要切换多个元素，则可以把<templa
阅读全文
摘要：html代码： js代码： 说明：1.对比jquery的dom节点的插入方式，vue.js的插值需要使用先new创建一个实例然后通过$mount()。2.手动挂载到dom节点中，然后使用$appendTo/$before/$after等方法进行插值。3.这种操作dom的思想其实并不是vue提倡的方式
阅读全文
浙公网安备 33010602011771号