黑马复习vue
创建vue项目
vue是组件化开发
浏览器可执行文件1.htm 2.css 3.js 4.image
构建工具：webpack vite
assets是存放公共资源的文件夹
以下是入口文件，关联了index.html，把所有内容挂载到div显示，把所有文件转化为main.js可执行文件，然后从根组件开始，一层一层往下执行，同步异步在根组件之内，然后正常运行
- 第1行：从Vue库导入
createApp工厂函数 - 第2行：导入根组件
App.vue - 第4行：创建Vue应用实例（一个项目只有一个）
- 第7行：将实例挂载到DOM的
#app节点（这个app一般在index.html里面的<div>标签的id，因此所有的内容在浏览器检查的时候都是显示出，所有代码都被这个<div id=“app”>包裹）
响应式更新就是数据更新后视图自动更新
vue
v-html：自动解析在数据中的标签
比如在数据中
msg：{
<h3>数据</h3>
}
然后html部分中<div v-html=“msg”></div>
那么页面就会显示被h3标签css渲染后的“数据”两个字
但是<div>{{msg}}</div>则会显示没有css的“<h3>数据</h3>”
v-show：根据“是”与“否”来控制css的display：none来显示与隐藏盒子
（一般用来显示光标移动到某个位置出现某个弹窗的功能）
v-if：根据“是”与“否”来控制盒子是否存在
（一般用来条件判断不同条件显示不同内容）
v-on：用来触发事件
比如（不一定是执行语句，放函数也行）
先创建一个数据abc=100
<button v-on:click="abc++">+</button>
那点击这个+号就会执行加一的操作
调用事件的话可以使用@click=“函数名”直接调用函数
computed放计算属性的函数，只要没变就只计算一次缓存起来，调用的时候用同一个结果
放methods就不一样了
push在数组后面加然后自动渲染
concat在数组后面加但不自动渲染
为true的时候会给个class属性，这样的话可以尝试触发其他时间之后把这个值改为true，然后css属性变更
甚至能绑定两个css，多个的时候可以搞个对象或数组，语法也行，语法放两个也行
style也可以绑定
侦听器，侦听数据变化前后的，用console.log打印
表单输入绑定实时变更
但是用于搜索框的话输入一次搜索一次有点浪费资源，可以加个.lazy。这样的话按回车之后才搜索
DOM是**“活的”文档模型**，将标签、属性、内容转化为可编程对象，并通过树形结构管理其关系。它既是浏览器渲染页面的依据，也是开发者实现动态交互的桥梁
获取DOM节点，现在这个打印出来的dom包括了标签和属性和内容
但是ref挺消耗性能的除非不用dom实现不了功能，不然建议不要用
引用组件，组件不用写多余的来着直接被拿来用
组件注意
多个组件
全局注册组件（不建议因为不好找关系而且就算不使用也会被打包）
组件都是层层调用的，组件间传值props（这字段只能父级传给子级不能反，并且这个字段是只读的，不允许修改从父组件传来的数据），以下是主页面调用父组件，父组件调用子组件，最后主页面显示出来是三行内容
先传静态的
还能传多个数据，还是静态的
还能传动态的
传各种类型的值都行，数字类型
数组类型
对象类型
数组传值规定类型，传了错误类型会报黄色警告
还有
实际上不传是不会有警告的，但是想要必传可以设置警告
组件事件（props只能数据由父传子，这个组件事件可以让数据子传父）
组件事件同时传递参数
更方便看的话可以这样，点击之后显示传过来的值
用v-model在组件间（子传父）进行数据实时传递
特殊子传父，父给子传了函数，子给父回传数据
更方便看
传递html结构----插槽 <slot></slot>插槽出口
具名插槽，如果不给名字的话，组件每个插槽都会输出一次<h3>和<p>
可以简写
vue的生命周期
直观看八大周期
组件切换
组件卸载
组件保持存活
同步是指先A后B再C严格按顺序，并且全部加载
异步是ABC条件允许情况下同时进行，用到的时候再加载
异步组件
组件数据props是逐层传递，爷传父再传子
但是可以provide可以跨组件透传（但是也只能由上到下传递，而且没关系的传不了）
传递动态数据也行
也可以换种方式接收
也可以定义全局变量
浙公网安备 33010602011771号