vue指令大全~~~

是的,这里有很全的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:18
                    },
                    {
                        name:‘rose‘,
                        age:17
                    }
                ]
            }
        })
    </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是直接元素消失......

原文地址:https://www.cnblogs.com/antyhouse/p/8971647.html

时间: 2024-10-16 14:47:37

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

vue 指令大全

1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者等价: <span>{{msg}}</span> 2. v-html双大括号的方式会将数据解释为纯文本,而非HTML.为了输出真正的HTML,可以用v-html指令.它等同于JS的innerHtml属性. <div v-html="rawHtml">&l

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

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪吧. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值 v-html: string 用法:更新元素的innerHTML:注意:网站动态渲染任意HTML,容易导致XXS攻击 v-show:any 用法:根据

Linux系统文本编辑器vim指令大全

本文适合Vim新手,既可阅读入门 相关在线资料http://baike.baidu.com/subview/113188/9338173.htm?fr=aladdin vim的使用之汇总   vimtutor (在线学习) 功能最强在的编辑器--vim vi是所有UNIX系统都会提供的屏幕编辑器,它提供了一个视窗设备,通过它可以编辑文件.当然,对UNIX系统略有所知的人,或多或少都觉得vi超级难用,但vi是最基本的编辑器,所以希望读者能好好把它学起来,以后在UNIX世界里必将畅行无阻.游刃有余,

带注释的汇编指令大全

一.数据传输指令 ─────────────────────────────────────── 它们在存贮器和寄存器.寄存器和输入输出端口之间传送数据. 1. 通用数据传送指令. MOV 传送字或字节.  如:MOV eax,11  意思:eax=11 MOVSX 先符号扩展,再传送. MOVZX 先零扩展,再传送. PUSH 把字压入堆栈. POP 把字弹出堆栈. PUSHA 把AX,CX,DX,BX,SP,BP,SI,DI依次压入堆栈. POPA 把DI,SI,BP,SP,BX,DX,CX

8080汇编指令大全

8080汇编手册数据传输指令 ────────────────────────────── 它们在存贮器和寄存器.寄存器和输入输出端口之间传送数据. 1. 通用数据传送指令. MOV 传送字或字节. MOVSX 先符号扩展,再传送. MOVZX 先零扩展,再传送. PUSH 把字压入堆栈. POP 把字弹出堆栈. PUSHA 把AX,CX,DX,BX,SP,BP,SI,DI依次压入堆栈. POPA 把DI,SI,BP,SP,BX,DX,CX,AX依次弹出堆栈. PUSHAD 把EAX,ECX,E

所有运行命令指令大全

简介/操作 打开开始菜单,其中的"运行"是通向程序的快捷途径,输入特定的命令后,即可快速的打开Windows的程序,熟练的运用它,将给我们的操作带来诸多便捷.接下来我将介绍各个运行指令:运行的界面,在打开中输入口令: 具体运行口令 %temp%                       打开零时文件夹 .                                    C:\Documents and Settings\用户名所在文件夹 ..                  

Vue指令实战:结合bootstrap做一个用户信息输入表格

结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-

带凝视的汇编指令大全

一.传输数据指令 ─────────────────────────────────────── 它们在存贮器和寄存器.寄存器和输入输出port之间传送数据. 1. 通用数据传送指令. MOV 传送字或字节.  如:MOV eax,11  意思:eax=11 MOVSX 先符号扩展,再传送. MOVZX 先零扩展,再传送. PUSH 把字压入堆栈. POP 把字弹出堆栈. PUSHA 把AX,CX,DX,BX,SP,BP,SI,DI依次压入堆栈. POPA 把DI,SI,BP,SP,BX,DX,

linux指令大全(完整篇)(转)

http://blog.chinaunix.net/uid-9681606-id-1998590.html linux指令大全(完整篇)(转) 2009-03-17 01:21:46 分类: LINUX cat cdchmod chowncp cut 名称:cat使用权限:所有使用者使用方式:cat [-AbeEnstTuv] [--help] [--version] fileName说明:把档案串连接后传到基本输出(萤幕或加 > fileName 到另一个档案)参数:-n 或 --number