热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!

课程简介

课程地址:https://ke.qq.com/course/432961

机构名称:大华软件学院

授课讲师:大强老师

课程名称:Vue.js 实战教程 V2.x(一)基础篇

课程简介:包括前端发展史、Vue.js简介、第一个Vue.js程序、安装环境和Vue、Vue实例、模板语法、计算属性和侦听器、Class与Style绑定、条件渲染、列表渲染、事件处理、表单输入绑定、组件基础等等。

适合人群:

1、初出茅庐,想学习前端开发的同学;

2、没用过Vue.js,想学习更多框架的同学;

3、用过Vue.js,想更深入的学习的同学。

课程特色:

1、全面系统,包括所有知识点;

2、简明扼要,重点讲解常用功能;

3、结合实战,理论联系实践。

课程大纲:

课程简介

1前端发展史

1.1 Web 1.0时代

1.2 Web 2.0时代

1.3 Web新时代

2 Vue.js简介

2.1 Vue.js概述

2.2与React对比

2.3与Angular对比

3第一个Vue.js程序

3.1起步

3.2声明式渲染

3.3条件与循环

3.4处理用户输入

3.5组件化应用构建

4安装环境和Vue

4.1 Vue Devtools

4.2直接引入

4.3 NPM

4.4命令行工具

5 Vue实例

5.1创建一个Vue 实例

5.2数据与方法

5.3实例生命周期钩子

5.4 生命周期图示

6模板语法

6.1插值

6.2指令

6.3缩写

7计算属性和侦听器

7.1计算属性

7.2侦听器

8 Class与Style绑定

8.1绑定HTML Class

8.2绑定内联样式

9条件渲染

9.1 v-if

9.2 v-show

9.3 v-ifvsv-show

9.4 v-if与v-for一起使用

10列表渲染

10.1用v-for把数组对应为元素

10.2在v-for里使用对象

10.3维护状态

10.4数组更新检测

10.5对象变更检测注意事项

10.6显示过滤/排序后的结果

10.7在v-for里使用值范围

10.8在<template>上使用v-for

10.9 v-for与v-if一同使用

10.10在组件上使用v-for

11事件处理

11.1监听事件

11.2事件处理方法

11.3内联处理器中的方法

11.4事件修饰符

11.5按键修饰符

11.6系统修饰键

12表单输入绑定

12.1基础用法

12.2值绑定

12.3修饰符

13组件基础

13.1基本示例

13.2组件的复用

13.3组件的组织

13.4通过 Prop 向子组件传递数据

13.5单个根元素

13.6监听子组件事件

13.7通过插槽分发内容

13.8动态组件

13.9解析 DOM 模板时的注意事项

课程收获:

1、基础篇,掌握Vue.js基础知识;

2、提高篇,掌握Vue.js核心功能;

3、高级篇,掌握Vue.js的高级技能。

课程目标:

1、掌握Vue.js基本概念;

2、掌握Vue.js基础语法和知识;

3、精通Vue.js实战技能和技巧;

授课模式:通过录播视频学习,通过QQ群辅导答疑。

优惠方式:免费赠送学习资料。

金牌讲师

1、大强老师

大华软件学院 技术总监 / 高级讲师

曾就职于中软国际华为业务线,具有十五年软件开发经验和多年培训经验。

拥有超过3年的线上线下培训经验。曾为多家公司做过内训和技术支持。

2、蓉儿老师

大华软件学院 高级讲师

曾就职于中软国际,具有八年软件开发经验和多年培训经验。

3、西岭老师

大华软件学院 高级讲师

曾就职于中软国际,具有十五年软件开发和培训经验,多年项目管理经验。

QQ群

大华软件学院①

群号:665714453

用途:用于学习课程内容,解答疑难问题,交流心得体会等等。

大华软件学院②

群号:863096000

用途:用于学习课程内容,解答疑难问题,交流心得体会等等。

论坛

地址:https://ss.xadhsd.com/bbs/forum.php

博客

地址:https://daqiang.blog.csdn.net

官网

地址:https://ss.xadhsd.com

品牌介绍

大华软件学院是西安大华时代推出的专业在线教育平台,成立于2018年。自成立以来,本着技术为根,服务为本的精神,努力为社会各界学员服务,赢得了学员的一致好评,同时在网络教育界赢得了广泛的信誉和声誉。

理论联系实践是本学院的教学特色,突出实践环节在教学中的重要性,是大华软件学院教育的基本原则。

大华软件学院,知识改变命运!

原文地址:https://www.cnblogs.com/daqiang123/p/11368360.html

时间: 2024-10-10 16:52:26

热烈庆祝《Vue.js 实战教程 V2.x(一)基础篇》上线了!的相关文章

Vue.js 实战教程 V2.x(8)Class与Style绑定

8 Class与Style绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求. 8.1绑定HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness. 你可以在对象中传入更多属性来动态

Vue.js 实战教程 V2.x(7)计算属性和侦听器

7计算属性和侦听器 7.1计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护. 所以,对于任何复杂逻辑,你都应当使用计算属性. 基础例子 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMe

Vue.js 实战教程 V2.x(2)Vue.js简介

2.1 Vue.js概述 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue.js官网的截图(2019年7月) 易用 会HTML.CSS.JavaScript就可以构建应用. 灵活 可以在一个库和一套完整框架之间自如伸缩. 高效 20kB运行大小,超快虚拟 DOM,最省心的优化 2.2与React对比 React官网的截图(2019年7月) 性能 React 和 Vue 都是非常快的. 优化 在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以

Vue.js 实战教程 V2.x(6)模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 6.1插值 var obj = { msg: 'Hello Vue.js', rawHtml: '<span style="color: red">This should be red.</span>' } new Vue({ el: '#app', data: obj }) <div id="app"> ... <

Vue.js 实战教程 V2.x(1)前端发展史

1.1 Web 1.0时代 1989年,英国科学家蒂姆·伯纳斯-李在欧洲核子研究中心工作时发明了万维网(WWW). 第一个网站的截图(图片来源:CERN) 1990年,HTML(Hyper Text Markup Language)1.0发布. 1993年,CGI(Common Gateway Interface)诞生. 1994年,HTML 2.0发布. 1994年,Netscape公司成立,发布了第一款商业浏览器Navigator. 第一款商业浏览器的截图 1995年,Netscape推出了

Vue.js 实战教程 V2.x(3)第一个Vue.js程序

假设你已了解关于 HTML.CSS 和 JavaScript 的知识. 3.1起步 创建一个 .html 文件,然后通过如下方式引入 Vue: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 3.2声明式渲染 Vue.js核心: <div id="app"> {{ message }} </div> var app = new V

Vue.js 实战教程 V2.x(11)事件处理

11事件处理 11.1监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </di

Vue.js 实战教程 V2.x(13)事件处理

13组件基础 13.1基本示例 Vue 组件的示例: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) 组件是可复用的 Vue

Vue.js 实战教程 V2.x(5)Vue实例

5 Vue实例 5.1创建一个 Vue 实例 创建 Vue 实例: var vm = new Vue({ // ... }) 5.2数据与方法 // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // => true // 设置属性也会影响到原始数据 vm.a = 2 data.a // =>