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 ...
随机推荐
- Java - 手动解析不带引号的JSON字符串
目录 1 需求说明 2 解析代码 2.1 实现思路 2.2 详细代码 2.3 测试样例 1 需求说明 项目中遇到了一批不带引号的类JSON格式的字符串: {Name:Heal,Age:20,Tag:[ ...
- jmeter学习笔记-----第一天
环境简介:apache-jmeter-3.3 win10系统 一.Jmeter录制操作步骤: 1.工作台---添加HTTP代理服务器: 2.为自己笔记本的浏览器设置相同代理: 3.测试计划下-s ...
- Docker进阶-资源管理Swarm+Portainer
Docker Swarm资源管理 Docker Swarm是Docker官方三剑客项目之一,提供Docker容器集群服务,是Docker官方对容器云生态进行支持的核心方案. 使用它,用户可以将多个Do ...
- 快速了解Python并发编程的工程实现(上)
关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
- Mybatis-Spring扫描路径有重叠导致Invalid bound statement(not found)问题
背景 近日,某个系统的测试环境mybatis总是报Invalid bound statement(not found)异常,导致tomcat容器无法启动.异常信息如下: org.apache.ibat ...
- SpringBoot:elasticSearch 7.2.0 Java High Level REST Client 搜索 API
Springboot整合最新版elasticSearch参考之前的文章:SpingBoot:整合ElasticSearch 7.2.0 Search API SearchRequest用于与搜索文档, ...
- sea.js的同步魔法
前些时间也是想写点关于CMD模块规范的文字,以便帮助自己理解.今天看到一篇知乎回答,算是给了我一点启发. 同步写法却不阻塞? 先上一个sea.js很经典的模块写法: // 定义一个模块 define( ...
- GUID做主键真的合适吗
在一个分布式环境中,我们习惯使用GUID做主键,来保证全局唯一,然后,GUID做主键真的合适吗? 其实GUID做主键本身没有问题,微软的很多项目自带DB都是使用GUID做主键的,显然,这样做是没有问题 ...
- Docker学习总结(六)--Dockerfile
什么是 Dockerfile Dockerfile 是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像. 对于开发人员:可以为开发团队提供一个完全一致的开发环境; 对于测试人 ...
- Linux 下安装 mysql8
1.下载mysql wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.13-linux-glibc2.12-x86_64.tar 2. ...