第四阶段:Vue框架 day71 Vue--初始Vue

路飞课程

"""
1、Vue框架:4~5天
	vue框架概念
	指令(重点)
	成员变量(重点)
	组件(核心)
	生命周期钩子
	vue项目开发+项目应用(重点)

2、drf框架:6天+
	接口:restful接口规范
	请求、响应、渲染、解析模块
	序列化模块(核心)
	三大认证模块(重点)
	过滤、搜索、排序、分页、路由模块

3、路飞学城项目:6天
	项目架构
	git
	短信认证
	支付模块
	前后台上线(服务器)
"""

Vue框架:官网

vue框架:渐进式JavaScript框架
	vue一个环境:可以只控制页面中一个标签、可以控制一组标签、可以控制整个页面、可以控制整个项目
	vue可以根据实际需求,选择控制前端项目的区域范围
为什么学习vue
"""
1、html、css、js直接开发项目,项目杂乱,不方便管理,要才有前端框架进行开发,规范项目
2、Angular、React、Vue三个前端框架,吸取前两个框架的所有优点,摒弃缺点,一手文档是中文
3、Vue框架优点:
	轻量级
	数据驱动
	数据的双向绑定
	虚拟DOM(嵌套页面架构的缓存)
	组件化开发
	由全球社区维护
	
	单页面应用、MVVM设计模式
"""

知识点总结

"""
1、在html页面中用script标签导入vue环境
2、vue Vue({ el: "#app" })挂载页面标签,建立关联后控制页面标签
3、插值表达式{{ }}可以完成基础运算
4、插值表达式中的变量有实例成员 data 来提供
5、v-on指令可以给标签绑定事件,事件函数由实例成员 methods 来提供
6、插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供
7、面向对象js: { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
8、文本指令:{{ }} | v-text=""  | v-html=""
9、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定义参数)"
10、属性指令:v-bind:属性名="" | :title="变量" | :style="字段变量" | 
			:class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
"""

A作业(必做)

"""
1、按照上方 知识点总结 模块,总结今天所学知识点
2、有 红、黄、蓝 三个按钮,以及一个200x200矩形框box,点击不同的按钮,box的颜色会被切换为指定的颜色
3、有一个200x200矩形框wrap,点击wrap本身,记录点击次数,如果是1次wrap为pink色,2次wrap为green色,3次wrap为cyan色,4次重新回到pink色,依次类推
"""

B作业(选做)

"""
1、如图:图形初始左红右绿,点击一下后变成上红下绿,再点击变成右红左绿,再点击变成下红上绿,依次类推
2、可以将图编程自动旋转
"""
posted @ 2019-11-11 20:15  foreversun92  阅读(176)  评论(0编辑  收藏  举报