前端开发Vue.js框架浅谈

前端开发笔试卷|web前端开发职位要求|前端开发对电脑的要求

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
    <title>Document</title>
</head>
<body>
    <div id=”cnblogs_post_body”>
        <blockquote>
            <p>作为一名vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍vue.js,希望能够激发你对vue.js的兴趣。</p>
        </blockquote>
        <h2>vue.js简介</h2>
        <p>vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将vueangularangular 1.0+版本)做一些简单的比较。
        </p>
        <p>vue的主要特点就和它官网(
            <a href=”http://cn.vuejs.org/”>http://cn.vuejs.org/</a>)所介绍的那样:</p>
        <p>(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化</p>
        <h2>简单</h2>
        <p>下面看一段angular的实现双向绑定的代码</p>
        <div class=”cnblogs_code”>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
            <pre><span style=”color: #008000;”>//</span><span style=”color: #008000;”> html</span>
<body ng-app=”myApp”>
<divng-controller=”myCtrl”>
<p>{{ note }}</p>
<inputtype=”text”ng-model=”note”>
</div>
</body></p>
<p><span style=”color: #008000;”>//</span><span style=”color: #008000;”> js</span>
<span style=”color: #0000ff;”>var</span> myModule = angular.module(‘myApp'<span style=”color: #000000;”>, []);</p>
<p>myModule.controller(</span>’myCtrl’, [‘$scopp’, <span style=”color: #0000ff;”>function</span><span style=”color: #000000;”>($scope) {
$scope.note </span>= ”<span style=”color: #000000;”>;
]);</span></pre>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
        </div>
        <p>&nbsp;</p>
        <p>然后再看一下Vue的代码</p>
        <div class=”cnblogs_code”>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
            <pre><span style=”color: #008000;”>//</span><span style=”color: #008000;”> html</span>
<body>
<divid=”app”>
<p>{{ note }}</p>
<inputtype=”text”v-model=”note”>
</div>
</body></p>
<p><span style=”color: #008000;”>//</span><span style=”color: #008000;”> js</span>
<span style=”color: #0000ff;”>var</span> vm = <span style=”color: #0000ff;”>new</span><span style=”color: #000000;”> Vue({
el: </span>’#app'<span style=”color: #000000;”>,
data: {
note: </span>”<span style=”color: #000000;”>
}
})</span></pre>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
        </div>
        <p>&nbsp;</p>
        <p>相比较而言我个人认为Vue的代码编写风格更加简洁,并且通俗易懂。</p>
        <h2>不失优雅</h2>
        <p>Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。</p>
        <p>例如:</p>
        <p>(1)绑定click事件</p>
        <div class=”cnblogs_code”>
            <pre><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>a </span><span style=”color: #ff0000;”>v-on:click</span><span style=”color: #0000ff;”>=”doSomething”</span><span style=”color: #0000ff;”>></</span><span style=”color: #800000;”>a</span><span style=”color: #0000ff;”>></span></pre>
        </div>
        <p>可以简写为:</p>
        <div class=”cnblogs_code”>
            <pre><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>a </span><span style=”color: #ff0000;”>@click</span><span style=”color: #0000ff;”>=”doSomething”</span><span style=”color: #0000ff;”>></</span><span style=”color: #800000;”>a</span><span style=”color: #0000ff;”>></span></pre>
        </div>
        <p>(2) 绑定动态属性</p>
        <div class=”cnblogs_code”>
            <pre><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>a </span><span style=”color: #ff0000;”>v-bind:href</span><span style=”color: #0000ff;”>=”url”</span><span style=”color: #0000ff;”>></</span><span style=”color: #800000;”>a</span><span style=”color: #0000ff;”>></span></pre>
        </div>
        <p>可以简写为:</p>
        <div class=”cnblogs_code”>
            <pre><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>a </span><span style=”color: #ff0000;”>:href</span><span style=”color: #0000ff;”>=”url”</span><span style=”color: #0000ff;”>></</span><span style=”color: #800000;”>a</span><span style=”color: #0000ff;”>></span></pre>
        </div>
        <p>(3) 便捷的修饰符</p>
        <div class=”cnblogs_code”>
            <pre><span style=”color: #008000;”><!–</span><span style=”color: #008000;”> 阻止单击事件冒泡 </span><span style=”color: #008000;”>–></span>
<span style=”color: #0000ff;”><</span><span style=”color: #800000;”>a </span><span style=”color: #ff0000;”>@click.stop</span><span style=”color: #0000ff;”>=”doSomething”</span><span style=”color: #0000ff;”>></</span><span style=”color: #800000;”>a</span><span style=”color: #0000ff;”>></span></p>
<p><span style=”color: #008000;”><!–</span><span style=”color: #008000;”> 只在按下回车键的时候触发事件 </span><span style=”color: #008000;”>–></span>
<span style=”color: #0000ff;”><</span><span style=”color: #800000;”>input </span><span style=”color: #ff0000;”>@keyup.enter</span><span style=”color: #0000ff;”>=”submit”</span><span style=”color: #0000ff;”>></span></pre>
        </div>
        <p>(4) 实用的参数特性</p>
        <div class=”cnblogs_code”>
            <pre><span style=”color: #008000;”><!–</span><span style=”color: #008000;”> debounce 设置一个最小的延时 </span><span style=”color: #008000;”>–></span>
