18.非单文件组件
1. 复习组件化编程1.1 模块与组件、模块化与组件化
模块
理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
为什么：js 文件很多很复杂
作用：复用、简化 js 的编写，提高 js 运行效率
组件
定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率
模块化
当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用
2. 非单文件组件非单文件组件：一个文件中包含有 n 个组件单文件组件：一个文件中只包含有 1 个组件
1. 基本使用Vue中使用组件的三大步骤
一. 定义组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别
el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器
data必须写成函数，避免组件被复 ...
17.生命周期
1. 生命周期
又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或 组件实例对象。
123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> & ...
日常推荐
1. Github项目推荐1.1 前端
airbnb/javascript
animate-css/animate.css
jquery/jquery
microsoft/Web-Dev-For-Beginners正则大全
any86/any-rule前端图文教程
qianguyihao/Web前端面试指南
qianguyihao/Guide一个css组件库
any86/5a.csscss组件库
javascript-questionsJavaScript面试问题
https://github.com/HalseySpicy/Geeker-Admin最新VUE3.2后台管理框架
https://github.com/Tencent/wujie前端开源项目
1.2 Chatgpt
acheong08/ChatGPT
1.3 兴趣
Prompt-Engineering-Guide做饭指南
HowToCookjava学习指南
Snailclimb/JavaGuidejava工具
dromara/hutool算法可视化工具
algorithm-visualizer(算法项目)通过从 ...
16.自定义指令
1. 自定义指令
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。自定义指令总结：一、定义语法：(1).局部指令：new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数})(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：(1) bind：指令与元素成功绑定时调用。(2) inserted：指令所在元素被插入页面时调用。(3) update：指令所在模板结构被重新解析时调用。三、备注：
指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505 ...
15.内置指令
复习：
v-bind 单向绑定解析表达式，可简写为:v-model 双向数据绑定v-for 遍历数组 / 对象 / 字符串v-on 绑定事件监听，可简写为@v-show 条件渲染 (动态控制节点是否展示)v-if 条件渲染（动态控制节点是否存存在）v-else-if 条件渲染（动态控制节点是否存存在）v-else 条件渲染（动态控制节点是否存存在）
1. v-text 指令作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会，更灵活
1234567891011121314151617181920212223242526272829<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>v-text指令</title> <!-- 引入Vue --> <script type="text/javascr ...
14.过滤器
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>过滤器</title> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/dayjs.min.js"></script> </head> <body> <!-- ...
13.收集表单数据
1. 收集表单数据
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>(1) 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）(2) 配置input的value属性:
v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤12345678910111213141516171819202122232425262728293031323334353637383940414243 ...
12.列表渲染
1. 基本列表v-for指令:
用于展示列表数据
语法：v-for=”(item, index) in xxx” :key=”yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id=&qu ...
11.条件渲染
1. 条件渲染1.1 v-if指令写法：
v-if=“表达式”
v-else-if=”表达式”
v-else=“表达式”适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
1.2 v-show写法：v-show=“表达式”适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
注意：使用 v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>条件渲染</title> <script type="text/javascript&quo ...
10.绑定样式
1. 绑定样式
class样式写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式(1) :style="{fontSize: xxx}"其中xxx是动态值。(2) :style="[a,b]"其中a、b是样式对象。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798<!DOCTYPE html><html> <head> <meta ch ...
数据库
1. 数据库1.1 ubuntu下安装mysql1sudo apt-get install mysql-server
1.2 给数据库创建用户并授权注意：提前说：每次操作完用户、角色、权限后，一定要操作更新权限本质上的作用是将当前user和privilige表中的用户信息/权限设置从mysql库(MySQL数据库的内置库)中提取到内存里
1234567891011121314--root用户登录密码123456mysql -u root -p123456-- 创建用户CREATE USER 'username'@'localhost' IDENTIFIED BY 'password';-- --给用户创建除了GRANT OPTION权限以外的所有权限GRANT ALL PRIVILEGES ON *.* TO 'username'@'localhost' WITH GRANT OPTION;-- 刷新权限FLUSH PRIVILEGES;--查看所有用户以及权限SELECT user, ...
9.侦听属性
1.2 天气案例
1234567891011121314151617181920212223242526272829<title>天气案例</title><script type="text/javascript" src="../js/vue.js"></script><div id="root"> <h3>今天天气很{{ info }}</h3> <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --> <!-- <button @click="isHot = !isHot">切换天气</button> --> <button @click="changeWeather">切换天气</button></div><scri ...
8.计算属性
1.1 插值语法实现1234567891011121314151617181920212223242526<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>计算属性</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/> 名：<input type="text" v-model=& ...
7.事件的基本使用
1.1 事件的基本用法
使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象
@click=”demo”和@click=”demo($event)”效果一致，但后者可以传参
123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vu ...
6.数据代理
1. Vue 中的数据代理
Object.defineproperty方法
12345678910111213141516171819202122232425262728293031323334353637383940<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ // value:18, // ...
5.MVVM模型
1. MVVM模型
MVVM模型是Vue的核心，也是Vue的核心思想
M：模型 Model，data中的数据
V：视图 View，模板代码
VM：视图模型 ViewModel，Vue实例
观察发现
data中所有的属性，最后都出现在了vm身上
vm身上所有的属性 及Vue原型身上所有的属性，在 Vue模板中都可以直接使用
代码：
123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>理解MVVM</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!- ...
4.el和data的两种写法
1. el 与 data 的两种写法1.1 el有2种写法
创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
1.1 data有2种写法
对象式：data： { }
函数式：data() { return { } }注意：如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错一个重要的原则由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了
代码：
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>el与data的两种写法</title> <!-- 引入Vue --> ...
3.数据绑定
1. Vue中有2种数据绑定的方式
单向绑定v-bind数据只能从 data 流向页面
双向绑定v-model数据不仅能从 data 流向页面，还可以从页面流向 data备注(1) 双向绑定一般都应用在表单类元素上，如 <input><select><textarea>等(2) v-model:value可以简写为v-model，因为v-model默认收集的就是value值
代码：
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>数据绑定</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"& ...
