前端学习(二)基础知识之基本指令

1、vue中数据插入几种方式:
<div v-cloak>{{msg}}</div>     插值表达式填充,编译后显示,添加v-cloak避免页面刷新卡的时候瞬间显示源码问题
<div v-text="msg"></div>    填充纯文本,常用方式,显示编译后的值不存在上面的问题
<div v-html="msg1"></div>   填充html片段,与上面不同的是可以对样式进行编译,但是会存在安全问题XSS攻击,个人猜测跟后端的sql注入类似,都是解析的内容进行了动作操作。
<div v-pre>{{msg}}</div>   填充显示源码,跳过编译

2、v-once  只响应一次数据加载,后续的变化不再更新,打破了响应式,性能略微提升。

3、双向数据绑定,上面都是后台数据变化进而响应式的影响前台展示,但是如果想通过前台修改数据变相的影响其他vue实例中的数据,怎么做到呢?v-model

4、MVVM设计思想:M modle就是数据模型;V view 视图,就是页面的展示效果 MV 就是控制数据与视图的逻辑关系的,比如事件啥的

5、事件绑定:点击事件举例 v-on:click='num++'

v-on:click可以简写为@click。同时,正常开发中点击事件业务逻辑很可能会比较复杂这时候就需要我们将点击事件的处理方法抽取出来进行单独实现,如上图中的vue实例中的methods属性,专门用来定义各种事件行为的,注意调用的时候上面可以直接写handle方法名称也可以后面带着一个()。测试时候可以自己打log,如下图:

点击上面按钮可以看到数据变化,并且点击右侧红框部分可以直接跳转到sources菜单页如下:

返回来说下上面方法调用的时候一个带着()一个不带,区别就是带着的可以传递参数。
如下图

事件绑定-参数传递:1、如果时间直接绑定函数名称(不带括号),那么默认会传递时间对象作为事件函数的第一个参数。2、如果事件绑定函数调用(传参),那么事件对象必须作为最后一个参数显式传递,并且事件对象的名称必须为$event。

6、事件修饰符,阻止冒泡行为,

原生js需要用下面第二个框在子方法里面指定,阻止冒泡,vue可以直接在调用处加上.stop进行阻止冒泡

7、属性绑定 v-bind

8、

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值