是的,这里有很全的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. 【面试突击】- Mybatis-#{}和${}的区别

    原文链接:mybatis中#{}和${}的区别 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时 ...

  2. 苹果手机浏览器的$(document).on(“click”,function(){}) 绑定的事件点击无效

    需要给对应的元素加上 cursor: pointer  的css样式才可以生效点击事件:

  3. 用java代码实现构造目录树

    怎么用java代码实现上面这样的目录树? 首先创建数据表 每条数据记录自己的id以及父节点的id 然后进入java代码部分: public String directory(String author ...

  4. 几个不错的echarts +百度地图 案例

    https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/edit ...

  5. Linux硬盘满了，系统速度贼慢，居然是Jenkins.log太大了

    用查找命令找出大于1G的文件 find / -size +1G -print 为什么jenkins.log会产生40+G的文件? 以上在Windows上的时候,运行了几个月,也没有发生这种现象? 而在 ...

  6. web workers 实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 微信小程序之随笔

    先写到这里https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/AuthSetting.html

  8. jdk1.8换成11,启动项目报错java.net.MalformedURLException: unknown protocol: jrt

    jdk11 Information:Internal caches are corrupted or have outdated format, forcing project rebuild: Mo ...

  9. 通过命令行运行java出现"错误: 找不到或无法加载主类 "解决办法

    首先在命令行运行不需要写package路径, 而在ide中一般是有路径的 so举例说明 例如程序名为HelloWorldTest.java,程序中含有package helloWorld语句,而该包位 ...

  10. 导入Excel数据到Oracle数据库的脚本

    在cmd运行窗口中输入:sqlldr customermanager/123@orcl control="E:\CustomerData\excelInputOracle\insert.ct ...