总结vue基础知识点

插值

用{{}}表示,也被称作胡子语法。
作用:会将绑定的数据实时的显示出来:
通过任何方式修改所绑定的数据,所显示的数据都会被实时替换,可以在里面写js表达式、三目运算符、方法调用等但不能进行赋值操作还有循环语句与条件语句

指令

指令 (Directives) 是指带有 v- 前缀的关键字语法

v-text和v-html

类型innerText和innerHTML

前者应用范围狭窄,可以识别文字,但无法识别标签,
后者能够识别标签,但同样应用范围狭窄

v-if和v-show

根据条件判断是否渲染元素
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
因此,如果需要非常频繁地切换,则使用 v-show 较好;
如果在运行时条件很少改变,则使用 v-if 较好。

v-on

作用:使用 v-on 指令绑定 DOM 事件,并在事件被触发时执行一些 JavaScript 代码。

语法: @事件名.修饰符 = “methods中的方法名”

v-on中的修饰符

. stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递)
. prevent:阻止默认事件的发生(比如点击超链接的跳转,点击表单提交按钮时的 重新加载页面等)
. capture:捕获冒泡,
. self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
. once:设置事件只能触发一次,比如按钮的点击等。

v-for

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法,

items 是源数据数组 /对象

当要渲染相似的标签结构时用v-for

v-bind

可以绑定标签上的任何属性。

v-bind:属性="值"
//简写
:属性="值"

也可以利用v-bind进行数据传递

v-model

表单元素的绑定

特点: 双向数据绑定

数据发生变化可以更新到界面
通过界面可以更改数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。

(未完待续,随缘更新)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值