Vue.js快速入门

作者: webCoder | 来源:发表于2016-02-25 17:56 被阅读11475次

vue框架已经火了好长一段时间了,早在2015年的双11中,淘宝的部分导购业务——如:双十一晚会摇一摇清单、我的双十一标签进入的人群会场寻找与自身匹配的商品。今年以来,vue的文档更新很快完善、社区也日渐状大,再加上于某厂(你懂的)大力的推广,vue的前景十分光明。本文目的:通过这篇文章了解一些vue的基本概念,了解如何在实际编码中使用vue,文末有demo的地址,大家可以clone、运行后,实际感受一下。

文章开始,先比较一下vue和react。

先说它们的相似之处:

- 使用 Virtual DOM,提供了响应式编程和组件化的视图组件;
- 不同于angualr的大而全,vue、react将注意力集中保持在核心库,如果如果你需要用到其他的话,可以在社区中寻找或者自己开发一个,如vue-router(路由)和vuex(负责处理全局状态管理的库);

然后是不同之处:

- 性能:据vue.js官网声称vue的性能在某些场景下是优于react的——渲染性能 10,000 个列表项 100 次,vue较之react平均快100ms;Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧,因此在开发类似动画这样的应用时,vue.js更占优势;
- html模板绑定:react使用JSX,vue也支持JSX,但建议使用其内置的模板引擎,也可以使用Jade。JSX的不足在于:当遇到需要使用if判断、循环绑定时,jsx的语法让代码看起来很混乱、也不直观;当然,jsx也有自己的优势——支持linting等检查;
- css: vue通过在dom上增加scoped,就可以实现CSS Modules的功能;
- React相比Vue也有自己的优势,react的生态系统更丰富、完善;

