当前核心思想

复杂自由发挥----简单+标准化

前端也需要与时俱进

标准化开发过程-----开发用原生的基础语言-----开发窗口----让你填空

简单化业务内容---常规的业务操作进行封装---直接使用

----编写一些成型的组件和页面--供给你直接使用

将写好的内容---打包整合-----形成一套功能包---成为框架

2.什么是框架

框架是由基础语言编写的半成品的项目

3.框架分类

前端框架

后端框架

整合框架

系统框架

第三件事情：前端框架

1.概念

由前端基础语言【HTML+css+JavaScript】开发有规范的半成品项目

2.分类

js框架【对JavaScript编写业务的简化】

jQuery，angular，node，vue，react

UI框架【html+css构建页面内容的框架】

jqueryui等

js引擎：

box.js,three.js,metor.js等等

3.我们选择学习的框架

jQuery----入门

vue-----主要学习框架内容---基础语法

nodejs+layui，elementui--完成功能

4.学习框架的前提条件

编写框架的基础语言必须熟练【硬性要求】

前端框架需要掌握：html css JavaScript

前端基础语法的串讲

1.html---标签库

架构标签

文本标签

超链接

换行

横线

段落

块

表单

2.css---样式库

引入样式

样式定义

常用样式

选择器

盒子模型

定位

3.JavaScript--脚本语言

1）基础语法

关键字

标识符

注释

变量与常量

运算符

流程语句

数组

函数

2）高级语法：

对象概念闭包概念

常用对象

字符串日期数学等

3）正则表达式

4）json数据

4.前端开发的工具和环境

工具：

记事本---基础语言

HBuilder x

vscode----壳子---插件开发工具

webstrom---收费

环境：

浏览器

通过jquery来了解前段框架的基本使用

1.认识

是前段简化的第一个生态框架

2.创建前端项目--引入框架库

将框架资源导入到项目工程中

在自己对的代码中引入框架资源--可以直接使用

3.基本使用

1)准备预加载代码

$(function(){

})$(function(){
    // 编写脚本内容

}); $表示的是jquery对象

2.获取创建标签对象

获取对象：$（"css选择器"）

例如：$（”#test“）表示获取id的值是test的标签并且打包成对象

类似于document.getElementById("")

创建对象：$("标签结构")

例如：$("")表示创建对象A标签对象

3）数据处理

提供三个方法

html（内容）表示可以向标签对象中添加信息，如果信息中包含html标签解析

类似原生innerHTML

text（内容）直接将内容作为文本显示

类似原生的innertext

val（内容）针对表单的处理

类似原生的value

4）事件

$（"选择器"）.事件（function）(){

});

框架的编程思维方式的总结

框架--半成品项目--对一些常见的功能进行了简化封装，提供了简化操作的方法

框架的使用离不开原生的基础编程语言，必然依赖

搭建vue的环境，编写第一个业务--体验vue开发

1）环境搭建：

常规引入vue库【直接用

等

1入门程序的分析

获取vue框架脚本--放在项目中--通过

编写一个div块给一个id属性值--作为显示内容的窗体

{{变量或者表达式}} vue提供的用于在页面上显示数据，以及将变量中的数据获取显示

v-model是vue提供用于将标签与变量绑定

@click触发事件的指令

2.vue就是脚本编写规范

//创建预加载结构

var vue对象名=Vue.createApp（js对象）;

//将vue应用对象与页面关联挂载到页面上

vue对象名.mount（"#页面标签的id属性"）

3.数据关联

vue中js中变量数据和页面主要使用是强关联的---要变都变--双向绑定

通过案例我们也可以发现vue的核心功能--数据处理和页面显示--一种开发模式--MVVM

4.MVVM和数据双向绑定

view--viewmodel--model 视图--视图模型--数据模型

网页页面---视图和数据之间连接桥梁【vue】---数据【数据库或者文件】

vue的作用

监听变化和事件触发--去进行数据双向关联

vue语法

1 框架--成品功能--可以直接使用

规范会编程

2.核心特点

组件化数据绑定路由导航管理【页面切换跳转】状态--共享数据服务器化

3.vue如何去帮我们处理业务

data：方法用于定义vue中的属性变量

computed：计算数据，数据变动处理

watch：监听属性，用于监控属性的变化，做出相应处理

methods：方法/函数，用于管理所有的函数

component：组件的定义，自定义组件【自定义模块页面】

template：模板，用于定义初始化内容

data选项

解释：是一个函数，通过函数的返回值来进行数据获取

返回值是一个对象，返回的对象中用于定义我们的组件需要的属性变量

语法规范：

data（）{

return{

}

备注：

定义属性的语法：

属性名：属性初始值

多个属性使用，隔开

属性的类型--js支持的所有的类型

vue为了方便获取vue对象中信息单独使用，自动将自己的模块信息打包成属性对象：$模块名字

获取data里面的属性

挂载后返回对象.$data.属性名

3.页面显示数据的方式

1）显示数据

vue提供页面显示动态数据的语法

备注：

显示内容

常量数据

vue变量数据

2）控制显示【指令】

vue指令是干什么的

vue提供的一些v开头用数据绑定的特殊代码，主要用来是实现数据

与页面的关联【封装原生DOM的操作过程】

属性数据模型绑定;

v-model:数据模型的绑定

只对input有效

v-bind：用于绑定其他处理input的值以外的属性的动态值的绑定

控制数据的显示

v-if ，v-else-if，v-else

注意：

组合方式

1 v-if

2 v-if ，v-else-if

3 v-if ,多个v-else-if

4 v-if ,多个v-else-if，v-else

使用方式

组合使用的标签之间必须连续

循环：v-for

5 v-show用于显示信息有点类似if

true 和 false 判断

语法：

条件满足

6 v-html: 用于将变量中的html标签解析

7 v-on 事件处理指令，用其定义的事件可以直接调用vue对象中的方法

指令的联系

编写一个表格

第一行显示0-9 10个单元格，单元格内容计数：0 计数：1

vue对象中选项--方法

关键字：methods

用于处理业务功能

定义语法：

methods：{

方法名：function（【参数】）{

方法内容

}

在vue对象中自己调用自己的属性或者方法需要使用this关键字

vue计算属性的概念

对属性信息做一些计算处理的业务---单独拉出来处理---方法的理念

给属性定义get和set方法

语法：

计算属性名：{

get : function(){

set : (newdata){

}

computed:{ passstudent:{ get(){ return this.student.filter(student=>student.score>=60); }

}

只有get方法，要求在get方法里面不去写修改操作，直接获取数据业务

计算属性与函数对比：

两个很像，可以使用函数替换计算属性的业务

但是计算数据有着特殊用途---是一个属性（属性的特征）处理业务方式--方法的方式

组件开发--【核心之一】

3.组件开发【vue核心之一】

      使用自定义标签的模型----将功能独立化--服务器化vue项目创建

     创建vue的项目---搭建环境

           nodejs工具  ：https://nodejs.org/en

                   js的运行环境

                  其他版本下载：https://nodejs.org/dist/

         安装脚手架：

                https://cli.vuejs.org/zh/guide/installation.html

       安装的命令：

             npm install -g @vue/c

vue小知识点

条件满足