目录
一、VueJS是什么?
二、Vue的优缺点
三、vue2和vue3的模板区别
vue2响应式原理简单案例
四、MVVM数据双向绑定
数据双向绑定数据(v-model)
五、Vue的安装和使用
六、Vue模板语法-文本渲染
七、常用的vue的指令
八、vue常见修饰符
表单修饰符
事件修饰符
Vue中常用的按键修饰符
鼠标修饰符
九、vue数组改变不渲染问题
vue语法提示 VScode插件推荐 （全部安装效果更佳）
前言：着重记录vue2相关内容
一、VueJS是什么?
它是一个轻量级MVVM框架
数据驱动+组件化的前端开发
Github 超过25K + 的star 熟，社区完善
Vue.js更轻量，gzip后大小只有26K；更易上手，学习曲线平稳
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期
二、Vue的优缺点
优点
1. 轻量级
Vue作为一款轻量级前端框架，大小只有18–21KB，工程搭建简单，只需要几行命令符。因为Vue使用的主体语言为JS，开发者可以灵活地将其他框架（如React和Angular）的项目迁移到Vue，具有很高的集成能力。Vue提供的router路由可以便捷地搭建一个多界面应用。
2. 高性能
虚拟DOM和响应式避免了不必要的全局重新渲染，提升了用户体验，使用户操作更加流畅。
3. 好上手
与面向对象编程性质类似，组件化更符合人类思维。打个比方，我们在设计网页时，通常会把一个界面分成一块一块的、用于某功能的特定样式模块。Vue的组件化使前端开发更加容易理解，同时MVVM可以更便捷地实现交互，对新手十分友好。
4. 插件化
由于Vue框架的流行性，目前有许多基于Vue的npm扩展包和开发工具（如Vuex）。Vue可以在一个文件下统一管理所有外部插件的全局使用。
5. 便于测试
组件化利于开发者对于单一组件进行测试，很少发生在整个页面下找不到是哪个地方报错的情况。
缺点
1. 生态环境不够完善
虽然Vue五年以来的发展寻索，生态环境不如React和Angular规范。Vue开发的讨论社区较小。
2. 国外市场小
Vue是由中国尤大神开发的，主要有阿里巴巴、饿了么等国内大公司作为主流框架，国外大部分使用React和Angular。
三、vue2和vue3的模板区别
1.响应式的区别
2.0中vue的响应式是基于数据劫持（object.defineProperty这个方法来进行劫持的）当前这个方法是兼容主流浏览器的ie9以上都可以使用 他是可以监听数据的变化 从而让vue做出改变
但是他有一个bug object.defineProperty这个方法只能够监听初始化的时候数据 如果程序运行到一半你给data中的对象或者是数组添加新属性的时候 由于他只会在初始化监听 那么你中间添加的内容就无法监听 没有监听到 就没有数据劫持 没有数据劫持 那么久没有双向绑定 没有双向绑定 那么数据变视图就不会发生改变 我们使用$set
3.0中 对2.0的bug进行了解决
3.0中的响应式是采用ES中最新的一个规范 Proxy来进行替代的 proxy是惰性监听（他不会在初始化的时候监听数据 而是在你使用数据的时候才回去监听）
proxy是一个比较新的规范 ie还不支持 vue为了解决ie不支持的问题 所以单独给ie进行了适配
传统主流浏览器 使用proxy来进行监听
但是在ie中还是使用2.0中的object.defineProperty
2.底层的变化
3.0底层全部都是使用ts（typescript）编写的 今后3.0可以更好的与ts结合
3.属性声明方式
2.0中都是使用vue属性的方式来创建数据 方法 计算属性等内容的
3.0中 改变了 变成了 api方式进行创建 也就是或vue3.0把变量 方法 计算属性等内容封装成了一个个的方法 使用方法的方式进行调用
vue2响应式原理简单案例
let person = {name: '张三',age: 15,}let p = {}Object.defineProperty(p, 'name', {configurable: true, //配置这个属性表示可删除的，否则delete p.name 是删除不了的 falseget() {//有人读取name属性时调用console.log('get拦截查看');return person.name},set(value) {//有人修改时调用console.log(value,'set拦截修改');person.name = value}})p.name = '修改属性'console.log(p.name,'读取拦截');
四、MVVM数据双向绑定
MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。
什么是数据双向绑定呢？当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。
在用Vue之前，我完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。
简单理解：MVVM模型1.M:模型(Model) : data中的数据2. V:视图(View）:模板代码3.VM:视图模型(ViewModel):Vue实例观察发现:1.data中所有的属性,最后都出现在了vm身上。2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。<div id="root"><h1>博客名：{{name}}</h1><h1>本块内容：{{address}}</h1><h1>测试一下1：{{1+1}}</h1><h1>测试一下2：{{$options}}</h1><h1>测试一下3：{{$emit}}</h1><h1>测试一下4：{{_c}}</h1></div></body><script type="text/javascript">Vue.config.productionTip = false;//阻止vue 在在启动时生产生成提示const vm = new Vue({el:'#root',data:{name:'大脸胖柴',address:'MVVM',a:1}})console.log(vm);</script>数据双向绑定数据(v-model)
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
注意：
双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等文本框/单选按钮/textarea, 绑定的数据是字符串类型单个复选框, 绑定的是boolean类型多个复选框, 绑定的是数组select单选对应字符串，多选对应也是数组
五、Vue的安装和使用
1. 直接引用script
<script src="/vue@next"></script>
2. 安装脚手架
npm install -g @vue/cli
3.创建应用实例（此处为vue3）
const app = Vue.createApp({
data() { return { count: 4 }
} })
const vm = app.mount('#app')
console.log(vm.count) // => 4
<body><div id="root"><h1>插值语法</h1><h3>你好，{{name}}!</h3><hr><h1>指令语法</h1><a v-bind:href="url">欢迎新同学</a><br><a :href="url">欢迎新同学</a></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{ name:'大脸胖柴',url:'/TKY666?type=blog'}})</script></body>
六、Vue模板语法-文本渲染
<body><div id="root"><h1>插值语法</h1><h3>你好，{{name}}!</h3><hr><h1>指令语法</h1><a v-bind:href="url">欢迎新同学</a><br><a :href="url">欢迎新同学</a></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{ name:'大脸胖柴',url:'/TKY666?type=blog'}})</script></body>
七、常用的vue的指令
v-text <div v-text="msg"> </div>不能识别标签（不存在差值表达式闪烁问题）
v-html <div v-html="msg"> </div>能识别标签
v-on 绑定事件 v-on:事件名=“方法名” 可以简写维 @事件名=“方法名”
v-model 实现的是表单元素的数据双向绑定
v-once 只接收显示首次挂载值，后续变量更改不再更新显示
v-show 根据条件显示或者隐藏元素和组件
v-bind 给元素绑定属性 title="sdsd" v-bind:属性名=“变量” 简写 :属性名="值"
v-for 列表渲染，将数据渲染到页面显示
注意：v-for不只是可以渲染数组、对象属性、指定次数（数字）、字符串等，v-for还可遍利方法（前提：方法return返回值是以上可渲染的数据类型）
案例：情景描述
由于前一个下拉框选中项的crossId决定了后一个下拉框展示的下选项，且前一个下拉框的每一项数据包含后一项下拉框的所有数据选项。渲染数据是包含关系，但是两个下拉框又是并列关系，所以我们需要由前一项判断得出后一项。下面是代码：
原本写的代码：
后续大佬指点直接in function方式代码
<template v-for="(item, index) in coordCrossList.length"><a-checkbox :value="index" class="checkboxStyle" style="margin-bottom:20px;"><div class="checkboxStyle"><!-- 下拉框1 匝道口--><a-select v-model="coordCrossList[index].crossId" style="width: 200px;" @change="handleChange4"><a-select-option :value="rampCrossings[INDEX].crossingId"v-for="(ITEM, INDEX) in rampCrossings">{{ ITEM.name }}</a-select-option></a-select><!-- 下拉框2 控制模式--><a-select v-model="coordCrossList[index].ctrSchema" style="width: 200px;margin: 0 20px 0 41px;"@change="handleChange5"><a-select-option :value="ITEM.stageNo" v-for="(ITEM, INDEX) in getStageList(coordCrossList[index].crossId)">{{ITEM.stageNo}}:{{ITEM.name}}</a-select-option></a-select><img src="../images/delete.png" alt="删除" width="14px"></div></a-checkbox></template>可以看到上方下拉二是直接渲染方法的返回值
方法代码：
methods: {//动态渲染 下拉二 控制模式的选项列表getStageList(crossingId) {let item = this.findItem(this.rampCrossings, "crossingId", crossingId);if (!!item) {return item.stages;}return [];},//数组中根据键值对找对象findItem(arr, key, value) {for (let i in arr) {let item = arr[i];if (item[key] === value) {return item;}}return null;},}v-if 根据条件显示或者删除元素和组件
v-else-if 配合v-if使用
v-else 三个修饰符必须紧挨着使用
v-cloak 解决差值表达式闪烁问题用法：给含有差值变量的标签添加此指令，然后给这个指令设置样式display：none;在外链式的vue未被引入前，让含有v-cloak的标签全部隐藏，防止视图出现 " ￥{{ msg}}元 " 的未渲染情况。
<style>[v-cloak]{display: none;}</style><body><div id="app" v-cloak>￥{{msg}}元</div><script>new Vue({el: '#app',data: {msg: '100'}})</script></body>
八、vue常见修饰符
表单修饰符
lazy:失去焦点或按下回车后才更新trim:过滤首尾空格number:自动将用户输入转为数字类型，若先输入数字，则限制输入的只能是数字，若先输入的是字符串，则number修饰符无效事件修饰符
stop:阻止事件冒泡prevent:阻止默认行为capture:当捕获存在时，先从外到里捕获，然后从里到外冒泡输出self:绑定事件的元素本身，才可触发该事件once:只触发一次回调passive：事件的默认行为立即执行，无需等待事件回调执行完毕Vue中常用的按键修饰符
回车：enter删除：delete和backspace(捕获“删除”和“退格”键)退出：esc空格：space换行：tab (特殊，必须配合keydown去使用)上：up下：down左：left右：right 系统修饰键（用法特殊）：ctrl、alt、shift、meta(表示windows键)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名
鼠标修饰符
left 左键点击right 右键点击middle 中键点击修饰符可以连续写，比如可以这么用：
@click.prevent.stop="showInfo"
九、vue数组改变不渲染问题
场景：vue索引修改数组与对象属性增删，页面不会动态渲染
原因：由于JavaScript的限制，Vue不能检测数组和对象的变化
解决方法1：Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
这些被包裹过的方法包括：
push() 给末尾加元素pop() 清除末尾元素shift() 给数组的第一位进行删除unshift() 给数组首位添加元素splice() 删除元素/替换元素/插入元素sort() 以字母顺序对数组进行排序reverse() 翻转
不包括的方法有：
slice()filter()concat()
解决方法2：
使用vue封装的API——set
用法1this.$set(arr,index,newVal); // 修改的数组, 索引 , 新值this.$set(this.obj.a,'66'); // 修改的对象属性, 属性值用法2import Vue from 'vue';Vue.set(arr,index,newVal); // 修改的数组, 索引 , 新值Vue.set(this.obj.a,'66'); // 修改的对象属性, 属性值
项目中遇到场景：在for循环遍历过程中给数组索引项添加属性并赋值也会造成不渲染问题，代码如下
this.listAll[i].deviceName = item.deviceList[0].device.name;this.listAll[i].deviceLaneId = item.deviceList[0].laneId;解决方法：可在索引赋值前通过forEach先把属性添加上，然后在通过索引直接给属性赋值（关键是避免使用索引添加属性并直接赋值的情况）
更多方法：vue更新数据却不渲染页面解决方案_自信酷的博客-CSDN博客_vue赋值后不渲染1.Vue不能检测通过数组索引直接修改一个数组项原因：由于JavaScript的限制，Vue不能检测数组和对象的变化解决办法：this.$set(arr,index,newVal)2.选择功能选中时赋值了，但没渲染页面场景：点击这个没有显示“√”解决办法：checkClick (item) { item.check =! item.check; this.$forceUpdate() },听说循环数据更新的层级太深，导致数据不更新，从而导致视图./qq_33235582/article/details/121706935
vue语法提示 VScode插件推荐 （全部安装效果更佳）
Vue基础——vue2和vue3的模板区别 MVVM数据双向绑定 Vue的安装和使用 Vue模板语法 常用的vue的指令 vue数组改变不渲染问题 VScode插件推荐
如果觉得《Vue基础——vue2和vue3的模板区别 MVVM数据双向绑定 Vue的安装和使用 Vue模板语法》对你有帮助，请点赞、收藏，并留下你的观点哦！
