vue概述
第一件事情
学习内容规划：
框架概述
前段复习
前段框架
页面+数据库业务实战
第二件事情：前端框架
1.为什么需要前端框架？
当前前端开发的状态----
前端三大语言：
HTML:构建页面内容和构造
CSS：美化和布局页面内容
JAVASCRIPT：提供交互能力和动态
三者整合就是我们现在看到的网页页面---所有的页面功能都能完成
现在能做什么？
浏览器展示的网页+小程序
网站，网页游戏等等
当前的状态有什么问题？
基础语言开发的时候----面向过程方式---每一步都是自己写---面面俱到
每个人每个人的编写代码的方式和习惯----写作开发难----没有标准
无法适应当下和未来的开发理念----懒
前端开发独立------前端走向服务器化------复杂度进一步增加
当前核心思想
复杂自由发挥----------简单+标准化
前端也需要与时俱进
标准化开发过程------开发用原生的基础语言一个项目--开发窗口--让你填空
简单化业务内容 ------常规的业务操作进行封装--直接使用
------编写一些成型的组件和页面--供你直接使用
将写好的内容----打包整合---形成一套功能包-----成为框架
2.什么是框架
框架是由基础语言编写的半成品的项目
3.框架分类
前端框架
后端框架
整合框架
系统框架
第三件事情：前端框架
1.概念
有前端基础语言【HTML+CSS+JAVASCRIPT】开发有规范的半成品项目
2.分类
js框架【对Javascrip编写业务的简化】：
jquery,angular,node,vue,react
ul框架【html+css构建页面内容的框架】
jqueryui,easyui,layui,boostrap,element-ui,ant design ui等
js引擎：
box.js，three.js，metor.js等等
3.我们选择学习的框架
jQuery-----入门（如何去引用框架）
vue-----主要学习框架-----基础语法
node.js+layui、elementui-----完成功能
4.学习前端框架的前提条件
编写框架的基础语言必须熟练【硬性】
前端框架需要掌握：HTML5-----CSS3-----javascrip（typescript）
第四件事情：前端基础语法的串讲
1.html--- 标签库
架构标签
文本标签
超链接
换行
横线
段落
块
表单
框架
媒体
表格
列表
2.css--- 样式库
引入样式
样式定义
常用样式
选择器
盒子模型
定位
3.JavaScrip--- 脚本语言
1）基础语法
关键字
标识符
注释
变量与常量
运算符
流程语句
数组
函数
2）高级语句
对象概念 闭包概念
常用对象：
字符串 日期 数学等等
3）正则表达式
4）json数据
3）前端开发的工具和环境
工具：
记事本----基础语言用
HBuilderX----开源的前端工具-----建议学习者使用
cscode----壳子---插件开发工具-------开发人员使用
webstrom-----收费
环境：
浏览器：谷歌/火狐/edge
编程网站：w3school
vue入门
第二件事情：通过jQuery来了解前端框架的基本使用
1.认识
官网:jQuery.com/
百度百科
w3cschool
网址：www.w3school.com.cn/jquery/jque…
是js简化的第一个生态框架【jQuery jQuery UI easyUI】
2.用别人的东西----先要获取过来
官网下载：直接找到需要的版本--点击下载 develop
3.创建前段项目--引入框架
将框架资源导入项目工程中【按照官方的要求】
在自己的代码中引入框架资源--就可以直接使用
4.基本使用
1）准备预加载代码
$(function(){
//编写脚本内容
});
解释：$----表示的是jquery对象
2）获取或创建标签对象
获取对象：$("css选择器")
例如：$("#test") 表示获取id的值是test的标签并且打包成对象
类似原生document.selectQuertry()
创建对象：$("标签结构")
例如：$("<a></a>") 表示创建A标签对象
类似原生document.createElement("a")
3）数据处理
提供三个方法
html(内容) 表示可以向标签对象中添加信息，如果信息中包含html标签解析
类似原生innerHTML
text (内容) 直接内容作为文本显示
类似原生innertext
val（内容） 针对表单的处理
类似原生的value
4）事件
$("选择器").事件(function(){
});
第三件事情：框架和编程思维方式的总结
框架---半成品项目----对一些常见的高性能进行了简化封装，提供了简化操作的方法
框架的使用离不开原生的基础编程语言，必须依赖
换句话说框架内容必须嵌入到基础语法编程环境中使用，是用来被调用
编程重点：还是基础语言
前端：html+css+javascrip
后端：javase
数据库：sql语言和命令
编程的方式和要求：
注释少不了
拆分需求，原子化功能【盖房子】
第四件事情：vue框架
1.为什么选择这个框架？
1）有中国人参与的前端框架，国产化生态
2）确实有套规范简化我们的编程
3）提出理念-----单页面组件化开发
2.认识vue
概念：
用于构建界面的JavaScript框架
基于html，css，JavaScript
提供一套声明式，组件化的编程模式
特点：1.组件化
2.数据绑定：双向
3.路由管理：当行链接
4.状态管理
5.UI库支持：支持第三方UI库的整合
响应式数据布局处理
单页面应用开发
6.开发工具支持
vue的分类：
vue2：最早的vue技术--对js的无缝对接开发；
脚手架开发打包服务端应用——webpack
vue学习从基本js框架到服务器化前端开发过度
到2023年12月31日停止维护
vue3：开始因对js，后来主要支持typescript；
脚手架服务器化开发--webpack--新的打包机制vit
主流vue框架
3.搭建vue的环境，编写第一个业务--体验vue开发
1）环境搭建：
常规引入vue库[直接用引入]：常规前端项目开发，嵌入vue
引入在线的脚本
下载脚本到本地
jsdelivr：www.jsdelivr.com/package/npm…
cdnjs：cdnjs.com/libraries/v…
使用最新的hbuilderx创建项目可以知己而包含在项目中
服务器化脚手架搭建环境：命令行工具（CLI）或者自带的脚手架，或者工具快捷方式 服务器化前段项目
要求：
A.基础必须熟练【html，css，JavaScript】
B.熟悉nodejs工具和技术
C.熟悉vit/webpack的打包工具
2）创建项目--普通项目
创建普通web项目---直接使用HBUILDERX的快捷方式
将vue.js文件复制到项目中的就是目录下
在需要的页面中引入vue的js脚本
3）编写显示hello的功能，可以点击数据递增
4）入门程序的分析
获取vue框架脚本---放到项目中---通过引入要页面使用原生js的知识点
编写一个div块给一个id属性值---作为显示内容窗体
{{变量或者表达式}} vue提供的用于在页面上显示数据，以及将变量中的数据获取显示
vi-mode和@click是vue提供的用于将标签与变量绑定的指令和触发时间的指令
5）vue就是脚本编写规范
//创建预加载结构
var vue对象名=Vue.createApp(js对象)；
//将vue应用对象与页面关联 挂载到页面上
vue对象名.mount("页面标签的id属性")；
6）数据关联
vue中js中变量数据和页面只用使用是强关联的---要变都变----双向绑定
通过案例我们也可以发现vue的核心功能-----数据处理和数据到页面显示---一种开发模式----MVVM
4.MVVM和数据的双向绑定
（view,viemodel,model 视图 视图数据模型 数据模型） 第一件事情：课程前言
通知：
课程安排：
第二件事情：环境搭建
第三件事情：vue的基础语法
1.指令
（1）v-model 和 v-bind
v-model：input表单元素值得绑定
v-bind：标签的属性值得绑定
（2）过滤判断 v-if v-else-if v-else
（3）循环 v-for
（4）v-show 用于显示信息 有点类似if
语法：<标签 v-show ="条件表达式">v-show 条件满足</标签>
（5）v-html：用于将变量中的html标签解析显示
（6）v-on:事件处理指令，用其定义的事情可以直接调用vue对象中的方法
2.有些指令可以缩写
v-bind ---》:
v-on ---》@
3.指令的练习
编写一个表格 要求打印200以内的数据 标题行背景lightblue 字体颜色白色
内容行：奇数行 要求 背景橘色 文字黑色
偶数行 背景黄色 文字红色
第一行显示0-9 10个单元格，单元格内容计数：0 计数：1
第二行
如何做到：每五行是一个颜色
4.vue应用对象中内容---模板
template选项：用于定义显示的内容【页面，一个标签，标签组合】
全局模板--用来设计默认显示
局部的模板--用来设置默认显示 没有什么意义
template:"<h1>欢迎你！！！！</h1>" 用于显示默认显示
局部的模板--组件选项内容的定义【主要的应用场景】
5.vue对象中选项--方法
关键字：methods
作用使用处理业务功能，自定义功能
定义语法：
methods：{
方法名：function（【参数】）{
方法内容
}
}
在vue对象中自己调用自己的属性或者方法 需要使用this关键字
案例联系：定义一个文本框，比编写函数判断数据的数据长度是不是和合法 长度需要大于5
如果长度合法显示 显示合法 颜色是绿色
如果不合法显示 不合法两个字 颜色是红色# 第一件事情：环境搭建
工具
普通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：监听属性，用于监控属性的变化，做出相应处理
methods：方法/函数，用于管理所有函数
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,v-else
<标签名 v-if="提哦啊见表达式或者逻辑表达式">
注意:
组合方式
v-if
v-if,v-else
v-if,多个v-else-if
v-if,多个v-else-if
使用方式
组合使用的标签之间必须连续
循环：v-for
语法：
<标签 v-for="(val,key,index) in 对象/数组/整数">
事假处理：v-on
显示掩藏数据的指令：v-show第一件事情：课程前言
主要是：能够让vue构建的页面获取数据中的数据显示
第二件事情：vue语法
1.语法环境结构
2.计算属性的概念
对属性信息做一些计算处理的业务----单独拉出来处理--方法的理念
给属性定义get
语法：
计算属性名：{
get(){
return;
},
set(newdata){
}
}
你想获取计算属性的值--默认去调用其get方法
如果你修改了计算属性的值（例如v-model跟input绑定）---默认调用set方法
把文本框的值通过set方法参数获取传入---可以set方法中获取的数据进行处理
计算 属性名(){
return this.student.filter(function(student){
return student.score>=60;
});
}
}
只有get方法，要求在get方法里面不去写修改操作，只写获取数据的业务
计算属性与函数对比：
两个很像，可以使用函数替换计算属性的业务
但是 计算函数有着特殊的用途---是一个属性（属性的特性） 你处理业务方式--方法的方式
方法/函数---只能处理业务---直接调用方法或者触发事件执行方法【重点】
3.组件开发【vue核心之一】
使用自定义标签的模型----将功能独立化----服务器化vue项目创建
创建vue的项目----搭建环境
nodejs工具：nodejs.org/en
js运行环境
不兼容的话下载版本：node-v16.20.1-x64.msi
其他版本下载：nodejs.org/dist/ 安装
安装vue
检查版本：npm install vue@latest -g
安装的命令：npm install -g @vue/c
安装脚手架：cli.vuejs.org/zh/guide/in…
图形化工具
vue ui
定位到项目中---使用命令
npm run-serve
