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 ...
随机推荐
- coo ceo cfo cto cio 区别
常见的CEO(Chief executive officer)首席执行官类似总经理.总裁,是企业的法人代表. COO(Chief operating officer)首席运营官 类似常务总经理CFO( ...
- 在win10中安装python3.6.6
文章目录: 一.登录到官网下载指定python版本 二.在win10中安装python3.6.6并验证安装结果 三.运行python的三种方 ...
- JD面试 || 移除教室人数
在昨天参加了东哥的笔试,选择题做的还算可以,但是还有道编程题和关于jdk8的Stream特性难住了.鉴于此用博客总结一下这道编程题,并结合Stream特性来简化代码,熟悉Api. 题目描述 某校在积极 ...
- 读书分享全网学习资源大合集，推荐Python学习手册等三本书「01」
0.前言 在此之前,我已经为准备学习python的小白同学们准备了轻量级但超无敌的python开发利器之visio studio code使用入门系列.详见 1.PYTHON开发利器之VS Code之 ...
- ZOJ3435
题意略. 思路: 将每一个点的坐标 (x,y,z) 与 (1,1,1) 相减,得到向量 (x - 1,y - 1,z - 1) 我们实际上就是要求出 这样互质的三元组有多少对就行了. 我们把这个长方体 ...
- Oracle数据库中心双活之道：ASM vs VPLEX （转）
双活方案对比:ASM vs V-PLEX 作者:王文杰 Oracle公司 Principle system analyst Oracle高级服务部 Oracle数据库中心的灾备的演变,经历了多年的演变 ...
- Installing the JMeter CA certificate for HTTPS recording
参考: http://jmeter.apache.org/usermanual/component_reference.html#HTTP(S)_Test_Script_Recorder User m ...
- CodeForces 834D The Bakery
The Bakery 题意:将N个数分成K块, 每块的价值为不同数字的个数, 现在求总价值最大. 题解:dp[i][j] 表示 长度为j 且分成 i 块的价值总和. 那么 dp[i][j] = max ...
- lightoj 1226 - One Unit Machine（dp+大组合数去摸）
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1226 题解:由于这些任务完成是有先后的所以最后一个完成的肯定是最后一个任务的子 ...
- 2019 HZNU Winter Training Day 14 Comprehensive Training
A - Choosing Capital for Treeland CodeForces - 219D 题意:有一颗单向边的树,要选取一个结点作为首都.要求是这个结点到其它结点,总共需要翻转的路径数量 ...