<span style=”color: #0000ff;”><</span><span style=”color: #800000;”>input </span><span style=”color: #ff0000;”>v-model</span><span style=”color: #0000ff;”>=”note”</span><span style=”color: #ff0000;”> debounce</span><span style=”color: #0000ff;”>=”500″</span><span style=”color: #0000ff;”>></span></p>
<p><span style=”color: #008000;”><!–</span><span style=”color: #008000;”> 在 “change” 而不是 “input” 事件中更新数据 </span><span style=”color: #008000;”>–></span>
<span style=”color: #0000ff;”><</span><span style=”color: #800000;”>input </span><span style=”color: #ff0000;”>v-model</span><span style=”color: #0000ff;”>=”msg”</span><span style=”color: #ff0000;”> lazy</span><span style=”color: #0000ff;”>></span></pre>
        </div>
        <p>怎么样,是不是感觉优雅极了。</p>
        <h2>小巧</h2>
        <p>说起小巧,那应该首先要关注下Vue的源码大小,Vue的成产版本(即min版)源码仅为72.9kb,官网称gzip压缩后只有25.11kb,相比Angular的144kb缩小了一半。</p>
        <p>小巧的一种好处就是可以让用户更自由的选择相应的解决方案,在配合其他库方面它给了用户更大的空间。</p>
        <p>如Vue的核心默认是不包含路由和 Ajax 功能,但是如果项目中需要路由和AJAX,可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource,同时你也可以使用其他你想要使用的库或插件,如jquery的AJAX等。</p>
        <p>是不是感觉非常的灵活。</p>
        <h2>不乏大匠</h2>
        <p>Vue虽然小巧,但是“麻雀虽小五脏俱全”,在构建大型应用的时候也是得心应手。</p>
        <p>(1) 模块化</p>
        <p>结合一些第三方模块构建工具,如CommonJS、RequireJS或者SeaJs,可以轻松实现代码的模块化。</p>
        <p>但是在这里小编不推荐使用上述构建工具,直接使用ES6的模块化功能,再结合Webpack进行相应打包是目前最热门的方案。</p>
        <p>不了解ES6模块功能的可以详见:
            <a href=”http://es6.ruanyifeng.com/#docs/module”>http://es6.ruanyifeng.com/#docs/module</a>
            <br>在今后的文章中,我也会对其进行介绍,包括Webpack的配置。</p>
        <p>(2) 组件化</p>
        <p>Vue的组件化功能可谓是它的一大亮点,通过将页面上某一组件的html、css、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。</p>
        <p>例如:</p>
        <div class=”cnblogs_code”>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
            <pre><span style=”color: #000000;”>// App.vue
</span><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>template</span><span style=”color: #0000ff;”>></span>
<spanstyle=”color: #0000ff;”><</span><spanstyle=”color: #800000;”>div </span><spanstyle=”color: #ff0000;”>class</span><spanstyle=”color: #0000ff;”>=”box”</span><spanstyle=”color: #ff0000;”> v-text</span><spanstyle=”color: #0000ff;”>=”note”</span><spanstyle=”color: #0000ff;”>></</span><spanstyle=”color: #800000;”>div</span><spanstyle=”color: #0000ff;”>></span>
<span style=”color: #0000ff;”></</span><span style=”color: #800000;”>template</span><span style=”color: #0000ff;”>></span></p>
<p><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>script</span><span style=”color: #0000ff;”>></span><span style=”background-color: #f5f5f5; color: #000000;”>
export </span><span style=”background-color: #f5f5f5; color: #0000ff;”>default</span><span style=”background-color: #f5f5f5; color: #000000;”> {
data () {
</span><spanstyle=”background-color: #f5f5f5; color: #0000ff;”>return</span><spanstyle=”background-color: #f5f5f5; color: #000000;”> {
note: </span><span style=”background-color: #f5f5f5; color: #000000;”>'</span><span style=”background-color: #f5f5f5; color: #000000;”>这是一个组件的html模板!</span><span style=”background-color: #f5f5f5; color: #000000;”>'</span><span style=”background-color: #f5f5f5; color: #000000;”>
}
}
}
</span><span style=”color: #0000ff;”></</span><span style=”color: #800000;”>script</span><span style=”color: #0000ff;”>></span></p>
<p><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>style </span><span style=”color: #ff0000;”>scoped</span><span style=”color: #0000ff;”>></span><span style=”background-color: #f5f5f5; color: #800000;”>
.box </span><span style=”background-color: #f5f5f5; color: #000000;”>{</span><span style=”background-color: #f5f5f5; color: #ff0000;”>
color</span><span style=”background-color: #f5f5f5; color: #000000;”>:</span><span style=”background-color: #f5f5f5; color: #0000ff;”> #000</span><span style=”background-color: #f5f5f5; color: #000000;”>;</span>
<span style=”background-color: #f5f5f5; color: #000000;”>}</span>
<span style=”color: #0000ff;”></</span><span style=”color: #800000;”>style</span><span style=”color: #0000ff;”>></span></pre>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
        </div>
        <p>我们还可以在组件里写一些预处理语言:</p>
        <div class=”cnblogs_code”>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
            <pre><span style=”color: #000000;”>// App.vue
