vue

第一课

第一件事情：课程前言

学习内容规划：

框架概述

前言复习

前端框架

页面+数据库业务实战

第二件事情：前段框架

1.为什么需要前端框架？

当前前端开发的状态---

前端基础语言：

html：构建页面内容结构

css：美化和布局页面内容

Javascript：提供交互能力和动态

三者整合就是我们看到的网页页面---所有的页面和页面功能都能完成

现在能做什么？

浏览器展示的网页+小程序

网站，网页游戏等等

当前的状态有什么问题？

基本语言开发的时候---面向过程方式--每一步都是自己写--面面俱到--开发业务复杂难度大

每个人每个人的编写代码的方式和习惯--写作开发难--没有标准

无法适应当下和未来的开发理念--懒

前端开发独立----前端走向服务器化---复杂度进一步增加

当前核心思想

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

前端也需要与时俱进

标准化开发过程----开发用原生的基本语言一个项目--开发窗口--让你填空

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

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

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

 

2.什么事框架？

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

3.框架分类

前端框架

后端框架

整合框架

系统框架

第三件事情：前端框架

1.概念

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

2.分类

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

jQuery ，angular，node，react，

ul框架【HTML+css构建页面内容的框架】

jqueryul，easyUI，layUI，boostrap，element-ui，ant design ui等

js引擎：

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

3.我们选择学习的框架

jQuery---入门

4.编写框架的基本语言必须熟练【硬性】

前端框架需要掌握：HTML5----css3---JavaScript

 

第四件事情：前端基础语法的串讲

1.HTML---标签库

架构标签

文本标签

换行

横线

段落

快

表单

框架

表格

列表

2.css---样式库

引入样式

样式定义

常用样式

选择器

盒子模型

定位

3.JavaScript ---脚本语言

1）基础语法

关键字

标识符

注释

变量与常量

运算符

流程语句

数组

函数

2）高级语法：

对象概念 闭包概念

常用对象：

​ 字符串 日期 数学等等

3）正则表达式

4）json数据

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

工具：

记事本---基本语言用

hbuilderx----开源的前端工具---建议学习者使用

vscode--壳子--插件开发工具--开发人员使用

webstron--收费

环境：

浏览器：谷歌/火狐/dege

第二课

第二件事情：通过jQuery来了解前端框架的基本使用

1.认识

官网 https：jquery.com/

百度百科

w3cschool

是前端简化的第一个生态框架【jQuery UI easyUI】

2.用别人得东西----先获取过来

官网下载：找到需要得版本--点击下载

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

将框架资源导入到项目工程中【按照官方的要求】

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

4.基本使用

1）准备预加载代码

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

 

解释：$表示的是jquery对象

2）获取或者创建标签对象

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

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

类似原生 doucment.selectquertry（）

创建对象：$（“标签结构”）

例如：$（“<a><a>”）表示创建对象A标签对象

类似原生doucment.createlement（“a”）

3）数据处理

提供三个方法

html（内容）表示可以想标签对象中添加信息，如果信息中包含html标签解析类似原生 innerhtml

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

类似原生的innertext

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

类似原生的values

 

4）事件

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

})

 

https://www.w3school.com.cn/jquery/jquery_events.asp

 

 

第三件事情：框架的编程思维方式的总结

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

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

换句话说框架内容必须嵌入到基础语法编程环境中使用，是用来被调用

 

编程重点：还是基础语法

前端：html+css+JavaScript

后端：javase

数据库：sql语句和命令

 

编程的方式和要求：

注释少不了

拆分需求，原子化功能【盖房子】

 

第四件事情：vue框架

1.为什么选择这个框架？

1）有中国人主导参与的前端框架 国产化生态

2）确定有一套规范简化我们的编程

3）提出理念----单页面组件化开发

2.认识vue

​ 概念：

用户构建界面的JavaScript框架

基于html，css，JavaScript

提供一套声明式，组件化的编程模式

 

特点：

组件化

数据库绑定：双向

状态管理

路由管理：当行链接

支持第三方UI库的整合

响应式数据布局处理

单页面应用开发

