V-cloak

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

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <title></title>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <script src="./vue2.js"></script>

     <style>

       /* 2. 利用属性选择器，选中v-cloak属性，设置display:none */

       /* 当vue实例被创建完毕之后，vue会将v-cloak指令从标签中移除掉 */

       [v-cloak] {

         display: none;

       }

     </style>

   </head>

   <body>

     <div id="app">

       <!--

         v-cloak指令用于解决表达式闪烁问题

         1. 首先给闪烁的标签加上v-cloak指令

        -->

       <h1 v-cloak>{{msg}}</h1>

     </div>

     <script>

       var vm = new Vue({

         el: '#app',

         data: {

           msg: 'hello'

         }

       })

     </script>

   </body>

 </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(需要改变的数组，数组的索引，新的值)

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title></title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <script src="./vue2.js"></script>

     </head>

     <body>

         <div id="app">

             <ul>

                 <li v-for="items in users">

                     {{items.name}}

                 </li>

             </ul>

             <button @click="userLength">使用length的属性来实现视图的更新</button>

             <button @click="userSplice">通过splice属性实现视图的更新</button>

             <button @click="userIndex">通过索引实现视图的更新</button>

             <button @click="userVueSet">通过Vue.set的方法实现视图的更新</button>

         </div>

         <script>

             var vm = new Vue({

                 el: '#app',

                 data: {

                 users: [

                     {name: 'jack1', id: 1},

                     {name: 'jack2', id: 2},

                     {name: 'jack3', id: 3},

                     {name: 'jack4', id: 4}

                 ]

                 },

                 methods: {

                     userLength(){

                         // 这个方法是无法实现视图更新的

                         this.users.length=0;

                     },

                     userSplice(){

                         this.users.splice(0,1);

                     },

                     userIndex(){

                         // 直接通过索引的方法是无法实现视图的更新

                         this.users[0]={name:"rose",id:"3"}

                     },

                     userVueSet(){

                         // 使用Vue.set的方法事件视图的更新，基本的语法为vue.set(需要改变的数组,索引，新的值)

                        Vue.set(this.users, 0, {name:"rose",id:"3"})

                     }

                 }

             })

         </script>

     </body>

 </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. Hexo 自动同步

    灵感 最近认证阿里云学生用户,参与ESC服务器9.9元/月的活动,准备先搭建一个博客网站,写写自已的心得以及经验.之前也搭建过网站,最后由于个人没时间(没时间是假的,就是懒.哈哈)的原因导致最后服务器 ...

  2. python + eclipse + django + postgresql 开发网站（二）

    引用与参考 http://www.cnblogs.com/lanxuezaipiao/p/3283932.html python2.7  django1.6 1.新建Django项目

  3. 值得学习的CSS知识

    这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...

  4. Enity Framework已经是.NET下最主要的ORM了

    Enity Framework已经是.NET下最主要的ORM了.而ORM从一个Mapping的概念开始,到现在已经得到了一定的升华,特别是EF等对ORM框架面向对象能力的升华.切实地说,就是ORM让数 ...

  5. HDU 4678 Mine SG博弈

    http://acm.hdu.edu.cn/showproblem.php?pid=4678 自己太蠢...没学SG...还是浩神指点我SG精髓以后才A的这题...(第一题SG 这里子游戏之间没有影响 ...

  6. ble_app_hrs心率程序 nrf51822

    所用程序为: H:\keil\ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs 上面的路径是安装sdk之后生成在keil软件所在目录 ...

  7. golang语言入门及安装

    golang语言入门及安装 go语言是google在2009年发布的开源编程语言使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 本次讲解在windows上安装go语言的开 ...

  8. passwd---设置用户密码的相关信息

    passwd命令   passwd命令用于设置用户的认证信息,包括用户密码.密码过期时间等.系统管理者则能用它管理系统用户的密码.只有管理者可以指定用户名称,一般用户只能变更自己的密码. 语法 pas ...

  9. ubuntu 进入临时客户会话页面 转入用户自己页面

    1.点击右上角的按钮 2.选择要登录的客户名字 点击进入 3.输入账号密码 进入指定的账号

  10. HDU 1533 Going Home（KM完美匹配）

    HDU 1533 Going Home 题目链接 题意:就是一个H要相应一个m,使得总曼哈顿距离最小 思路:KM完美匹配,因为是要最小.所以边权建负数来处理就可以 代码: #include <c ...