</span><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>template </span><span style=”color: #ff0000;”>lang</span><span style=”color: #0000ff;”>=’jade'</span><span style=”color: #0000ff;”>></span><span style=”color: #000000;”>
div(class=”box” v-text=”text”)
</span><span style=”color: #0000ff;”></</span><span style=”color: #800000;”>template</span><span style=”color: #0000ff;”>></span></p>
<p><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>script</span><span style=”color: #0000ff;”>></span><span style=”background-color: #f5f5f5; color: #000000;”>
export </span><span style=”background-color: #f5f5f5; color: #0000ff;”>default</span><span style=”background-color: #f5f5f5; color: #000000;”> {
data () {
</span><spanstyle=”background-color: #f5f5f5; color: #0000ff;”>return</span><spanstyle=”background-color: #f5f5f5; color: #000000;”> {
note: </span><span style=”background-color: #f5f5f5; color: #000000;”>'</span><span style=”background-color: #f5f5f5; color: #000000;”>这是一个组件的html模板!</span><span style=”background-color: #f5f5f5; color: #000000;”>'</span><span style=”background-color: #f5f5f5; color: #000000;”>
}
}
}
</span><span style=”color: #0000ff;”></</span><span style=”color: #800000;”>script</span><span style=”color: #0000ff;”>></span></p>
<p><span style=”color: #0000ff;”><</span><span style=”color: #800000;”>style </span><span style=”color: #ff0000;”>lang</span><span style=”color: #0000ff;”>=”stylus”</span><span style=”color: #0000ff;”>></span><span style=”background-color: #f5f5f5; color: #800000;”>
.box
color: #000
</span><span style=”color: #0000ff;”></</span><span style=”color: #800000;”>style</span><span style=”color: #0000ff;”>></span></pre>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
        </div>
        <p>当然这样写我们是需要通过webpack来进行打包的,推荐使用Webpack + vue-loader的方式,同时使用ES6语法,需要安装babel来进行转换。因为文章为浅谈Vue.js,所以这里不做深入介绍。</p>
        <p>(3) 路由</p>
        <p>和Angular一样,Vue也具有它的路由功能。通过路由功能,我们可以实现各个组件的按需加载,轻松构建单页应用。下面是一个简单的路由配置文件:</p>
        <div class=”cnblogs_code”>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
            <pre><span style=”color: #008000;”>//</span><span style=”color: #008000;”> router.js</span></p>
<p>’use strict'<span style=”color: #000000;”></p>
<p>export </span><span style=”color: #0000ff;”>default</span> <span style=”color: #0000ff;”>function</span><span style=”color: #000000;”>(router) {
router.map({
</span>’/'<spanstyle=”color: #000000;”>: {
component: </span><span style=”color: #0000ff;”>function</span><span style=”color: #000000;”> (resolve) {
require([</span>’./components/Foo.vue'<span style=”color: #000000;”>], resolve)
}
},
</span>’/foo'<spanstyle=”color: #000000;”>: {
component: </span><span style=”color: #0000ff;”>function</span><span style=”color: #000000;”> (resolve) {
require([</span>’./components/Foo.vue'<span style=”color: #000000;”>], resolve)
}
},
</span>’/bar'<spanstyle=”color: #000000;”>: {
component: </span><span style=”color: #0000ff;”>function</span><span style=”color: #000000;”> (resolve) {
require([</span>’./components/Bar.vue'<span style=”color: #000000;”>], resolve)
}
}
})
}</span></pre>
            <div class=”cnblogs_code_toolbar”>
                <span class=”cnblogs_code_copy”>
                    <a href=”javascript:void(0);” onclick=”copyCnblogsCode(this)” title=”复制代码”>
                        <img src=”//common.cnblogs.com/images/copycode.gif” alt=”复制代码”>
                    </a>
                </span>
            </div>
        </div>
        <p>如需查看具体的路由配置及使用,移步官方提供的文档:
            <a href=”http://vuejs.github.io/vue-router/zh-cn/index.html”>http://vuejs.github.io/vue-router/zh-cn/index.html</a>
        </p>
        <h2>总结</h2>
        <blockquote>
            <p>个人认为前端的一些技术都是融会贯通的,学习一门语言或者框架本身并不是为了学习它的技术,最重要的是学习它的思维,只有思维层面得到了延伸,学习其他技术的时候会发现得心应手。Vue带给我们的是前端一种解决问题的新的思维。</p>
        </blockquote>
    </div>
</body>
</html>

web前端开发需要考研吗|开发 还是 前端|开发前端软件工具

» 本文来自:前端开发者 » 《前端开发Vue.js框架浅谈》
» 本文链接地址:https://www.rokub.com/5149.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!