Vue.JS入门基础

发表于 | 分类于

Vue入门的简单总结

Vue.JS特点

  • 是一套构建用户界面的渐进式框架
  • 只关注图层，采用自顶向上增量开发的设计
  • 响应式数据绑定+组合视图组件
  • 通过mvvm的数据绑定实现自动同步 Object.defineproperty()
  • 核心思想：数据驱动；组件化

与React的区别

相同点

  • 利用Virtual Dom实现快速渲染
  • 轻量级响应式组件服务器端渲染
  • 易于集成路由工具、打包工具以及状态管理工具
  • 优秀的支持和社区

不同点
Vue

  • 模板和渲染函数的弹性选择
  • 简单的语法以及项目创建
  • 更快的渲染速度和更小的体积

React

  • 更适用于大型应用和更好的可测试性
  • 同时适用于Web端和原生App
  • 更大的生态圈带来的更多支持和工具

    Vue入门基础

    Vue入门基础

    Vue.JS环境搭建

    node.js与npm的安装与环境搭建

    node.JS主页
    npm主页

    vue环境搭建与vue.cli使用

  • 项目路径npm安装/cnpm
    npm install vue

  • 官网拷贝引用
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

  • vue.cli脚手架构建SPA应用
    全局安装npm install -g vue-cli
    创建demo项目vue init webpack-simple demo
    安装依赖包vue install
    启动项目npm run dev
    webpack+vue创建简单项目vue init webpack demo2

  • 项目结构包括
    readme.md项目说明描述文件
    webpack.config配置
    package.json基础包文件

  • Vue配置

语法

Vue中文手册