美文网首页
vue各种指令总结

vue各种指令总结

作者: 雨后晴阳 | 来源:发表于2018-09-06 22:29 被阅读0次

1.v-text  

    该指令可以渲染文本   在标签属性位置上写上   v-text ="属性名"   

   和插值表达式区别是   插值表达式 卸载innerHTML位置    v-text 写在标签属性位置

2.v-html

  用来渲染带标签的文本,网站上动态渲染任意的html危险 ,容易受到xss攻击,只在可信内容上使用   v-html  提交的内容不可使用

3.v-bind

     动态绑定属性     例如  <img v-bind:src="url">   url可以在data中获取其中   v-bind可以省略

4.v-for

     用来渲染数组和对象

     1.渲染数组

       在标签属性的位置上写上   v-for ="(item,index) in arr"   :key="index"    //key必须加上 值为一个该数组不重复的项

     2渲染对象

'         在标签属性位置上写上   v-for="(value,key,index)  in obj"    :key="index"

5.v-model 

      双向数据绑定model和view中的值进行同步变化

6.v-on

用来监听dom事件

方法   v-on:事件类型   ="执行函数"   执行函数中可以添加参数可以传递$event对象

例子:

7.v-if

通过控制dom来控制元素的显示隐藏   

涉及到异步数据渲染的时候就要使用v-if   

8.v-show

通过控制样式 display:none来控制元素的显示和隐藏

涉及到大量dom操作的时候需要使用v-show

9.v-cloak

给闪烁的元素加上v-cloak指令

例子

   

相关文章

  • vue各种指令总结

    1.v-text 该指令可以渲染文本 在标签属性位置上写上 v-text ="属性名" 和插值表达式区别是...

  • vue面试相关

    javascript面试总结 谈谈你对MVVM开发模式的理解 Vue 有哪些指令? 简述Vue的响应式原理 Vue...

  • 实用的Vue自定义指令总结

    本文总结了下面这些实用的 Vue 自定义指令 1.v-copy:复制粘贴指令 2.v-longpress:长按指令...

  • 你为什么选择 React 而不选择 Vue

    使用 vue 不需要转变思想,从传统 JS 开发转到 vue 非常容易。但需要记指令,各种指令,那么免不了经常查文...

  • 2018-09-11

    vue第一天总结 1.下载并且安装vue.js,输入指令 upm install vue,下载成功之后出现文件即...

  • vue入门6---vue基本指令、自定义指令、插件

    一、vue常用指令概览 二、vue自定义指令 注册全局指令Vue.directive('my-directive'...

  • 2018-07-21

    ## 经典bug:1.模板引擎的渲染## 难点:### 0.vue总结#### 指令:```jsVue.direc...

  • 面试前的总结-vue篇

    总结一些vue的面试题吧,为了年后的面试作准备。 vue指令 vue的生命周期 computed 和watch的区...

  • vue directives指令总结

    Vue指令和Vue组件之间的关系 很多时候,对于初学者来说,看完指令的使用会发现组件的使用和指令的自定义有几分相似...

  • Vue指令钩子函数

    Vue指令上篇文章有讲过了,现在分析Vue指令钩子函数。 自定义指令 全局定义:Vue.directive( ' ...

网友评论

      本文标题:vue各种指令总结

      本文链接:https://www.haomeiwen.com/subject/sbbfgftx.html