冬夜先生
vue核心概念
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
冬夜先生
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
vue核心概念
vue核心概念
冬夜先生
关注
修改于 2021-10-20 10:25:59
1.2K
0
修改于 2021-10-20 10:25:59
举报
文章被收录于专栏:
csico
1.vue的本质声明式/响应式(寻常的指令)组件化。(定制)
2.vue简介:MVVM框架(不完全是,react完全是),渐近式(可大可小,既可以做简单的html页面,又可以做大型的管理系统)
3.vue开发思想:当我们想要改变视图界面时,我们只需要改变视图界面对应的声明式变量即可(间接)
4.jquery开发思想:当我们想要改变视图界面时,我们要使用$选择器获取DOM元素对象,再使用DOM API操作DOM(直接)
指令
1.指令是vue中的特色(在react中是没有的),Angular,微信小程序也有指令。
2.指令的本质,就是DOM封装。指令就是一组相似的DOM操作
3.降低我们直接操作DOM的频率。(尽可能减少DOM操作(滥杀无辜,只想改变一个列表某一行时,把全部列表重新渲染),不推荐用户直接操作DOM)
4.指令如果有值,这个值是变量(变量必须在组件中可以通过this访问),也可以是表达式(有变量参与的运算)
一、文本指令
1.{{}}文本插值。缺点有“一闪而过”的效果(不够美观)。可以使用v-text替代,或者用v-clock替代,但是要设置css样式[display:none]但是某些情况下只能用{{}},存在即合理。
2.v-text专门用于渲染文本,如字符串,数字等,但是null,undefined不会渲染,直接显示为空
注意,渲染Boolean值时,vue会自动的隐式转化为字符串 进一步理解:v-text就相当于是innerText
3.v-html 专门渲染HTML字符串。
v-html的值是HTML字符串,这些字符串会被Vue引擎解析渲染成真实的DOM结构
v-html默认具有“防注入攻击XSS”的功能,可以放心使用v-html
4.v-once
在语法上:v-once和v-cloak一样,没有值,不能这么使用:v-once=‘msg’
它有一个非常重要的特点,它所作用的DOM节点上的声明式变量只会渲染一次。换句话说,当它对应的声明式变量发生改变时,视图不会发生改变。
说明:工作中几乎不会用到
动态属性
v-bind给标签动态添加属性,凡是可以使用的属性都可以变成动态的
简写: v-bind:style 简写成:style=‘’
进阶:使用v-bind实现动态class,动态style,是非常重要的,在“组件化”时用的非常多
事件绑定
v-on 给标签绑定事件(事件是网页交互的基础) +.可以绑定哪些事件?什么事件都可以绑定,如:鼠标事件,键盘事件,滚动事件等... +.简写:v-on:事件名=‘事件处理器’ 简写为 @事件名 = ‘事件处理器’ +.事件修饰符(可以链式调用):.enter/.stop阻止冒泡/.prevent阻止默认行为/... +. 事件对象 +.(1)当没有事件传参时,事件处理器默认的第一个参数就是事件对象。(如果没有参数时,定义不要加())当事件传参时,需要手动传入$event事件对象。 在什么场景下会使用事件传参?通常为了复用“事件处理器”,减少methods封装 语法1:没有事件传参<tag @click='handle'> 语法2:有事件传参时<tag @click='handle(变量1,$event)'>
四、表单绑定
v-model用于表单双向绑定,即方便我们取表单值。(这不是响应式的原理)
约定:一般我们谈论的“双向绑定”指的是表单的v-model,谈论“响应式/声明式”指的是vue响应式的原理。
怎么理解双向绑定?从表单的角度,当表单视图发生改变时,对应的生名式变量自动更新。当v-model对应的声明式变量发生变化时。表单视图自动更新
好处:有了v-model,我们取表单的值非常的简单 三个修饰符:
trim去掉文本类表单值首位的字符串/空格
number用于把由数字组成的字符串,转化成Number类型.
lazy用于“长表单”的v-model,当长表单光标失焦时,再把表单视图上的更新值更行到其对应的声明式变量上。这是一种性能优化。
五、列表循环
v-for常用于循环数组,数字,字符串,对象,一切可迭代的变量(如:map,set)
vue工作中很少使用Map,Set,原因是Vue没办法把Map,Set这类数据变成响应式数据
提示:在v-for中很少用于循环Map,SET
说明:常用于循环数组,数值
问题:v-for循环时要加key,后续再补充
六、条件渲染
v-show对元素进行显示与隐藏
背后的原理是给元素添加或移除{display:none}的css样式来实现显示与隐藏 语法的坑:v-show=‘Boolean(表达式)’,v-show的值永远都是布尔值,一定要留意v-show值的数据类型
v-if/v-else-if/v-else 用于对元素进行显示与隐藏
背后的原理:是通过DOM操作对元素节点进行插入与删除(removeChild&appendChild)
语法的坑:v-if=‘Boolean(表达式)’,v-id和v-else-id的值必须是布尔值,vue会自动隐式类型转化
注意:当v-if/v-else-if/v-else成为‘一组’时,在这组兄弟节点中不能插入其他节点
v-else 是不用给‘值’的
v-if和v-show的区别?
v-show是通过css的{display:none}来实现显示与隐藏的。而v-if是通过DOM元素操作实现的。
使用v-show实现隐藏功能时,页面初始化的开销比较大,而使用v-if实现隐藏功能时,页面初始化开销比较小。当一个元素节点需要频繁进行显示与隐藏,建议使用v-show来做,反之建议使用v-if
七、其他指令
v-slot插槽,是组件化的基础语法之一,它可以简写为#
v-pre 一般用于调试。特点:一般被v-pre所包裹的都没节点,都不参与vue编译和解析。这个指令不常使用。
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
vue.js
编程算法
html
本文系转载,
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
vue.js
编程算法
html
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
文章
0
获赞
0
目录
指令
一、文本指令
动态属性
事件绑定
四、表单绑定
五、列表循环
六、条件渲染
七、其他指令
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
免费体验
产品介绍
产品文档
精选特惠 用云无忧
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