是的,这里有很全的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. Synopsys DC综合脚本示例

    #****************************************************************************** # File : syn_example ...

  2. 服务网关ZuulFilter过滤器--如何解决跨域请求中的OPTIONS请求

    进行跨域请求的时候,并且请求头中有额外参数,比如token,客户端会先发送一个OPTIONS请求 来探测后续需要发起的跨域POST请求是否安全可接受 所以这个请求就不需要拦截,下面是处理方式 @Ove ...

  3. mysql如何让有数据的表的自增主键重新设置从1开始连续自增

    项目开发中,有些固定数据在数据表中,主键是从1自增的,有时候我们会删除一些数据, 这种情况下,主键就会不连续.如何恢复到像第一次插入数据一样主键从1开始连续增长, 这里我找到一种解决方法: 如上面一张 ...

  4. 七年开发经验教你如何正确、安全地停止 SpringBoot 应用

    引言 Spring Boot,作为Spring框架对“约定优先于配置(Convention Over Configuration)”理念的最佳实践的产物,它能帮助我们很快捷的创建出独立运行.产品级别的 ...

  5. kubectl 命令自动补全

    kubectl 命令自动补全 在linux上 # yum install -y bash-completion # source /usr/share/bash-completion/bash_com ...

  6. AD如何改变PCB文件的黑色背景

    第一步:打开AD软件,新建一个PCB文件.   2 第二步:在黑色区域随便画一个封闭的多边形——注意一定要是封闭的!   3 第三步:点击“Ctrl + A”快捷键将PCB整个文件选中.   4 第四 ...

  7. unity 之 背包系统

    此方法只是用于学习和实验所以细节不必要求 一.Ui设置. 画布配置如下: 布局: 说明: 画布里面首先建立一个panel命名为weapon1,在其内部再建立4个panel用于装备的卡槽,装备以imag ...

  8. 微信小程序API~地理位置location

    (1)使用微信内置地图查看位置 wx.openLocation(Object object) 使用微信内置地图查看位置 参数 Object object 属性 类型 默认值 必填 说明 latitud ...

  9. 一个Python小白如何快速完成爬虫

    很人或多或少都听说过python爬虫,但不知道如何通过python爬虫来爬取自己想要的内容,今天我就给大家说一个爬虫教程来实现自己第一次python爬虫. 环境搭建 既然用python,那么自然少不了 ...

  10. canvans知识点

    1.绘制圆的角度示意图: 2 倒计时中,时钟数字的渲染逻辑: 3 直线边缘样式的设置 context.lineCap = "butt"; context.lineCap = &qu ...