V-cloak

这是一个不常用的指令，出现这个指令的原因是因为有时候网络速度慢，还没加载完vue,代码就开始编译了，这个时候渲染出来的内容就可想而知了

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.    <head>
  4.      <title></title>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1">
  7.      <script src="./vue2.js"></script>
  8.      <style>
  9.        /* 2. 利用属性选择器，选中v-cloak属性，设置display:none */
  10.        /* 当vue实例被创建完毕之后，vue会将v-cloak指令从标签中移除掉 */
  11.        [v-cloak] {
  12.          display: none;
  13.        }
  14.      </style>
  15.    </head>
  16.    <body>
  17.      <div id="app">
  18.        <!--
  19.          v-cloak指令用于解决表达式闪烁问题
  20.          1. 首先给闪烁的标签加上v-cloak指令
  21.         -->
  22.        <h1 v-cloak>{{msg}}</h1>
  23.      </div>
  24.      <script>
  25.        var vm = new Vue({
  26.          el: '#app',
  27.          data: {
  28.            msg: 'hello'
  29.          }
  30.        })
  31.      </script>
  32.    </body>
  33.  </html>

这个是关于V-cloak的使用方法，这个属性要配合display:none这个属性使用，当vue实例还没被创建完毕之后，使用vue-cloak的属性选择器的样式会生效，当vue加载完毕之后，v-cloak将会移除掉

V-show 和 V-if 的区别

v-show和v-if都是用来控制元素的显示和隐藏。他们都是后面跟一个布尔值，如果是true就是显示，如果是false就是隐藏

v-show是通过css样式display：none来控制元素的显示和隐藏的，而v-if则是直接操控dom来控制元素的显示隐藏，所有设置到大量的dom元素的显示和隐藏的时候，就使用v-show，避免重复操控dom降低性能，如果是涉及到异步数据渲染的时候，就使用v-if

V-for

v-for是用来循环遍历数组和对象的，其他的不多说了，在这里主要介绍两种情况不能触发视图模型的更新的情况和解决方法

1.通过数组的length属性去改变数组时不能触发视图更新

解决方法：使用splice方法解决

2.通过数组的索引去改变数组时不能触发视图的更新

通过Vue.set(需要改变的数组，数组的索引，新的值)

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.      <head>
  4.          <title></title>
  5.          <meta charset="UTF-8">
  6.          <meta name="viewport" content="width=device-width, initial-scale=1">
  7.          <script src="./vue2.js"></script>
  8.      </head>
  9.      <body>
  10.          <div id="app">
  11.              <ul>
  12.                  <li v-for="items in users">
  13.                      {{items.name}}
  14.                  </li>
  15.              </ul>
  16.              <button @click="userLength">使用length的属性来实现视图的更新</button>
  17.              <button @click="userSplice">通过splice属性实现视图的更新</button>
  18.              <button @click="userIndex">通过索引实现视图的更新</button>
  19.              <button @click="userVueSet">通过Vue.set的方法实现视图的更新</button>
  20.  
  21.          </div>
  22.          <script>
  23.              var vm = new Vue({
  24.                  el: '#app',
  25.                  data: {
  26.                  users: [
  27.                      {name: 'jack1', id: 1},
  28.                      {name: 'jack2', id: 2},
  29.                      {name: 'jack3', id: 3},
  30.                      {name: 'jack4', id: 4}
  31.                  ]
  32.                  },
  33.                  methods: {
  34.                      userLength(){
  35.                          // 这个方法是无法实现视图更新的
  36.                          this.users.length=0;
  37.                      },
  38.                      userSplice(){
  39.                          this.users.splice(0,1);
  40.                      },
  41.                      userIndex(){
  42.                          // 直接通过索引的方法是无法实现视图的更新
  43.                          this.users[0]={name:"rose",id:"3"}
  44.                      },
  45.                      userVueSet(){
  46.                          // 使用Vue.set的方法事件视图的更新，基本的语法为vue.set(需要改变的数组,索引，新的值)
  47.                         Vue.set(this.users, 0, {name:"rose",id:"3"})
  48.                      }
  49.                  }
  50.              })
  51.          </script>
  52.      </body>
  53.  </html>

关于VUE的一些指令的介绍的更多相关文章

  1. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  3. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  4. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  5. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  6. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  7. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  8. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  9. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

随机推荐

  1. python 协程学习

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来 ...

  2. Js中的数据类型--String

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 上一期咱们大概了解了下什么是JavaScript,想必大家也都知道 今天主要说下Js中的数据类型 在Js中一共分为六种数据类型 其中基本数据 ...

  3. 今日SGU 5.13

    SGU 146 题意:就是给你一个长度为l的圈,然后你跑步,每一段给你时间t和速度v,问你最后离起点多远 收获:就是把浮点数转为整数,然后但是会出现精度误差,比如l最多四位小数,那你就加0.00001 ...

  4. zoj1942Frogger

    Frogger Time Limit: 2 Seconds      Memory Limit: 65536 KB Freddy Frog is sitting on a stone in the m ...

  5. React Native入门——IDE及其它相关基础技术

    关于React Native的开发,当中一个问题是缺少好用的IDE,有些人说不就是JS么,搞一个记事本也就写了,那样尽管牛逼,但事实上还是非常头大的,有一款好的IDE还是能提升开发效率的,这里对几个还 ...

  6. vim 基础学习之插入模式

    插入模式1.字符编码,插入特殊字符 <C-v>{3位} 如,你想输入A,你可以在输入模式下<C-v>065(必须是3位) <C-v>u{4位} 如,你想输入¿,你可 ...

  7. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  8. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  9. ASP.NET MVC Web API 学习笔记---第一个Web API程序---近来很多大型的平台都公开了Web API

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  10. linux 下find---xargs以及find--- -exec结合使用

    例:删除/home/raven下,包括子目录里所有名为abc.txt的文件: find /home/raven -name abc.txt | xargs rm -rf 如果不使用xargs,则为: ...