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:

                    },

                    {

                        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指令大全~~~的更多相关文章

Vue 指令大全
准备开始本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性.本章合适人群囊括了除已有开发经验人员以外的小白新手,从how.why.what三个角度来让大家理解并使用该技术历史介绍angula ...
Linux日常使用指令大全
Linux日常使用指令大全 Java代码 www.ahlinux.com 001.日常维护常用查询命令 #top 显示系统进程 #clear 清理屏幕信息 #cat /etc/redhat-r ...
linux指令大全(完整篇)（转）
http://blog.chinaunix.net/uid-9681606-id-1998590.html linux指令大全(完整篇)(转) 2009-03-17 01:21:46 分类: ...
Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...
一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx
一. 背景说明开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
vue插件大全汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
vue指令总结（二）
一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...
vue指令与$nextTick 操作DOM的不同之处
异步更新队列可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...
vue指令概览
原文简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

随机推荐

stack + positioned
stack 下套container, 发现最大的显示,小的都没显示, 把所有都套个POSITIONED, 都正常显示了.
浏览器输入 URL 之后的链路
视频 [序章]要找到B站有多难?秃头警告脑图一次完整的 Http 事务文章技术普及帖:你刚才在淘宝上买了一件东西 Github-从URL输入到页面展现到底发生什么? 总结的非常全前端面试题: ...
p2.BTC-数据结构
hash pointers:哈希指针,除了保存值的地址,还要存这整个区块的内容的hash值.这样就既能访问到值,还能确定访问的值有没有被篡改. 一 Blockchain Block chain is ...
linux 显示不可见字符
在Linux中,cat -A file可以把文件中的所有可见的和不可见的字符都显示出来,在Vim中,如何将不可见字符也显示出来呢?当然,如果只是想在Vim中查看的话,可以这样:%!cat -A在Vim ...
Android笔记（四十七） Android中的数据存储——XML（三）SAX解析
SAX是一个解析速度快并且占用内存少的xml解析器,非常适合用于Android等移动设备. SAX解析XML文件采用的是事件驱动,也就是说,它并不需要解析完整个文档,在按内容顺序解析文档的过程中,SA ...
DevOps简介_转
转自:DevOps简介刘大飞 DevOps 是一个完整的面向IT运维的工作流,以 IT 自动化以及持续集成(CI).持续部署(CD)为基础,来优化程式开发.测试.系统运维等所有环节. Dev ...
systemd_journal_no_entries问题解决
问题: #journalctl Journal file /var/log/journal/410/system@0.journal~ uses an unsupported feature, ign ...
AD如何改变PCB文件的黑色背景
第一步:打开AD软件,新建一个PCB文件. 2 第二步:在黑色区域随便画一个封闭的多边形——注意一定要是封闭的! 3 第三步:点击“Ctrl + A”快捷键将PCB整个文件选中. 4 第四 ...
git 常见的命令和错误
python基础之面试常问
目录 python相对其他语言有什么特点? python内存管理机制,gc机制的了解,gc回收三种算法. lambda函数高级函数 map.reduce.filter.sorted等. 简述六种基本 ...

vue指令大全~~~

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

随机推荐

热门专题