看起来vue很"niubility"的样子,那vue小白用户如何快速的动手尝试呢?下面以首页(index.vue)为例,了解一下具体的用法,里面包含了组件的写法及在页面中如何组合、模板数据及事件绑定。

  • 目录结构

  • 效果图

    首页
  • index.vue(views文件夹下),一个views文件夹下的页面由多个components中的组件拼合而成。页面由3个组件拼成:顶部、中间、底部。注:每一个组件都是单独一个vue(里面定义自己的样式和交互事件)

    <template>
        <nv-head></nv-head>
        <index-center></index-center>
        <nv-bottom></nv-bottom>
    </template>
    <script>
    export default {
      components:{
          "nvHead":require('../components/head.vue'),
          "nvBottom":require('../components/footer.vue'),
          "indexCenter":require('../components/index-center.vue')
      }
    }
    </script>
    
  • footer组件(components文件夹下)

    <style>
        .footer{position: absolute;bottom: 20px;width: 100%;color: #5f6060;line-height: 25px;font-size: 12px;}
    </style>
    <template>
    <section class="footer text-center hidden-sm hidden-xs">
      <p v-on:click="hello">{{msg}}</p>
    </section>
    </template>
    <script>
    export default {
        data () {
            return {
                msg: '©2016 coderYin 苏ICP备15056083号-1 All rights reserved.'
            }
        },
        methods:{
            hello: function(){
                alert("hello world");
                this.msg="我被点击啦";
            }
        }
    }
    </script>
    
  • 最后附上,最终生成的主html的结构:

    页面dom结构
如果你想新建多个页面,你也可以在项目中进行相应的配置。
  • main.js

    var Vue = require('vue')
    
    //路由
    var VueRouter = require('vue-router')
    Vue.use(VueRouter)
    
    //vue-resource:通过 XMLHttpRequest 或 JSONP 发起请求并处理响应
    var VueResource = require('vue-resource')
    Vue.use(VueResource)
    
    //多个页面
    var index = require('./views/index.vue')
    var blogManage = require('./views/blog-manage.vue')
    var blog = require('./views/blog.vue')
    var works = require('./views/works.vue')
    
    // 你也可以自定义组件
    var helloWorld = Vue.extend({
        template: '<p>Hello world</p>'
    })
    
    // 路由器需要一个根组件。
    // 出于演示的目的,这里使用一个空的组件,直接使用 HTML 作为应用的模板
    var Apptest = Vue.extend({})
    
    // 创建一个路由器实例
    // 创建实例时可以传入配置参数进行定制,为保持简单,这里使用默认配置
    var router = new VueRouter()
    
    // 定义路由规则
    //在使用 vue-router 时,我们需要做的就是把路由映射到各个组件
    //vue-router 会把各个组件渲染到正确的地方。
    router.map({
        '/index': {
            component: index
        },
        '/blogmanage': {
             component: blogManage
         },
        '/blog': {
            component: blog
        },
        '/works': {
          component: works
        },
        '/helloworld': {
         component: helloWorld
        }
    })
    
    // 现在我们可以启动应用了!
    // 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
    router.start(Apptest, '#test')
    
  • 在下面提到的项目里,也有我们常规的列表(views/blog.vue)及todolist(views/blogManage.vue)的demo,下面是截图:

    博客列表
todolist.png
如果你想本地实践一下,可以通过下面的两种方式找到整个项目(readme文档里有详细的使用说明,运行起来只需要两步)
learn-vue
阿里也推出了Weex,其实叫Vue-Native也可以(这个名字只是为了让你大致了解Weex是用来干嘛的,不要真的在网上搜~~);另外,vue今年推出了2.0版本,相较1.0,主要做了下面的一些改变:
  • 2.0 用一个 fork 自 snabbdom 的轻量 Virtual DOM 实现对渲染层进行了重写;
  • 改变了一些代码写法,如循环v-for——当含有 index 时,以前传递的参数顺序是(index, value),现在变成了(value, index)。
  • 官方支持的库和工具——vue-router、vuex、vue-loader等都已经升级并支持 2.0 了;

虽然看起来做了一些大的变化,但是几乎90%的 API 和核心概念都没有变,官方推出了从1.0到2.0的迁移方案,同时出了一个migration helper的工具,这个工具发现了一个弃用的用法之后,就会给出通知和建议,并附上关于详细信息的链接。一般情况下,中小型的系统从vue1.0迁移到2.0版本大概只需要1天的时间。

相关文章

  • HTML学习之Vue.js

    Vue.js——60分钟快速入门

  • Vue基础知识总结

    请阅读以下博客,通俗易懂 Vue基础知识总结 Vue.js——60分钟快速入门 Vue.js——60分钟组件快速入...

  • 初识Vue

    本文参考自:Vue.js——60分钟快速入门 Vue.js是一个轻量级框架。 一、使用Vue的过程就是定义MVVM...

  • Vue.js快速入门

    作者:殷晓飞(沪江Web前端开发工程师)本文原创,转载请注明作者及出处 Vue.js框架已经火了好长一段时间了,早...

  • vue.js快速入门

    关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架vue-cli开发时需要注意的事项,Vue.js是...

  • Vue.js快速入门

    vue框架已经火了好长一段时间了,早在2015年的双11中,淘宝的部分导购业务——如:双十一晚会摇一摇清单、我的双...

  • vue

    学习网站 官网教程 http://cn.vuejs.org/guide/ Vue.js——60分钟快速入门 htt...

  • Vue.js开发常见问题解析

    此前的Vue.js系列文章: Vue.js常用开发知识简要入门(一) Vue.js常用开发知识简要入门(二) Vu...

  • vue学习笔记(一)

    感谢神仙教程Vue.js——60分钟快速入门 MVVM模式 model-view-viewmodel 通俗的理解m...

  • Vue.js状态管理工具Vuex快速上手

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

网友评论

  • llbbove:新手学习中
  • 小东宁:楼主,类似这样的项目能不能直接在html页面引入vue.js,以最小的学习成本开发,主要目的是有路由和数据绑定。不用去循环拼接html。
    webCoder: @小东宁 可以的
  • Angeladaddy:vue-router为什么放在开发依赖里面?
    Angeladaddy:@webCoder 嗯嗯,谢谢分享经验
    webCoder: @MonoDev 这个之前只是试手,没有考虑那么多
  • 51aa46b59d49:npm run build 之后的生产的代码dist,是直接扔到线上就可以了?
    webCoder: @51aa46b59d49 生产环境和dev环境最好配置不一样~ 不过如果直接扔上去也可以的
  • 51aa46b59d49:npm run dev 本地可以运行了,之后的命令是干嘛的?
  • e4c81ba61af9:http://localhost:8080/index.html#!/index 如何设置run dev后打开的就是这个页面 开始首屏全是白色的 审查没有错误
  • 老子与赫本:您这个项目我已经在本地跑了,很赞,谢谢分享
  • 老子与赫本:你好,我想学习vue.js与webpack,但是我的前端知识很薄弱,没有独立的完成过一个页面,您能不能抽时间写个教程,就是构建一个页面的完整步骤,只要一个简单的demo就可以,谢谢
  • 80ca4340b78d:好的,谢谢
  • 2bb98ff292ca:css能不能不放到组件里面。楼主上面的截图不是都还有dist文件吗。怎么源码就没有了
    webCoder:@sukif8 都在最后的.js文件中 webpack的功能
    2bb98ff292ca:@webCoder 早上试了下npm run bulid 就出现了“dist->static” 这样的文件夹。里面好像把我之前写在每个组件上的css都压缩在“statice/css”下了。搞不懂这个是 干嘛的。实际上页面上没有调用来着
    webCoder: @sukif8 项目后来重构过了,目录结构都变了
  • 80ca4340b78d:这个demo,我先git clone 你的地址,然后npm install ,然后再运行npm run build报错
    npm run dev之后,按你第一个路径,就出现了空白页?为什么呢,和我想象的不太一样
    :sweat:
    webCoder:@杜若_web 您好 针对您提的问题 我把项目重构了一下,已经更新到git上了,你可以https://github.com/coder-Yin/learn-vue重新clone,然后按照readme中的命令来配置运行项目。
    webCoder:@杜若_web package.json里面应该是没有把所有依赖安装的写进去,你可以根据命令行具体的报错来看看缺少什么
    80ca4340b78d:我是少了什么东西吗
  • a2554d2e2a5f:这个例子我怎样才能运行起来呢 :sweat:
    a2554d2e2a5f:npm run dev 就报错了 :sweat:
    a2554d2e2a5f:@webCoder 好的 谢谢
    webCoder:@jadeZ 您好 针对您提的问题 我把项目重构了一下,已经更新到git上了,你可以https://github.com/coder-Yin/learn-vue重新clone,然后按照readme中的命令来配置运行项目。
  • 99927da9ffcb:vue 适合大型saas系统的团队协作开发吗?
    主模块十几个,4 5个开发人员怎么协作?
    webCoder:@cc_battle 不好意思~ 我刚入前端一年,还没有具体将vue.js应用到实际的团队开发项目中,因此给不了您建议。 在接口等已经完备的情况下,完全可以每个人负责几个模块
  • 82709210c359:学习了
    webCoder:@Aric 加油~

本文标题:Vue.js快速入门

本文链接:https://www.haomeiwen.com/subject/zbhvkttx.html