![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue-知识总结
vue 相关知识总结
你管我管你疯啊
没有解决不了的技术问题,只有解决不了问题的人。
展开
-
vue3.0 实例方法$watch
1. 作用:(1)侦听组件实例上的响应式 property 或函数计算结果的变化(2)回调函数得到的参数为新值和旧值2. 如何使用?data() { return { num: 1, num2: 2, num3: { num4: 3, num5: 4 } }},created() { // 顶层property 名 this.$watch('num', (newVal, oldVal) => {}) // 监视单个原创 2021-12-01 09:06:12 · 1134 阅读 · 0 评论 -
vue3.0 中如何监听和侦测变量
仔细查看以下代码export default { props: { name: String }, setup(props) { console.log(props.name) }}此 props 对象是响应式的——即在传入新的 props 时会对其进行更新,通过使用 watchEffect 或 watch 进行观测和响应:使用watchEffect 或 watchexport default { props: { name: String.原创 2021-11-30 17:35:02 · 1945 阅读 · 0 评论 -
vue 组件间通信方式
1.父—子子组件使用 props 接受参数// 父组件<template> <div id="app"> <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名 </div></template>//子组件<template> <div class="hello"></div></tem原创 2021-10-20 12:02:16 · 84 阅读 · 0 评论 -
vue3.0 sass安装及使用报错问题
1. 错误信息: Error: PostCSS received undefined instead of CSS string解决办法:执行 npm install node-sass --save-dev2. 错误信息:Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.node-sass 6.0.1版本与^4.0.0 || ^5.0.0不兼容1、先卸载之前版本的node-sassnpm uninstall node-sa原创 2021-10-18 15:57:01 · 303 阅读 · 0 评论 -
vuex是什么?以及如何使用?
1.vuex是什么?vuex是专为vue.js应用程序开发的状态管理模式,利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新;vuex采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化;2.这个状态自管理应用包含以下几个部分:(1)state,驱动应用的数据源;(2)view,以声明方式将 state 映射到视图;(3)actions,响应在 view 上的用户输入导致的状态变化。3.当我们的应用遇到多个组件共享状态时,单向数据流的简洁性原创 2021-05-26 11:32:09 · 374 阅读 · 0 评论 -
vue for循环中key的作用
key 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。(diff算法)(1)如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。(默认将index作为key)(2)而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素(使用id)...原创 2021-08-03 16:35:54 · 1826 阅读 · 0 评论 -
computed watch 以及两者的区别
1. computed(计算属性,要通过已有属性计算得来)(1)原理:底层借助了 Object.defineProperty方法提供的getter和setter(2)优势:与methods相比 内部有缓存机制(复用),效率更高,调试方便(3)注意: 1.计算属性最终会出现在vm(vue实例)上,直接读取使用即可; 2.如果计算属性要被修改,必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。(4)get函数多会执行? 1.初次读取时会执行; 2.当依赖的数据发生改变时会被再原创 2021-08-03 16:34:24 · 83 阅读 · 0 评论 -
vue-v-model的基本案例用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="原创 2020-12-13 10:07:20 · 221 阅读 · 0 评论 -
vue基础知识
1.v-model 原理(包含两部操作)例如 input的动态改变输入值方法1:v-model方法二::value @input事件2.vue组件化思想(树形结构)将一个页面 拆分成多个组件,然后进行组合组件的使用步骤:(1)创建组件构造器(调用Vue.extend()方法)(2)注册组件(调用Vue.component()方法)(3)使用组件(在Vue实例的作用范围内使用)组件:全局组件 局部组件全局组件(整个页面的Vue实例中使用) Vue.component(‘my-om原创 2021-05-23 16:39:47 · 76 阅读 · 0 评论 -
vue+ant desgin pro 上传视频至阿里云
vue+ant desgin pro 上传视频至阿里云1. 在public文件目录的index.html中引入2. 前端编辑代码如下:1. 在public文件目录的index.html中引入<script src="http://mryt.kangdaedu.com/es6-promise.min.js"></script><script src="http:/...原创 2020-04-22 16:05:41 · 1842 阅读 · 0 评论 -
vue项目报错Expected indentation of 2 spaces but found 4
找到以下的.eslintrc.js文件,添加"indent": [“off”, 2] 然后重新运行项目npm run serve原创 2021-06-29 12:02:18 · 148 阅读 · 0 评论 -
vue+ant desgin pro 上传图片至七牛云
vue+ant desgin pro 上传图片至七牛云1. 在public文件目录的index.html中引入2. 在main.js文件中添加3. 在page页面中引入4. 在项目命令窗口安装5. 后端接口返回数据参数,如下图所示:6. 前端编辑代码如下:1. 在public文件目录的index.html中引入<script src="http://mryt.kangdaedu.com/...原创 2020-04-22 14:02:44 · 977 阅读 · 0 评论 -
Vue数据监测原理
(1)vue会监测data中所有层次的数据(2)如何监测对象中的数据? 通过setter实现监测,且要在new Vue时就传入要监测的数据。 1.对象中后追加的属性,Vue默认不做响应式处理 2.如需给添加数的属性做响应式,使用: Vue.set(target,propertyName,value) vm.$set(target,propertyName,value)(3)如何监测数组中的数据? 通过包裹数组更新元素的方法实现: 1.调用原生对应的方法对数组进行更新原创 2021-08-03 16:36:39 · 150 阅读 · 0 评论 -
vue项目搭建步骤
vue项目搭建以及环境变量的设置一、安装node.js1、官网地址:https://nodejs.org/zh-cn/1、node安装后的设置(node_global和node_cache)详细地址:https://blog.csdn.net/scorpio_meng/article/details/83314675二、接下来就该设置nodejs prefix(全局)和cache...原创 2020-02-09 14:38:57 · 182 阅读 · 0 评论 -
vue项目 npm 运行时报错“因为在此系统上禁止运行脚本”解决办法
npm 运行时报错“因为在此系统上禁止运行脚本”解决办法报错截图如下:解决办法:1、搜索“powershell”,并“以管理员身份运行”2、使用命令“set-ExecutionPolicy RemoteSigned”,将计算机上的执行策略更改为 RemoteSigned3、使用命令“set-ExecutionPolicy RemoteSigned”,将计算机上的执行策略更改为 RemoteSigned4、成功...原创 2020-05-18 14:56:51 · 2383 阅读 · 0 评论 -
vue3.0--知识总结
setup函数(是组合api的表演舞台)ref函数 (基本数据类型)实现数据响应式reactive函数ref函数与reactive函数的区别vue2.x 响应式与vue3.0 响应式computed 计算属性watch 监听属性hook 函数toRef其他组合api响应式数据判断新的组件1.setup函数的返回值:若返回一个对象,则对象中的属性、方法、在模板中均可以直接使用(常用这种写法)若返回一个渲染函数,则可以自定义渲染内容(了解)注意:尽量不要与vu.原创 2021-09-24 16:40:00 · 130 阅读 · 0 评论