Vue 与移动端优先开发 - 简书
Vue 与移动端优先开发
是一个web前端JS框架；
vue 10 Second Example
使用这套框架使得了在前端使用“模板”成为可能；正如上图Vue官网的“10 Second Example”所示；按照格式书写dom之后；数据源（input 控件）的值改变的时候，绑定的控件显示值跟着发生了变化，而这种刷新完全由vue托管；当按照格式完成对view的书写后，model层数据的变化自动映射到view；
这意味着什么？意味着如果服务器后端提供API，web前端完全可以以全静态文件发布；
在移动端优先的开发中，如果优先开发API，在API接口写完之后；后续需要写对应客户端界面的H5界面、微信界面；后端几乎不用新增动态代码；
例如在不使用vue以及类似的前端框架中；我们需要写一个H5的界面；需要新增一个新的动态地址，在后台查询数据后，在前端用模板输出html。以rails为例，新增后端代码后，前端的模板里面会有类似下图的代码，放在.erb后缀结尾的模板文件里面(@items是rails后端查询出来的数组)；
&%= @items.each do |item|%&
&%=item.name%&
而使用vue之后；如果API已经完成的情况下，可以只需要新增一个纯HTML文件：
&div id='demo'&
&div v-for="item in items"&
{{ item.name}}
然后用js请求API接口获取数据即可
var apiURL = 'https://xxx.com/api?xxx=xxx'
var demo = new Vue({ el: '#demo',
data: { items: null },
created: function () { this.fetchData() },
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this xhr.open('GET', apiURL)
xhr.onload = function () {
self.items = JSON.parse(xhr.responseText)
xhr.send()
这样的另一个好处是，无须考虑后端语言；因为不同的后端语言的模板文件书写格式不一致；如果使用vue完全可以抛弃后端语言自带的模板文件书写方式。
而服务器端，完完全全变成只有数据管理、组织、输出的任务的模块，只需要关注数据和业务逻辑的组织；完全将组织数据输出界面的功能托管给前端，而这样，前端工程师编码、调试将变的非常简单，只需要约定好接口规范，前端可以组织测试数据即可对界面进行完全的测试。
make things happen.
低仿饿了么 H5 - 纯前端 Vue 版 + 手把手教学 - 前端 - 掘金低仿饿了么H5-纯前端Vue版+手把手教学 这是一个低仿饿了么H5的纯前端练手，数据是伪造的，写的比较粗糙，写这个的目的是为了加深一下熟练度，半年前看到别人写的仿cnodejs网站，我也用vue1仿...
javascript 正则表达式总结 - 前端 - 掘金为什么要使用正则表达式 正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验，搜索，替换。在javascript中类似这样 ... 平时自己项目中用到的 CSS - 掘金css有些属性容易忘记，半天不写就...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
玩转 NPM - 前端 - 掘金自从转向了Node开发之后，对于NPM的熟悉程度越来越高，这一篇文章希望可以让大家都能“玩转NPM”。 做为Node世界里的包管理器，我想大家从Grunt时代起就已经熟练的使用npm install命令来安装一些依赖完成前端自动化构建任务。但...
孩子世界的黑白不容小觑，却常常被我们忽略。 这是不对的。 不做一个有毒的家长，这是起点，也应该是常识。 一、让小人有多远滚多远 成长总是有烦恼的。 而且有些烦恼表面上看，太小孩儿。 上小学二年级的林林在晚饭时，吃着吃着居然哭了。 事情经过是这样的：这天是星期一，他突然被老师...
在看小王子电影的时候，我就再认真观看他和小王子到底有什么不同。现在我知道了，让我和大家分享一下吧！
首先让我和大家讲一下它的大概内容吧！里面首先是讲一个单身妈妈，想让一个女孩儿考上重点中学，波斯中学。那个妈妈一直想让她成为一个学霸，那个妈妈使用了千方百计，但是...
在一片嘈杂的公交车上 我听到了一个天使的声音 那个声音优美，扬长 空灵，平和 声音不大，但是足够让我听到 我四处寻找 目光终于落在一个普通的中年妇女身上 她坐在那里，牢牢地抱着孩子 非常平静，浅浅地吟唱着 美妙的声音就这样缓缓地充满整个车厢 最后我终于听清了一个词 “妈妈”...
放慢脚步，去享受生活。 久困于喧嚣闹市，寻一块心灵净土…… 在最好的年纪，去旅游，去探索 ，去找寻自我… 晚安
我的朋友们～
七夕了，送你们一个甜甜的小故事吧。 无论有没有人陪你一起过节，都要开心。 ——久久 01. 唐不甜25岁了，没谈过恋爱，喜欢过很多人。 妈妈很着急，偷偷将她的生辰八字交给大师算姻缘。 “大师，我家姑娘的春天什么时候才能来？” 大师推了推银边眼镜，捻着胡子笑。 “别着急，命中...移动端优先且支持jQuery和Zepto的模态对话框插件
当前位置： >
> 移动端优先且支持jQuery和Zepto的模态对话框插件
dialog.js是一款移动端优先且同时支持jQuery和Zepto的模态对话框插件。它支持三种类型的弹出对话框，支持自定义按钮，文字等，并支持事件监听。
浏览器兼容性
dialog.js是一款移动端优先且同时支持和Zepto的模态对话框插件。它支持三种类型的弹出对话框，支持自定义按钮，文字等，并支持事件监听。它的特点还有：
支持三种类型的弹出对话框：alert、confirm、info。
可以自定义按钮的文字、样式、回调函数。
支持 jQuery 和 Zepto。
支持4个状态事件，用来监听状态改变。
对话框默认样式主要针对移动端展示做优化。
使用该模态对话框插件需要在页面中引入dialog.css，jquery或zepto，以及dialog.js文件。
&link rel="stylesheet" href="css/dialog.css"&
&script type="text/javascript" src="js/jquery.min.js"&&/script&
&!-- 或者 --&
&script src="js/zepto.min.js"&&/script&
&script type="text/javascript" src="js/dialog.js"&&/script&
初始化插件
可以通过下面的方法来初始化一个对话框。
$.dialog({
contentHtml : '弹出对话框的内容部分'
可用的配置参数如下：
对话框的种类（alert-确定； confirm-确定/取消； info）
'信息提示'
是否显示标题。值为：true、false
contentHtml
主体部分的HTML内容。默认值为空
dialogClass
对话框自定义的 class。默认值为空
自动关闭的延时时间（单位：毫秒）。为0时表示不自动关闭；大于0时，表示自动关闭对话框
overlayClose
是否可点击遮罩层关闭对话框。值为：true、false
buttonText
&&& ok : '确定',
&&& cancel : '取消'
按钮的文字
buttonClass
&&& ok : '',
&&& cancel : ''
按钮的自定义 class
info 类型对话框的提示文字
info 类型对话框的提示图标。值为图标的路径
function(){}
回调函数，点击“确定”按钮时执行
onClickCancel
function(){}
回调函数，点击“取消”按钮时执行
onBeforeShow
function(){}
回调函数，对话框显示前时执行
function(){}
回调函数，对话框显示后时执行
onBeforeClosed
function(){}
回调函数，对话框关闭前时执行
function(){}
回调函数，对话框关闭后时执行
浏览器兼容
dialog 已经在 Internet Explorer 9+、Firefox 22+、Opera 9+、Google Chrome 和 Safari 浏览器上被验证过，并且应该可以再更多浏览器上工作。
移动浏览器（例如：Chrome mobile、 Safari mobile 和其它浏览器）也被支持。已经在 iOS (iPad、 iPhone、 iPod)、Android 设备上进行了测试。其他基于 Chrome 内核的移动浏览器也基本上支持。
dialog.js插件作者：。
dialog.js插件的github地址为：。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！bootstrap的环境至少需要3个文件：bootstrap.min.css jquery.mis.jsbootstrap.min.js需要注意的是：bootstrap.min.css jquery.mis.jsbootstrap.min.js这三个文件的引入顺序一定不能错乱，一般把jquery.mis.jsbootstrap.min.js这两个文件放入HTML网页的最底部，这么做的原因是为了防止网页未加载完毕而这两个文件先加载可能产生的不必要的问题为了确保适当的绘制和触屏缩放，需要在 &head& 之中添加 viewport 元数据标签。&meta name="viewport" content="width=device-width, initial-scale=1"&在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&补充:
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，禁止缩放
移动开发-bootstrap
bootstrap适配移动端
Bootstrap3 移动设备优先并使用了一些HTML5元素
Bootstrap笔记：移动设备为优先，排版，列表，响应式表格等
作为移动端(Android)开发的我已被前端框架Bootstrap所折服
没有更多推荐了，三五人开发，移动端优先，兼容性要求高。使用 vue 还是 react？ - V2EX
三五人开发，移动端优先，兼容性要求高。使用 vue 还是 react？
13:56:25 +08:00 &jackon
公司要开一个新的项目，移动端优先，需要考虑很多安卓手机的浏览器的兼容问题。
开发团队，三五人。前后端完全分离，后端只提供 API 。
听到不少关于 react 性能／兼容性方面的负面评价。
尤其要微信浏览器内使用方便，乐于分享。
想用 react ，但听到不少负面评价，尤其是 性能／兼容性等方面。
react 适合我们么？
vue 很不错，但总担心生态系统不健全，踩到深坑 team 没有独立解决的能力。
该如何选择呢？感谢各位！
11639 次点击所在节点 &
dantegg 14:00:50 +08:00jquery （逃~
allce231 14:03:14 +08:00angular 吧
egen 14:10:10 +08:00react 微信支付有吭，安卓兼容性不清楚
Eoss 14:10:15 +08:00zeptojs 。（逃
mcfog 14:11:02 +08:00先想清楚你们要做的是 web app 还是 web page ，前者才需要考虑这个问题，后者的话，直接原生 H5 （ fetch/promise ）配上合适的 polyfill 就好现在锤子是发展得比以前好的很多，但也不能看到什么都像是钉子
jiyinyiyong 14:11:53 +08:00单纯看体积的话 React 不如 Vue. 页面小运行性能差距并不明显.
jackon 14:19:44 +08:00@ 感谢！如果 web app 指的是 单页应用（ SPA ）的话，似乎懂一点了，路由一类的兼容问题，对么？对于普通的多页应用，渲染出来跟手写的原生 H5 差别不大。一直不理解兼容问题来自于哪里。
des 14:19:51 +08:00同五楼，你要确定是 web app 还是 Web Page ，或者纯粹只是大家熟悉那种“ H5 ”。如果纯粹只是“ H5 ”，我推荐百度的那个，效果可以看 如果是 Web app ，我推荐 vue ，不知道大家怎么看？
jackon 14:20:36 +08:00@ 暂时不考虑做太大的页面，减少技术难度。
jackon 14:22:06 +08:00@ 微信支付的坑，是跟路由有关么？还是跨域问题？
hronro 14:23:02 +08:00react 我在微信上用过，没太大的兼容性问题。
jackon 14:23:49 +08:00@ 不是简单的几个 html5 页面。用户可以上传视频，做一些心理测试，然后查看测试结果。大概是这种产品。
jackon 14:24:35 +08:00@ 刚想问你 安卓上有没有测试，看到你的消息理有 via Android 。感谢！
evil4u 14:44:07 +08:00用户可以上传视频，做一些心理测试，然后查看测试结果。这类需求如果需要数据绑定，用 vue 够够的了，如果交互不多， vue 都不需要。用什么，还是看需求。
jackon 14:47:06 +08:00@ 主要还是担心以后功能大幅度增加。毕竟，创业公司， CEO 脑洞都很大。几个月以后，回头看。跟当时做的，好像不是一个产品了耶。
egen 14:53:24 +08:00@ URL 不能带 #，支付需要单独做一个页面
learnshare 14:56:09 +08:00@ 路由（ URL 的问题， hashtag 的 URL 针对支付和其他接口的表现不一致）上传视频貌似不容易，录音和上传图片倒还可以做。至于 React/Vue/Angular ，能写哪个就用哪个，有解决坑的能力比较重要。
microchang 14:59:44 +08:00@
react-router 可以不使用 hash ， URL 表现和普通页面一样
Zzzzzzzzz 15:01:48 +08:00react 全家桶用在移动流量下简直是犯罪.
egen 15:02:43 +08:00@ 是的，然而之前已经用 hash 做了 n 个页面了，调整起来很费劲，所以单独做了一个，一劳永逸
第 1 页 ／ 共 3 页
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到
上打开本讨论主题的完整版本。
是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
is a community of developers, designers and creative people.