Vue入门需要了解的知识一(总结)

Vue是用与2构建用户界面的渐进式框架；
思维导图层层递进
Vuejs核心包 (声明式渐染、组件系统)、客户端路由（vueRouter）、大规模状态管理（Vuex）、构建工具（webpack;/vite）
Vue的两种使用方式：
1、vue核心包开发
场景：局部模块改造
2、VUE核心包&vue 插件 工程化开发
场景：整站开发；
VUE是什么
1、构建用户界面：基于数据动态构建页面；
2、渐进式：循环渐进的学习；
3、框架：一套完整的项目解决方案，提升开发效率（理解记忆规则）
规则- 官网

3、插值表达式{{ }}
1、作用：利用表达式进行插值，渲染到页面上，表达式：是可以被求值的代码，JS引擎将会计算出一个结果，
2、语法：{{ 表达式}}

4、注意点：
a、使用的数据必须存在(data)
b、支持的是表达式，而非语句 if ----for
c、不能再标签中使用{{}} 插值
eg: <p title=“{{}}”>我是标签

5、Vue核心特性 响应式
数据改变 ，视图会自动更新

数据 （修改数据）监听到数据改变 （自动更新视图（dom操作）） 视图界面
6、如何访问和修改数据呢
data中的数据最终会被增加到实例上
a、访问数据：实例名.属性
b、 修改数据：实例名.属性=‘修改的值’

7、开发工具的安装
安装vue开发工具：装插件调试vue应用
a、通过谷歌应用商店安装（外网）
b、极简插件：下载->开发者模式->拖拽安装->插件详情允许访问文件
https://chrome.zzzmh.cn/index

8、vue指令 v-html
vue会根据不同的【指令】，针对标签实现不同的功能
指令：带有V-前缀 的特殊的标签属性
eg: <div v-html=‘str’>
</div>
普通标签属性
eg:<div class=‘box’>
</div>
如果需要动态的去解析标签可以使用哪个语法；
v-html = ‘表达式’ 动态 设置元素 innerHTML

9、vue指令 v-show vs v-if
v-show
1、作用： 控制元素显示隐藏
2、语法：v_show=‘表达式’ 表达式的值true 显示 ，false隐藏
3、原理：切换display:none 控制显示隐藏
4、使用场景：频繁切换显示隐藏的场景
v-if
1、作用：控制元素的显示隐藏（条件渲染）
2、语法：v-if =‘表达式’ 表达式true显示，flase隐藏
3、原理：基于条件判断，是否创建元素或隐藏节点
4、 使用场景：要么显示，要么隐藏，不频繁切换场景

10、vue指令 v-else-if v-else
1、作用：辅助v-if 进行判断渲染
2、语法： v-else 、v-else-if = ‘表达式’
3、注意：需要紧跟 v-if使用

11、vue指令 v-on
1、作用：注册事件 = 增加监听+提供逻辑处理器
2、语法：
a 、v-on :事件名=‘内联语句’
b、v-on:事件名=‘methods中的函数名’
3、简写@事件名

12、vue指令 v-on 调用传参
原来传参的方式 <button @click=‘funs’> 也可以用传参的方式
<button @click=‘funs(参数1，参数2)’>
const app = new Vue ({
el: ‘#app’,
methods:{
funs(参数1，参数2){
}
})
13、vue指令 v-bind
1、作用：动态的设置html 的标签属性 -src |title| url
2、语法：v-bind:属性名 =“表达式”
3、注意：简写形式 ：属性名=‘表达式’
eg： <div >
<img :src= ‘表达式"’></img>
</div>

14、vue指令 v-for
1、作用： 基于数据循环，多次渲染整个元素 ->数组、对象、数字…
<p v-for = ‘…’ >统一查询</p>

2、遍历数据语法：
v-for = ‘（item,index） in 数组’
item 每一项内容，index 下标
省略index ： v-for = item in 数组

3、v-for 中的key
key 作用：给元素增加唯一标识，便于vue中元素的正确排序复用；
注意点：1、key的值只能是字符创或者数字类型；
2、key的值必须具有唯一性；
3、推荐使用id作为key（唯一性），不推荐使用index作为key（会变化，不对应）
<li v-for = (item,index) in 数组 :key= 唯一性>

15、 v-model
1、作用：给表单元素使用，双向数据绑定- >可以获取和设置表单元素的内容
a数据变化->视图自动更新
b视图变化->数据自动更新

综合案列总结
1、列表渲染：
v-for :key的设置为{{}} 插值表达式
2、删除功能
v-on 调用传参 fifter 过滤 覆盖原修改数组
3、增加功能
v-model绑定 unshift 修改原数组添加 并把增加的内容放首位
4、底部统计和清空
数组.length 累计长度
覆盖数组清空列表
v-show控制显示隐藏

指令的补充
指令修饰符
通过指令“.”指明一些指令 后缀，不同后缀封装了不同的处理操作->简化操作

-------如有不足，欢迎指出，期待我们共同进步---------------------------------------------------