Vue指令用法1

Vue指令用法1

先简单介绍Vue的特点:

  • 1、是一套构建用户界面的框架,有提过双向数据绑定的功能,实现前后端的相互通信。
  • 2、只关注视图层,也就是说,通过框架中所提供的指令,使得前端只需要关心数据的业务逻辑,不用关心dom是如何渲染的。

Vue指令及其试用场景:

一、适用于文本的指令
  • v-text:使用该指令用来显示文本内容,但不会解析html标签,即把标签当做文本显示出来。

  • v-html:能够解析html标签,把文本内容渲染成指定的样式之后再显示。

  • v-cloak:(不常用),主要用来解决文本显示前闪烁的问题。场景一般为:当我们设置某个块的淡入淡出的速度很慢的时候,在页面显示内容时,会先显示出对应的html标签以及文本内容,然后在慢慢的闪烁跳转显示为html标签被解析后,内容被渲染之后的效果。

二、属性绑定和数据绑定指令
  • v-bind:用来绑定属性。缩写是冒号。
  • v-model:实现数据的双向绑定,v-model可以将M中的数据渲染到V中,也能将V中的数据绑定到M层。但只能运用在表单元素中(text、checkbox、radio、button等)
三、数组循环指令
  • v-for:用来实现对数组的循环遍历,通过键值对来实现查找下标和下标对应的值。
四、事件绑定机制*
  • v-on:可简写为@,这类指令适用于按钮的点击事件.类似于jQuery中$(“button”).click(function(){})。
<input type="button" @click="myFunction"> 
 // 该函数调用不需要传参
<input type="button" v-on:click="myFunction()">  
// 在methods中定义方法时,需要传递参数
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页