是的,这里有很全的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. npm/svn 命令

    npm npm config set registry https://registry.npm.taobao.org npm config list svn + 清除失败的事务 - cmd管理员运行 ...

  2. UI5-技术篇-签字板

    签字板应用是通过创建自定义控件实现的,相关代码如下: 1.HTML <!DOCTYPE HTML> <html> <head> <meta http-equi ...

  3. mysql order by基于时间的盲注

    order by后面的注入,一般先尝试报错注入,无报错的时候可以通过rand(ture)和rand(false)来进行bool型盲注,但是今天遇到完全没有数据回显的(也就是数据库中没有数据)情况,这就 ...

  4. 如何打包ANE

    来源:http://blog.sina.com.cn/s/blog_6471e1bb01012aql.html 首先先说一下打包ANE必须的部件: 1.ActionScript扩展库SWC 2.本机扩 ...

  5. vs2017开启JavaScript智能提示

    [工具]--[选项]--[文本编辑器]--[JavaScript]--[语言服务] 把第一个钩去掉即可,如果不需要提示就打上勾

  6. with读、写文件

    1.with写文件 save_file = "1.txt" str_data = "123a\nbc" with open(save_file, 'a', en ...

  7. python接口自动化13-data和json参数傻傻分不清

    前言 在发post请求的时候,有时候body部分要传data参数,有时候body部分又要传json参数,那么问题来了:到底什么时候该传json,什么时候该传data? 一.识别json参数 1.在前面 ...

  8. php 加密

    PHP 自带的加密解密函数 目前经常使用的加密函数有:md5(), sha1(), crypt(), base64_encode(), urlencode() .其中 md5(), sha1(), c ...

  9. ISCC之msc4

    一开始拿到题目的时候有点懵的,给个gif图片,233 常规分析,gif打开看一看,发现gif是多张图片组成,于是用fastStone Image viewer分解成九张图片 后面用PS拼起来,得到一个 ...

  10. 用js刷剑指offer(把数组排成最小的数)

    题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路 对ve ...