Vue学习中的注意点(易忽略点)

于 2022-07-16 15:08:53 发布
阅读量160 收藏
点赞数
分类专栏： vue3 文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57262819/article/details/125815515
版权

v-on (@) 注意点

在这里插入图片描述
在这里插入图片描述
上面是一个a链接.具有默认跳转功能 同时它本身有点击事件 需要使用阻止默认跳转功能
在函数传参内部 $event methods中使用 e.preventDefault() 阻止默认事件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-model修饰符

在这里插入图片描述

computed计算属性

作用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

过滤器 分为两种

在这里插入图片描述
在这里插入图片描述
携带参数的过滤器
函数的形参 第一个是 左边的 第二个参数就是 后边的函数 内部携带的参数
在这里插入图片描述

watch监听

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue样式穿透

在这里插入图片描述
在这里插入图片描述
deep 作用就是在父组件内部控制子组件样式
在这里插入图片描述
在这里插入图片描述

自定义指令

在这里插入图片描述

作用域插槽

在这里插入图片描述
在子组件中, slot标签里面设置 动态绑定数据
父组件结构里面,子组件内部 v-slot :插槽名=“scope”
使用场景
在这里插入图片描述
作用域插槽的使用场景一般是 表单元素里面
表单作为子组件 父组件内部设置父传子 传值
子组件可以渲染数据 ,但是如果在父组件内部操作 表单数据的话 太麻烦了 不知道要操作那一个数据 结构一般是在子组件里面 函数处理是在父组件里面

前端路由工作原理

在这里插入图片描述
在这里插入图片描述
**

原理:

**
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

组件通信

在这里插入图片描述

Vue知识点 超详细!万字说明！
逍遥的博客
10-09 397
Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手 vue官网：https://cn.vuejs.org/v2/guide/comparison.html Vue是什么 Vue是一套用于构建用户界面的渐进式框架 "前端框架" 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供.
Vue学习-1-入门
baidu_38126306的博客
11-03 499
Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合； 遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据； 网络通信：Axios； 页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U
Vue中一些需要注意的点（采坑）
热门推荐
xidongdong1的博客
11-23 3万+
前言：记录在学Vue中需要注意的问题 1.给link添加事件、给组件绑定原生事件 在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲染的时候会把router-link渲染成a。 有时候需要为router-link注册事件，对于一般的html元素，直接使用@click="eventFun"即可，但是对于rout
VUE 使用注意事项：
weixiaoderensheng的博客
10-09 324
VUE 数组无法触发视图更新  首先请看下面代码： new Vue({ el: "#app", data: { todos: [ { text: "Learn JavaScript", done: false }, { text: "Learn Vue", done: false }, { text: "Play around in JSF...
关于vue的注意事项
qq_39933787的博客
08-01 1016
想让vue工作，就必须创建一个vue实例，且要传入一个配置对象 root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法 root容器里的代码被称为【vue模板】 一个重要的原则：由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了【箭头函数没有自己的this，要往外找】 vue里MVVM分工 ...
vue的注意点
weixin_45176023的博客
08-13 73
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property o...
Vue一些注意点
Mr_HuangJW的博客
01-02 1678
1.Method与计算属性computed的区别 区别在于method每次都执行函数，而computed基于依赖缓存，只要相关值不变，那么就不必再执行函数。 下面，注意Date不是响应式依赖： computed: { now: function () { return Date.now() } } 所以使用计算属性 2.v-if与v-show v-if 是真实的条件渲染
基于《狂神说Java》Vue--学习笔记
wudidahuanggua的博客
06-18 1402
本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟，可以加我好友一起探讨学习。...
Vue 学习笔记（全）
qq_47284422的博客
08-04 898
Vue入门 简述 ​ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。 MVVM模式的实现者 Model：模型层，在这里表现 JavaScript 对象 View：视图层，在这里表示 DO
Vue学习笔记—less
m0_48180834的博客
08-30 836
Less （Leaner Style Sheets 的缩写）是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 一、Less用法： 1.安装Less cnpm/npm install -g less //这里可以简写为cnpm/npm i -g less 2.检测Less安装是否成功 Lessc -v/--version 3.Less的使用： (1)在n...
vue 使用注意点
classOurself的博客
03-17 248
1. vue 中阻止修改 data 中数据 Object.freeze()，这会阻止修改现有的property，也意味着响应系统无法再追踪变化。 var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) 2. 绑定动态属性/动态事件 <a v-bind:[attributeName]="url"> ... </a> <a v-on:[eventName]="
Vue注意要点
zsl2010zsl的专栏
04-14 684
vue的优点 轻量级 速度快 简单易学 低耦合 可重用性 独立开发 文档齐全，且文档为中文文档 vue父子组件传递数据 props vue中组件的props属性 让组件接收外部传来的数据 接收数据三种方式： （1）只接收：props: [‘name’,‘age’,‘sex’] （2）接收并限制类型：props: { “name”:Number } （3）限制类型、限制必要性指定默认值： props:{ "name":{ type:String, .
vue中必须注意点有哪些？
JINGinC的博客
11-09 718
1、给对象添加属性的时候，直接通过给 data 里面的对象添加属性然后赋值，新添加的属性不是响应式的 【解决办法】通过 Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的 2、在 created 操作 dom 的时候，是报错的，获取不到 dom，这个时候实例 Vue实例没有挂载 【解决办法】通过：Vue.nextTick(回调函数进行获取) ...
vue注意事项
vicroad2014的专栏
09-30 255
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm = new Vue({ data: { items: ['a', 'b', 'c'] ...
Vue中的注意点（一）
吃蛋糕的居居
08-09 290
1.如果新建一个vue文件有警告框: 可以在首页中的js段中加入: Vue.config.productionTip = false;//阻止vue在启动时生成生产提示 2.如果不用el进行和id值进行绑定,并在连接vue之前调用一个函数: var v = new Vue({ // el: "#ex",//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data: { data: { }, }, methods: { },
vue一些需要注意的小知识点
乐~的博客
03-05 1574
1.vue的生命周期，主要的介绍官网（https://cn.vuejs.org/v2/api/）上都有。主要说的是created和mounted。之前在写项目的过程中，需要对DOM节点进行操作（但是在vue里面尽量不要获取节点进行操作。vue主要是对数据进行操作），在created里面这些操作并不能实现，但是在mounted里面是可以的。主要原因就是：created是vm实例已经创建但是未完成挂载...
vue开发注意点
hi_mydear_yuaner的博客
04-06 175
1，绑定键盘事件如:@keyup.enter,@keyup.left; 绑定此类事件时必须要有tabindex='值'属性，一般绑定非操作型元素时会用到
Vue.js入门注意点
幸福滴嘴角上扬的博客
11-03 3454
Vue.js入门注意点
使用vue时需要注意的地方
wuwuweilie的专栏
03-26 1233
1、使用 npm run build打包后部署到网站上，打开默认页面是一个空白页解决方法：修改config文件夹下的index.js文件中的assetsPublicPath配置项，默认是'/'，将其改成'./'即可，然后重新打包2.打包发布部署到网站后，打开网址会进入默认页，这个没问题，但是按F5刷新后，页面不见了这是因为路由模式我们选择了 html5的 mode模式，注释掉mode模式重新打包就...
Vue项目前端知识点精华整理
本文是一篇关于Vue项目前端知识点的整理文章，旨在为开发者提供有价值的学习资料。主要涵盖以下几个核心知识点： 1. 微信授权与页面跳转控制： 当用户在微信环境下授权后，开发者可以利用`router.beforeEach`导航...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值