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"& ...








