Vue最全指令大集合————VUE
# Vue指令大集合（无slot）
#### 包含内容：
1. v-cloak
2. v-html
3. v-text
4. v-bind
5. v-show
6. v-model
7. v-for
8. v-if v-else-if v-else
9. v-pre
代码如下：（可以自己复制去看一下）
html
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Vue指令大集合（无 slot）</title>
7 </head>
8 <style>
9 [v-cloak]{
10 display: none;
11 }
12 .css{
13 color: red;
14 }
15 </style>
16 <body>
17 <div id="domo" v-cloak>
18 <p style="color: red;">v-html 标签有效</p>
19 <p v-html="name"></p>
20 <p style="color: red;">v-text 标签无效</p>
21 <p v-text="name"></p>
22 <hr />
23 <p style="color: red;">style</p>
24 <p :style="objCss">使用style从数据拿视图，v-bind====:</p>
25 <p style="color: red;">v-bind可以简写成： ,动态地绑定一个或多个特性，或一个组件 prop 到表达式。</p>
26 <img v-bind:src='src'>v-bind可以省</img>
27 <p :style="{
28 color: 'yellow',
29 fontSize: '11px'
30 }">自己改,数据</p>
31 <p :class="{
32 'css':!bool
33 }">我不是红色的</p>
34 <hr />
35 <p style="color: red">v-show</p>
36 <p v-show="bool">v-show可以控制出现或者隐藏</p>
37 <button @click='showClick'>v-on:click====@click点击，隐藏</button>
38 <hr />
39 <p style="color: red">v-model 双向绑定！</p>
40 <input v-model="name"></input>
41 <hr />
42 <p style="color: red">v-for</p>
43 <ul>
44 <li v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></li>
45 </ul>
46 <p v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></p>
47 <table v-for="a in arr">
48 <tr><td>{{a.name}}</td><td>{{a.age}}</td><td><img v-for="i in a.imgs" :src="i" /></td></tr>
49 </table>
50 <hr />
51 <p style="color: red">v-if</p>
52 <p v-if="type==='A'" v-text="name1"></p>
53 <div v-else-if="type==='B'" v-text="name2"></div>
54 <div v-else-if="type==='C'" v-text="name3"></div>
55 <div v-else="type==='D'" v-text="name4"></div>
56 <hr />
57 <p style="color: red">v-pre 这是一个跳过这个元素和它的子元素的编译过程</p>
58 <p><span v-pre>{{ 被包括的vue语言全都无效化！！ }}</span></p>
59 </div>
60 <script type="text/javascript" src="js/vue.js"></script>
61 <script>
62 new Vue({
63 el: "#domo",
64 data: {
65 name: '<em>我爱你<span>而</span>你爱他</em>',
66 src:'img/发生的事_画板 1.png',
67 objCss:{
68 color: 'blue',
69 fontSize: '28px'
70 },
71 bool:false,
72 arr: [{
73 name: "大哥",
74 age: 18,
75 imgs: ['img/image (24).gif']
76 }, {
77 name: "二哥",
78 age: 17,
79 imgs: ['img/image (25).gif']
80 }, {
81 name: "三弟",
82 age: 19,
83 imgs: ['img/image (26).gif']
84 }, {
85 name: "四弟",
86 age: 20,
87 imgs: ['img/image (27).gif']
88 }],
89 name1: "lemon",
90 name2: "enenenen",
91 name3: "DASDA",
92 name4: "eDASDASF",
93 type:'B',
94 },
95 methods:{
96 showClick(){
97 this.name="ddddd",
98 this.bool=!this.bool,
99 alert("取消隐藏")
100 this.type='D'
101 }
102 },
103
104
105 })
106 </script>
107 </body>
108
109 </html>
展示地址：[http://cth1688.qicp.vip/vue%20api.html]
#### 这是一个VUE指令的用法大集合，后面再深入说下他的路由功能。
#### 觉得有帮助的话给个赞呗！
Vue最全指令大集合————VUE的更多相关文章
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 干货100+ 最超全的web开发工具和资源大集合
干货100+ 最超全的web开发工具和资源大集合 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
- Vue:渲染、指令、事件、组件、Props、Slots
如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”.每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 ...
- vue的基本指令
1.创建vue对象 <script src="vue.js"></script> var vm = new Vue({ el:"#ap ...
- Flask Vue.js全栈开发
Flask Vue.js全栈开发的 最新完整代码 及使用方式 本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...
随机推荐
- Mybatis-Spring扫描路径有重叠导致Invalid bound statement(not found)问题
背景 近日,某个系统的测试环境mybatis总是报Invalid bound statement(not found)异常,导致tomcat容器无法启动.异常信息如下: org.apache.ibat ...
- Homebrew 安装 Docker Desktop for Mac
无意中发现Homebrew现在已经支持Docker Desktop for Mac了,因此特意把原来通过 https://docs.docker.com/docker-for-mac/install/ ...
- spring data jpa 的使用
使用spring data jpa 开发时,发现国内对spring boot jpa全面介绍的文章比较少案例也比较零碎,因此写文章总结一下. spring data jpa介绍 首先了解JPA是什么? ...
- elk安装与搭建
Elasticsearch安装配置 ·下载elasticsearch.tar.gz包,解压压缩包.(此处为单机版es,集群请参考 https://www.cnblogs.com/lazycxy/p/9 ...
- 在vue.js引用图片的问题
<div id="img"> <img src="img.png" class="img"> </div> ...
- 通过PHP与Python代码对比浅析语法差异
一.背景 人工智能这几年一直都比较火,笔者一直想去学习一番:因为一直是从事PHP开发工作,对于Python接触并不算多,总是在关键时候面临着基础不牢,地动山摇的尴尬,比如在遇到稍微深入些的问题时候就容 ...
- git 如何实现进行多人协作开发（远程仓库）
第一.Git作为分布式的版本控制系统,你是你本地仓库的主人,但是想要实现多人的协作开发,你就要将你本地的开发推送到远程共享仓库中供大家下载,本篇主要以github作为远程服务器来介绍有关远程仓库这块内 ...
- Keras（三）backend 兼容 Regressor 回归 Classifier 分类 原理及实例
backend 兼容 backend,即基于什么来做运算 Keras 可以基于两个Backend,一个是 Theano,一个是 Tensorflow 查看当前backend import keras ...
- Joyful HDU - 5245 概率问题
Sakura has a very magical tool to paint walls. One day, kAc asked Sakura to paint a wall that looks ...
- 面向微服务的体系结构评审中需要问的三个问题-咖啡杂谈：Java、新闻、故事和观点
面向微服务的体系结构如今风靡全球.这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺. 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为面向微服务的体系结构, ...