(转)再谈Retina下1px的解决方案

18 八月,2017

在互联网上有关于1px边框的解决方案已经有很多种了,自从使用Flexible库之后,再也没有纠结有关于1px相关的问题。由于最近在考虑新的移动端适配方案,也就是放弃Flexible库,我不得不考虑重新处理1px的方案。为此为我自己也重撸了一些1px的解决方案,整理出来,希望对有需要的同学有帮助。

Flexible方案

Flexible方案已不是什么神秘的方案了,借助JavaScript来动态修改meta标签中viewport中的initial-scale的值,然后根据dpr修改html中的font-size值,再使用rem来处理。有关于这方面的详细使用可以阅读早期整理的文章《使用Flexible实现手淘H5页面的终端适配》。

v-model 表单控件绑定

17 八月,2017

v-model 实现数据双向绑定

    <div id="app">
        {{ message }}
        <input type="text" v-model="message">
        <textarea v-model="message"></textarea>
    </div>
    <script>
        var vm = new Vue ({
            el: '#app',
            data: {
                message: 'v-model 实现数据双向绑定'
            }
        });
    </script>

v-on 事件绑定

17 八月,2017

v-on 的基础使用

    <div id="app">
        <div>{{ num }}</div>
        <button v-on:click="add"> + </button>
        <button v-on:click="reduce"> - </button>
    </div>
    <script>
        var vm = new Vue ({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                add: function () {
                    return this.num++
                },
                reduce: function () {
                    return this.num--
                }
            }
        });
    </script>

v-text & v-html

17 八月,2017

当网速很慢或者javascript出错时,会暴露 {{ xxx }}。Vue给我们提供的v-text,就是解决这个问题的。

v-text实例

    <div id="app">
        <div v-text="message"></div>
    </div>
    <script>
        var vm = new Vue ({
            el: '#app',
            data: {
                message: 'v-text'
            }
        });
    </script>

v-for 列表渲染

16 八月,2017

v-for 简单实例

    <div id="app">
        <ul>
            <li v-for="list in lists">
                {{ list.msg }}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue ({
            el: '#app',
            data: {
                lists: [
                    { msg: 'foo' },
                    { msg: 'bar' },
                    { msg: 'box' }
                ]
            }
        });
    </script>
1 2 3 21