为了账号安全,请及时绑定邮箱和手机立即绑定

3小时速成 Vue2.x 核心技术

Brian Web前端工程师
难度中级
时长 3小时15分
学习人数
综合评分9.40
87人评价 查看评价
9.4 内容实用
9.5 简洁易懂
9.3 逻辑清晰
  • 快速创建工程的第二种方法:ui界面。命令行敲vue ui

    13:27
    看视频
  • 切换项目目录:cd /project/vue/

    创建项目:vue create hello-world 或者vue create hello_world

    01:51
    看视频
  • 课程知识点

    Vue2.x 框架常用知识点(模板语法、条件渲染、列表渲染等)

    Vue2.x 核心技术(vue-router、vuex)

    Vue2.x 集成入项目

    课程重点

    Vue2.x框架常用知识点 —— 20%

    Vue2.x核心技术——30% 重点

    Vue2.x集成框架——30%难点、模拟实际应用

    Vue2.x框架常用知识点(第二章)

    • 认识vue:Hello Vue 应用

    • 模块语法,v-bind属性绑定,事件绑定

    • 条件渲染、列表渲染、Class与Style绑定

    Vue2.x核心技术(第三章)

    • 认识 vue-cli 工具,Vue 代码规范

    • Vue组件的调试方式

    • Vue-rounter,vuex

      vue 的路由以及状态管理

    集成Vue2.x(第四章)

    • 简单介绍 workflow 开发工作流

      介绍单页面、多页面的开发方式

    • 单页面Demo(动态表单、列表动态展示)

    • 使用Cli工具,开发常见的应用组件

      例如登录模块、动态的列表渲染

    开发环境

    IDE(集成环境)

    • webstorm

      可以集成更多的开发工具在里面(比如Git终端,而且有图形化界面,操作方便)

    • visuals Studio Code(VS code)

      提供了一些智能化的插件,免费的、微软开发的编辑器,有语法高亮、语法提示,以及版本控制都可以集成在该编辑器里。

    使用 webstorm 开发

    工具常规配置

    1. configure > Preferences

    1. 深色主题:Appearance > Theme > Darcula

      应用 Apply

    2. 字体设置 Font > size

    3. 行间距 Font > Line spacing

    Node.js 开发环境

    nvm:Node Version Manager (Node的版本管理)

    前端Node依赖库之间的兼容问题

    gitee码云nvm官网

    GitHub nvm-sh

    GitHub nvm-Windows

    nvm 安装方法

    Linux、macOS、Windows

    Linux、macOS 可以使用 curl 命令安装、export 配置环境变量

    Windows 安装方式

    nvm-Windows

    nvm-Windows最新版下载地址

    1. nvm-noinstall.zip: 这个是绿色免安装版本,但是使用之前需要配置

    2. nvm-setup.zip:这是一个安装包,下载之后点击安装,无需配置就可以使用,方便。

    3. Source code(zip):zip压缩的源码

    4. Sourc code(tar.gz):tar.gz的源码,一般用于Linux和macOS

    nvm命令

    Windows下:

    • nvm arch [32|64]: 显示node是运行在32位还是64位模式。指定32或64来覆盖默认体系结构。

    • -nvm install <version> [arch]:该可以是node.js版本或最新稳定版本latest。(可选[arch])指定安装32位或64位版本(默认为系统arch)。设置[arch]为all以安装32和64位版本。在命令后面添加–insecure,可以绕过远端下载服务器的SSL验证。

    • nvm list [available]:列出已经安装的node.js版本。可选的available,显示可下载版本的部分列表。这个命令可以简写为nvm ls [available]。

    • nvm on: 启用node.js版本管理。

    • nvm off: 禁用node.js版本管理(不卸载任何东西)

    • nvm proxy [url]: 设置用于下载的代理。留[url]空白,以查看当前的代理。设置[url]为none删除代理。

    • nvm node_mirror [url]:设置node镜像,默认为https://nodejs.org/dist/.。可以设置为淘宝的镜像https://npm.taobao.org/mirrors/node/

    • nvm npm_mirror [url]:设置npm镜像,默认为https://github.com/npm/npm/archive/。可以设置为淘宝的镜像https://npm.taobao.org/mirrors/npm/

    • nvm  uninstall <version>: 卸载指定版本的nodejs。

    • nvm use [version] [arch]: 切换到使用指定的nodejs版本。可以指定32/64位[arch]。

    • -nvm use <arch>:将继续使用所选版本,但根据提供的值切换到32/64位模式

    • nvm root [path]: 设置 nvm 存储node.js不同版本的目录 ,如果未设置,将使用当前目录。

    • -nvm version: 显示当前运行的nvm版本,可以简写为nvm v

    npm 安装

    国内下载慢,可以使用 taobao 的镜像下载各版本 node

    Linux、MacOS:

    npm install -g cnpm --registry-https://registry.npm.taobao.org

    windows:

    使用命令行方式:

    nvm node_mirror https://npm.taobao.org/mirrors/node/
    nvm npm_mirror https://npm.taobao.org/mirrors/npm/

    安装的目录下修改settings.txt文件,添加如下两行

    node_mirror: https://npm.taobao.org/mirrors/node/ 
    npm_mirror: https://npm.taobao.org/mirrors/npm/


    安装 node.js

    1. 查看版本 nvm list available

    2. 安装node.js ,nvm install 版本号

    3. 使用 node.js , nvm use 版本号

      同时安装相应版本的 npm

      在 DOS 下使用 npm 命令时,需要进入相应版本的 node 文件夹中。因为没有配置该 node 版本的环境变量


    调试环境

    Chrome 的 Vue 插件

    国内可以通过ID下载chrome插件

    id输入如下:

    nhdogjmejiglipccpnnnanhbledajbpd

    遇到chrome无法拖拽 crx 时,将后缀改为 zip,直接拖拽即可。

    工程环境 Vue-cli

    1. 在DOS中,进入 node 版本目录

    2. 执行如下命令,进行安装

      npm i -g vue-cli

      提示过期,改用如下命令

      npm install -g @vue/cli-init


  • 课程重点

    Vue2.x框架常用知识点 —— 20%

    Vue2.x核心技术——30% 重点

    Vue2.x集成框架——30%难点、模拟实际应用

    Vue2.x框架常用知识点(第二章)

    • 认识vue:Hello Vue 应用

    • 模块语法,v-bind属性绑定,事件绑定

    • 条件渲染、列表渲染、Class与Style绑定

    Vue2.x核心技术(第三章)

    • 认识 vue-cli 工具,Vue 代码规范

    • Vue组件的调试方式

    • Vue-rounter,vuex

      vue 的路由以及状态管理

    集成Vue2.x(第四章)

    • 简单介绍 workflow 开发工作流

      介绍单页面、多页面的开发方式

    • 单页面Demo(动态表单、列表动态展示)

    • 使用Cli工具,开发常见的应用组件

      例如登录模块、动态的列表渲染

  • 为什么学

    1. 小而美(灵活的语法、灵活的开发方式)

    2. 丰富的生态(模块、插件、开发团队、开发资料)

      社区活跃、资料完整

    3. 广泛的应用(移动端、PC端)

    vue 的流行程度

    github 上的 vue 点赞排名

    vue 排名第三 11万多赞

    Facebook/react 排名第四

    angular.js 已在第二面

    可以看到全球程序员对vue的一个态度

    学习方法

    • 看目录

      看出老师总结出来的知识框架

    • 倍数看

      讲的慢,可以使用倍数观看

    • 重点看

      可以挑选,观看重点部分

    • 记笔记

    • 记重点

    • 记讨论

    练习

    • 随堂练

    • 作业练

    • 实战练

    课程知识点

    Vue2.x 框架常用知识点(模板语法、条件渲染、列表渲染等)

    Vue2.x 核心技术(vue-router、vuex)

    Vue2.x 集成入项目

  • 另外一个老师前几章讲的vue-cli:https://www.imooc.com/learn/1173

  • computed如果包含实例外的变量,如果只修改实例外变量,computed不会计算;当修改了实例内变量时,computed会计算,并且此时实例外变量会被更新。

    11:03
    看视频
  • watch:异步场景

    computed:数据联动

  • el对应有多个元素,会只渲染第一个元素。

    04:24
    看视频
  • 用npm下载淘宝镜像:npm install -g cnpm --registry-https://registry.npm.taobao.org

  • 谷歌插件下载:https://chrome-extension-downloader.com

  • var app = new Vue({


    watch:{

        msg: function(newval,oldval){

        }

    },

     computed:{

        msg1: function(){

    return: 'computed:' + this.msg

    }

    }


    })


    console:

    app.msg='new value...'


首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.前端基础知识的HTML,Javascript, css 2.适合于前端小白,想了解最流行的前端框架的小伙伴。 3.有基础的前端/后台人员,想提高工作效率,扩展前端框架的应用的人
老师告诉你能学到什么?
1. vue常用模板语法 2. 列表渲染、条件渲染 3. Class与style绑定 4. vue事件绑定与处理 5. vue计算属性computed, watch 6. vue-cli快速创建工程 7. vue的组件思想,代码规范 8. vue-router介绍 9. 认识vuex,组件间的通信方式 10. 前端调试方法,vue组件调试方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!