## 一：通过jQuery来了解前端框架的基本使用
#### 1：认识
是 js 简化的第一个生态框架【jQuery，jQueryUI，EasyUI】
#### 2：下载---获取
https://jquery.com/
#### 3：创建前端项目，引入框架
将下载的框架资源导入至项目工程中（按照官方要求）
在自己代码中引入框架资源后使用
#### 4：基本使用
##### 1）准备预加载业务
```html
$(function(){
//编写脚本内容
}
```
$：表示jQuery对象
##### 2）获取或者创建标签
获取对象：$("css选择器")
例如：$("#addbut").click(function()
类似于原生document.selectQuerty（）
$("#addbut")：表示获取id的值是text的标签并且打包成对象
创建对象$("标签结构")
例如：$("<td></td>").html("李四")
$("<td></td>")表示创建对象td标签对象
##### 3）数据处理
提供三种方法
HTML（内容）：表示可以向标签中添加信息，如果信息中包含HTML标签解析
类似原生的 innerHTML
text（内容）：表示直接将内容作为文本展示
类似原生的innerHTML
var（内容） ：主要针对表单的处理
类似于原生的value
##### 4）事件
$("选择器").事件（function(){
}）；
## 二：框架和编程思维方式的总结
- 框架就是**半成品项目**，是对一些常见功能进行了**简化封装**，并且提供了简化操作的**方法**
- 框架的使用**离不开**原生的基础编程语言，并且**依赖于**基础语言。
- 框架内容必须嵌入到基础语法编程环境中使用，是用来被调用的，具有依赖性，简化性
*编程的重点自始至终都是基础语法*
------
前端：**HTML + CSS + JavaScript**
后端：**javase**
数据库：**SQL语句和命令**
------
编程的方式和要求：
注释
拆分需求，原子化功能【盖房子】
## 三：vue框架
#### 1：为什么选择vue.js
1）是中国人主导参与的前端框架，国产化生态
2）有一套用来简化编程的规范
3）提出了 **单页面组件化 开发** 的理念
#### 2：认识vue
渐进式JavaScript框架
**概念：** vue 是用于构建用户界面的框架，基于HTML + CSS + JavaScript所构建，并提供了一套声明试，组件化的编程模型，（可自己定义）
**特点：**（都和数据相关）
组件化
数据绑定：双向
路由导航管理：导航链接统一管理
状态管理
第三方的UI库的整合
开发工具的支持
响应式数据布局处理
单页面应用开发
**分类：**
vue2：最早的vue技术，对js的无缝对接开发；
开发模式为脚手架开发打包服务端应用，打包方式是用webpack
vue学习是从基本的js框架到服务器化前端开发过度
2023年底停止维护
vue3：开始应对js，后来主要支持typescript；
脚手架服务器化开发，主要为单页应用，打包方式为vit
主流vue框架
#### 3：搭建环境，编写业务
**1）环境搭建：**
常规引入 vue 库，常规前端项目开发，嵌入vue
引入在线的脚本：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
下载脚本到本地
例如 [jsdelivr](https://www.jsdelivr.com/package/npm/vue) 或 [cdnjs](https://cdnjs.com/libraries/vue)
使用最新的hbuilderX创建项目可以直接包含在项目中
**2）服务器化脚手架环境：**
命令行工具【cli】
自带脚手架
工具快捷方式 服务器化前端项目
要求：熟练基础
熟悉nodejs工具和技术
熟悉vit或者webpack的打包工具
**3）创建项目--普通项目**
创建普通web项目，使用hbuliderx的快捷方式
将vue.js文件复制到目录下
在需要的页面中引入vue的js脚本
**4）编写显示hello的功能，可以点击数据递增**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.global.min.js" type="text/javascript" language="JavaScript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg+"---"+res+"---"+count}}
<button @click="count++">点击</button>
<input type="text"v-model="res" />
</div>
</body>
</html>
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
