vue三十天学习路线--day01

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样式处理(了解)项目任务
        对象格式:
        数组格式:

附录