一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1.在项目根目录终端引入: npm i mint-ui -S 2.在 main.js 中加入: import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' 同时在 main.js 中通过全局方法 Vue.use() 使用 MintUI Vue

vue mint-ui swipe 不显示或显示空白? 解决需要在mt-swipe上层元素设置高度 <div> <div> <mt-header title="首页"></mt-header></div> <div style="height:200px"> <mt-swipe :auto="4000"> <mt-swipe-item><img

Vue作为前端三大框架之一,其已经悄然成为主流,学会用vue相关技术来开发项目会相当轻松. 对于还没学习或者还没用过vue的初学者,基础知识这里不作详解,推荐先去相关官网,学习一下vue相关的基础知识. a. vue.js 官网 参考:https://cn.vuejs.org/ 我的 github 一.搭建vue的相关环境与脚手架的说明 首先,要开发vue相关的项目,要会搭建vue的相关环境,要搭建的目录如下: 1.安装node.js和npm 2. webpack 3. vue-cli脚手架构建

做移动端的都知道 经常会有省市区这种三级联动的功能 今天研究了一下午~ 1.准备工作 vue+mintui+省市区的json数据 下载地址:https://github.com/chzm/address_popup 下载好后需要3个json文件 进入dist找到这3个文件 将这3个文件放入到vue项目里 新建一个处理这3个json方法的文件 import provinces from '../../static/provinces.json' import areas from '../../s

vue入门例子 1.声明示渲染        {{message}} 2.绑定事件 v-bind 3.控制切换一个程序是否显示        v-if 4.渲染循环                                   v-for 5.点击事件                                   v-on 6.双向数据绑定         v-model 一.声明示渲染   {{message}}     例: <template> <div id=&quo

我也是第一次写这种地址联动的 刚开始的时候 我还以为直接用select来写 后来公司的ios告知并不是这样的 他说应该时这样的 于是第一想法 赶紧找插件吧 但是找了一会未果  就问了公司大神 他刚开始更我讲了滴滴的一个插件 但是不怎么好用 于是乎他又让我用了这个插件 首先使用方法 可以参考官网 http://mint-ui.github.io/#!/zh-cn 这里不多说了 因为下面还有很多内容 在一切准别就绪之后 你会发现官网上给的都很鸡肋 很少的东西 自己整理的思路时正确的  但是怎么实现

demo及源码地址 https://github.com/artiely/citypicker 先去下载一个“省份.城市.区县.乡镇” 四级联动数据,然后 引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 <mt-picker :slots="addressSlots" class="picker"

安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) 下拉刷新上拉加载更多数据 <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref=&

创建一个组件:注册组件 (register/index.vue.script.js.style.scss,register/header) 注册路由 router/index.js { path: '/register', components: { header: RegisterHeader, content: Register } } 构建前端注册流程 写页面,确定需要的数据 index.vue----使用的是mint-ui的组件 <mt-field :state="phoneNum

记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是在当前页面再加个 <router-view/> 实现二级路由,功能也是可以实现的,但是当我不停的切换的时候,浏览器地址也会不断的改变,所以但我点击浏览器返回键的时候,就会出现一个不停的返回上一个页面,导致这两个页签不停切换,到最后才能回到首页.所以为了避免如此差的体验,最后结合mintUI实现理想

github地址 https://github.com/KyrieZbw/Sneakers (如果觉得不错就给个小星星) 预览地址 页面展示 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 运行 git clone https://github.com/KyrieZbw/Sneakers npm i npm run dev 页面展示

1.在components下建一个 2.代码如下: <template> <!--1.业务是开始有一组数据,序号,姓名,性别,年龄,操作(删除)     2.有三个输入框输入姓名,性别,年龄,(增加)     3.当输入东西后,按了增加按钮,将增加一组数据到数组中     4.当按了删除就会删除一组数据     主要业务如上     细节:(重点)     1.加样式让表格对齐等,像表格的感觉,表格如何设置宽高     2.引入背景图片方式     3.增加时验证是否有值输入在输入框  

http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><link rel="stylesheet" href="https://un

npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><linkrel="stylesheet"href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入组件

引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时,webpack默认会到node_modules/vue/dist目录找到package.json文件里的配置,这个文件的mian属性指向了node_modules/vue/dist/vue.runtime.common.js//这个路径指向的vue文件就是import Vue from "vue&

代码规范很重要 1.组件名应该始终是多个单词的,根组件 App 除外. 2.组件的 data 必须是一个函数. // In a .vue file export default { data () { return { foo: 'bar' } } } 3.Prop 定义应该尽量详细.[包含了类型.校验] // 更好的做法! props: { status: { type: String, required: true, validator: function (value) { return

本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux 1.laravel5.5安装,详情请参考: https://laravelacademy.org/post/7620.html 2.vue的安装: 直接进入项目的根目录,执行npm install ,建议如果可以的话使用 cnpm install cnpm安装 使用命令执行  npm install -g cnpm --registry=https://registry.npm.taobao.org

2019-3-31 为什么选择Vue 有这个一个需求,我们需要根据后端数据接口请求返回的数组在页面中按列表展示? 传统上我们使用jQuery的Ajax发送http请求,获取数据.判断列表数据是否存在,如果不存在,显示一条提示信息;如果存在,则显示出来. <ul class="js-data"></ul> <script> $(document).ready(function () { $.get("https://example.com/a

前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基本原理. 浏览器自定义事件 定义 除了我们常见的click,touch等事件之外,浏览器支持我们定义和分发自定义事件. 创建也十分简单: //创建名为test的自定义事件 var event = new Event('test') //如果是需要更多参数可以这样 var event = new Cu

1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm npm config set registry https://registry.npm.taobao.org npm install cnpm -g 安装webpack.webpack-cli 建议全局安装一次: cnpm install webpack webpack-cli –g 本地安装一次:

1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }