这是我参与「第五届青训营」伴学笔记创作活动的的第8天 (❤ ω ❤)
Vue简介
-
vue是一套用于构建用户界面的渐进式框架，它被设计成可以自底向上逐层应用。
-
我们使用vue对原本的三件套项目进行重构，作为应用的一部分嵌套进原生的js代码，逐步实现vue的功能化，称为渐进式。
-
vue的核心库只关注视图层，便于与第三方既有项目进行整合，支持较为广泛的原生组件适配。
应用方式
- CDN方式导入vue源码包进行检测，优点简洁方便，缺点大型项目不适用。
- vue3使用Proxy进行代理，在网站上console后台进行修改，数据能实现双向绑定（响应式原理）
- vue3可以借助vite进行web开发构建
常见知识点整理
1、app.vue是根组件，组件里的style只能控制mount里面挂载的dom节点，以外的style需要通过main.js导入样式； 组件实例的所有属性(property)，无论如何定义，都可以在组件模板中访问
2、v-once 当数据更改时，插值处内容不会更新，只保留第一次渲染时的内容
3、v-html="" 以html形式渲染
4、v-bind: 动态绑定属性值 例如v-bind:src="url",改指令将会把url变量动态的放到src里；直接:src 也可以，这是特定的简写，语法糖
5、v-on则是监听事件，例如@click，监听点击事件，使用@则为语法糖，@click
6、v-bind:[attr]="url" 动态属性名，attr为变量
7、@[MouseEventM="attr = 'class'" 动态事件，MouseEvent为变量
8、键值中，键加上中括号的为变量，值为表达式或者要执行的函数
9、计算属性，computed，是一个对象，里面有若干个方法，方法里返回值，可以直接在mustache语法中直接调用，和属性一样，只要它的依赖值不变，重复调用也不会重新计算，有缓存；默认是简写，只有get，在需要是可以加上setter，set会在设置该属性的时候自动执行，并有一个参数为修改的值
10、methods方法需要加括号进行调用，会重新执行，没有缓存，当依赖值发生变化时，也会重新调用
11、watch 监听数据的变化 ，它是一个对象，属性名为需要监听哪个变量的名字，有两个参数，一个为新的值，一个为旧的值 例如：当message变量数据发生改变时，执行该函数，如果需要监听对象里的属性，那就需要使用深度监听，如需要监听前执行一次函数则需要immediate，立即执行一次
深度监听的原理：递归遍历里面的所有属性，当发生变化时执行函数
- 如要单独监听某个属性，在监听对象加引号'obj.age' : {}即可
12、侦听器和计算属性到底用谁，侦听器一般用于调用异步等等操作，计算属性一般用于数据的计算，返回值给属性使用
13、v-model 数据双向绑定 一般用于input select等标签，当更改input的value，data里的值也会更改，data更改，value也会更改
14、computed和watch都可以使用高级写法，把他写成对象
15、class对象写法，属性名是类名，属性值为布尔类型，是否启用，如果有两个class他会进行合并，不会覆盖，或者直接把对象写在data里，然后把对象名写在class也行
16、class数组写法，数组里面的值就是变量名，最后显示出来的就是变量的值 例如 [custom] 他会查找data里custom变量，然后把值给class；class也可以数组结合对象
17、style对象数组写法 对象里，属性名为css属性名(如果是javascript要用驼峰命名法，如果为字符串直接写css属性也行)，属性值为data变量或者字符串
18、注意，style和class的对象属性名都不是变量，无法获取data里的变量，但可以是字符串
19、v-if v-else-if v-else条件性渲染 为true的时候才会渲染数据 false不渲染，它可以搭配template标签使用
20、v-show 按条件显示一个元素的指令 用法和v-if一样，唯一不同点它会在DOM渲染中保留改元素，仅仅只是修改了display属性，并且不支持在template上使用
21、v-for='items in array' 改命令会基于数组来渲染一个列表 items是迭代项的别名，array是数据 也可以
v-for='(items,index) in array' ; 也支持使用第二个可选参数，除了in还可以用of，这样更接近javascript的写法
22、v-for 如果要便利对象，那么第一参数为键值，第二个参数为键名，第三个参数为索引，加上key属性，代码唯一标识符，加上key值后它会跟踪我们每一个节点，从而重用和重新排序现有的元素
23、Vue数组方法
通过索引值去更改数组，也可以响应式，vue2不行
push(1,2,3)里面可以添加多个参数，依次添加到数组的末尾
pop()删除数组最后一个元素
shift()数组第一位开始删除
unshift(1,2,3)在数组第一位开始依次添加元素
splice()用法和javascript一致
24、事件处理，和javascript一致
想获取到原始DOM事件event，需要把$event以实参传入，或者不用括号传参，直接在形参接入；如需绑定多个函数则用逗号隔开，并且每个函数都要加上括号
