是的,这里有很全的vue指令使用~

1.简单的vue应用

vue作为一个mvvm框架,想想为什么叫做mvvm?

Model是负责数据的存储,

View负责页面的展示

Model View

负责业务逻辑处理,对数据加工后视图展示

MVVM的作用是业务逻辑代码与视图代码完全分离,各自的职责更加清晰~

<body>

    <!--mvvm里面的v-->

    <div id="app">

        {{val}}

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                val:'你好'

            }

        })

    </script>

</body

2.v-text

 <div id="app" v-text="val">

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                val:'你好'

            }

        })

    </script>

视图:

这里的v-text是偏向于文本的,如果你将 val:'你好'改成val:'<p style="color:red">你好</p>'

视图是

所以接下来就是介绍v-html

3.v-html

<body>

    <!--mvvm里面的v-->

    <div id="app" v-html="val">

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                val:'<p style="color:red">你好</p>'

            }

        })

    </script>

</body>

视图:

v-text是把所有的都以文本的形式展现,而v-html能够解析里面的标签~

4 v-cloak

平常我们的数据都是用{{}}渲染出来的,那么这样的渲染与v-html和v-text有什么区别呢?

在网络不行的情况下,我们用{{}}的形式渲染会出现闪现{{}},再出现数据,所以将这个指令放在要渲染的标签的父元素上就可以,还要记得写样式display:none当然你可以放在刚开始vue定义的范围的标签上

 <style>

        [v-cloak]{

          display: none

        }

    </style>

</head>

<body>

    <!--mvvm里面的v-->

    <div id="app" v-cloak>

        {{val}}

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                val:'你好'

            }

        })

    </script>

</body>

5.v-for

 <div id="app">

        <div v-for="(el,index) in dataList">

            <p>名字:{{el.name}}</p>

            <p>年龄:{{el.age}}</p>

        </div>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        //这是mvvm里面的vm

        var vm = new Vue({

            el: '#app',

            //这是mvvm里面的m

            data: {

                val: '你好',

                dataList:[

                    {

                        name:'jack',

                        age:

                    },

                    {

                        name:'rose',

                        age:

                    }

                ]

            }

        })

    </script>

这里要注意的是:

一般都加上:

    <div v-for="(el,index) in dataList" :key="index" >

            <p>名字:{{el.name}}</p>

            <p>年龄:{{el.age}}</p>

        </div>         
:key="index"   或者如果el里面有id 的话可以写:key="el.id" 这样来区分每一个list,因为在渲染的时候都是整个list渲染的,加上这个就只用替换,或者说是局部的变化

6.v-on

 <div id="app">

         <button type="button" v-on:click="clickMe()">爱我你就点点我</button>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                val:'你好'

            },

            methods:{

                clickMe(){

                     alert(this.val)

                }

            }

        })

    </script>
v-on:click="clickMe()"  简写:click="clickMe()"就可以了
这里的this代表的就是vm啦,你直接用vm.val也是一样的
视图：

7.v-if
<body>

    <!--mvvm里面的v-->

    <div id="app">

        <p  v-if="val=='你好'">

            Good boy

        </p>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                val:'你好'

            }

        })

    </script>

</body>

视图:

v-if和v-show的区别,v-show只是hidden,v-if是直接元素消失......

vue指令大全~~~的更多相关文章

  1. Vue 指令大全

    准备开始本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性.本章合适人群囊括了除已有开发经验人员以外的小白新手,从how.why.what三个角度来让大家理解并使用该技术历史介绍angula ...

  2. Linux日常使用指令大全

    Linux日常使用指令大全 Java代码 www.ahlinux.com 001.日常维护常用查询命令 #top    显示系统进程 #clear  清理屏幕信息 #cat /etc/redhat-r ...

  3. linux指令大全(完整篇)（转）

       http://blog.chinaunix.net/uid-9681606-id-1998590.html  linux指令大全(完整篇)(转) 2009-03-17 01:21:46 分类:  ...

  4. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  5. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  6. vue插件大全汇总

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

  7. vue指令总结（二）

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  8. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  9. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

随机推荐

  1. 深入理解JVM(六) -- GC执行原则和方案

    上篇文章中,我们了解了Java虚拟机垃圾回收的思路和策略,这篇文章我们将了解Java是如何实现高效的回收算法的. 我们需要了解,内存回收必须要保证“一致性”,意思就是在执行GC分析的时候,系统看起来要 ...

  2. 【转载】 C#使用string.IsNullOrWhiteSpace方法判断字符串是否为非空字符

    在C#编程过程中,很多时候需要判断传入过来的字符串是否为Null或者空字符或者空白字符,此时就可以使用到string.IsNullOrWhiteSpace方法来判断,如果字符串为null或者空字符Em ...

  3. 十、vue mixins 的用法

    vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并) ...

  4. 74.js---移动端文章的瀑布流的实现。

    移动端文章的瀑布流的实现.   1.首先在前端html页面已经通过PHP代码循环完全数据.  2.然后在js先全部隐藏,通过判断滑动到底部,每次加载一部分数据,直到数据全部显示完全. js代码: // ...

  5. excel2016打开为空白界面解决办法

    前言 excel2016打开文件为空白的界面,明显不正常. 解决方法 https://blog.csdn.net/b2345012/article/details/94134401 以上.

  6. Hybris做增强的两种方式：In App Extension和Side by Side Extension

    传统的扩展方式,即In-App增强方式,Hybris开发顾问通过Extensions的方式进行二次开发,生成的Custom Extensions同Hybris标准的Extensions一起参加构建,构 ...

  7. ViewBag---MVC3中 ViewBag、ViewData和TempData的使用和差别-------与ViewBag+Hashtable应用例子

    ViewBag 在MVC3開始.视图数据能够通过ViewBag属性訪问.在MVC2中则是使用ViewData.MVC3中保留了ViewData的使用.ViewBag 是动态类型(dynamic),Vi ...

  8. Ubuntu 用户权限相关命令

    目标 用户 和 权限 的基本概念 用户管理 终端命令 组管理 终端命令 修改权限 终端命令 01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要的一环,用户管理包 ...

  9. c# System.Array

  10. PHP开发工具 zend studio

    一.搭建PHP开发环境Apahce服务器Dreamwear创建站点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...