vue快速入门
1、阶段学习内容
2、vue快速入门课程大纲
3、vue概述
(1)什么是vue
vue是一套用于快捷开发的前端应用的框架技术
vue是一套用于构建用户界面的渐进式Javascript框架
(2) vue和其他框架
vue: 使用vue可以实现视图页面上的组件重复使用, 提高了开发和维护的效率,同时优化了页面加载和渲染的效率,提高了用户体验
react:重量级框架,中大型项目,大厂直接使用,封装比较彻底,定制化功能较差,技术门槛高,运行性能得到优化
4、vue第一个应用
传统js数据渲染页面,需要通过dom操作(innerText/innerHTML)实现,vue可以直接通过实例,使用固定语法将数据直接渲染到页面中,优化了dom操作
5、vue第一个数据处理应用
6、复习:git
7、vue实例选项
8、vue基础语法
(1)插值表达式
{{}} 渲染输出变量数据
支持一些简单的逻辑运算
(2)指令:v-text/v-htm1
v-text:
当数据渲染到指定的标签中进行文本展示
v-html:
可以解析标签
将数据渲染到指定的标签中进行解析展示
(3)v-once
一般和插值表达式或者数据渲染指令结合使用,用于一次性渲染
如果页面有些数据加载渲染后不需要再发生变化,可以结合v-once进行操作
(4) v-show、v-if
v-show:
根据判断条件是否为true,设置包含的内容显示或隐藏(原理是通过display属性控制)
v-if:
根据判断条件是否为true,设置包含的内容 加载渲染或者不加载渲染
(5)v-bind
动态操作标签属性的指令，让标签属性可以接受变量数据
简化属性操作语法,v-bind:attr="value" 为 :attr="value"
(6)v-on
用于给标签添加事件处理的指令
简化:v-on:click="fn" 优化 @click="fn"
(7)v-for
列表渲染指令,循环遍历集合数据,如数组中的数据,
注意: 循环遍历的数据,每一条数据可能发生新增/修改/删改的操作,为了保持数据的状态需要添加一个 key属性绑定数据状态
(8)v-mode1
主要用于表单元素，用于数据双向绑定
关于数据双向绑定：`MVVM`数据处理模式
9、样式处理
(1)c1ass样式处理(掌握)
对象格式:通过变量控制某个样式是否生效
数组格式:通过定义多个变量和样式名称映射的形式,使用数据表达式设置多个样式
(2)style样式处理(了解)项目任务
对象格式:
数组格式:
附录
|