vue的分类：

vue2：最早的vue技术---对js的无缝对接开发：脚手架开发打包服务端应用--webpack

 

​ vue学习总基本js框架到服务器化前端开发过度

​ 到2023年12月31号停服维护

 

vue3：开始因js，后来主要支持typescript；

​ 脚本架服务化开发--webpack--新的打包vit

​ 主流vue框架

 

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

1）环境搭建：

常规引入vue库【至二级给<script>引入】：常规前端项目开发，嵌入vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

​ 下载脚本到本地

​ [jsdelivr](https://www.jsdelivr.com/package/npm/vue) https://www.jsdelivr.com/package/npm/vue

​ [cdnjs](https://cdnjs.com/libraries/vue) https://cdnjs.com/libraries/vue

​ 使用最新的hbuilderx创建项目可以包含项目中

服务器化脚手架：命令行工具（CLI）或者自带的脚本架，或者工具快捷方式 服务器化前端项目要求：

​ A，基础必须熟练【html,css，JavaScript】

B.熟希nodejs工具和技术

C.熟希vite/webpack的打包工具

2）创建项目-- 普通项目

创建普通web项目--直接使用hbuilderx的快捷方式

​ 将vue.文件复制到项目中得就是目录下

在需要得页面中引入vue得js脚本

​ < script src-”脚本路径“>

3）编写显示和哦哦了的功能，可以点击数据递增

 

 

4）入门程序分析

​ 获取vue框架脚本---放到项目中--通过<script>引入要页面使用 使用js的知识点

​ 编写一个div快给一个id属性--作为显示内容窗体

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

vi-mode和click 是vue提供的用于标签与变量绑定的指令和触发事件的指令

5）vue就是脚本编写规范

//创建预加载结构

var vue对象= vue.createApp（对象）；

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

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

6）数据关联

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

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

4.MVVM和双向绑定

（view ， viewmodel ， model 试图 视图模型 数据模型）

 第三课

第一件事情：环境搭配

工具

普通web项目

引入vue.js

第二件事情：vue语法

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

规范会编程

2.核心特点

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

3.原理--MVVM模式

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

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

vue的作用：

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

4.基本结构

创建vue的对象---进行相关业务的统一处理

var vueapp=Vue.createApp({
vue处理的业务
});

 

需要将vue对象关联或者挂在到页面上

//挂载到页面标签
var vm=vueapp.mount("关联的标签对应选择器（id）");

5.vue如何去帮助我处理业务或者vue提供了哪些技术来帮助我们处理业务

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

computed：就散数据，数据变动处理

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

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

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

template：模块。用于定义处理内容

6.data选择

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

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

语法规范：

data(){

​ return{

​ 定义你需要的变量属性

​ }

}

​ 备注：

​ 定义属性的语法：

​ 属性名：属性初始值

​ 多个属性使用，逗号隔开

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

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

​ 获取data里面的属性

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

3.页面显示数据分方式

1）显示数据

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

{{显示的内容}}

​ 备注:

​ 显示内容分类

​ 常量数据

​ vue变量数据

运算表达式

2）控制显示【指令】

vue指令是干什么的？

​ vue提供的一些v- 开头用数据绑定的特殊代码，主要用来是实现数据与页面的关联【封装原生DOM的操作过程】

​ vue提供的指令有：

v-model：数据模型的绑定，文本框信息与变量属性双向绑定

​ 只对input标签信息有效

​ 语法：

​ <input type="text" v-model="属性变量名">

​ v-bind：用户绑定其他除了input的值以为的属性的动态的绑定

​ 语法：

​ <标签名 v-bind：标签属性名=“属性变量值” >

控制数据的显示

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

 

<标签名 v-if=“条件表达式或者逻辑关系”>

注意：

组合方式

​ v-if

​ v-if，v-esle

​ v-if，多个v-else-if

​ v-if，多个v-else-if，v-eles

使用方式

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

循环：v-for

​ 语法：<标签 v-for="(val,key,index)in 对象/数组/证书">

事件处理：v-on

显示掩藏数据的指令：v-show