黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用

一、总结

一句话总结：

v-bind等这些东西都是用的vue.data里面的变量

1、使用 v-cloak 能够解决 插值表达式闪烁的问题？

在v-cloak的style里面定义 display: none;
<style>
[v-cloak] {/* display: none; */
}
</style>
<p v-cloak>++++++++ {{ msg }} ----------</p>

2、cloak （v-cloak）？

英 /kləʊk/ n. （尤指旧时的）披风，斗篷；

英 /kləʊk/  美 /kloʊk/  全球(英国)  
简明 牛津 新牛津  朗文 韦氏  柯林斯 例句 例句、百科在这里  百科
n. （尤指旧时的）披风，斗篷；遮盖物；伪装，幌子；（复数）衣帽间，行李寄存处，盥洗室；（承担的）主要角色
v. 遮掩；隐匿；掩盖（事实、情感等）；给……披斗篷
n. (Cloak) （美、英）克洛克（人名）
复数 cloaks过去式 cloaked过去分词 cloaked现在分词 cloaking第三人称单数 cloaks

3、v-text和v-cloak的区别？

$ 默认 v-text 是没有闪烁问题的
$ v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空
<style>
[v-cloak] {/* display: none; */
}
</style>
<p v-cloak>++++++++ {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>

4、v-html的作用？

输出data中的html的内容的
<div v-html="msg2">1212112</div>var vm = new Vue({el: '#app',data: {msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',},})

5、v-bind的作用？

用于绑定属性的指令：input type="button" value="按钮" v-bind:title="mytitle + '123'"
v-bind: 指令可以被简写为 :要绑定的属性

6、v-on的作用？

* 用于事件绑定机制：比如click，mouseover等：input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"
* 缩写是 @

7、Vue指令之v-bind的三种用法？

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

二、v-cloak、v-text、v-html的基本使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <style>
10     [v-cloak] {11       /* display: none; */
12     }
13   </style>
14 </head>
15
16 <body>
17   <div id="app">
18     <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
19     <p v-cloak>++++++++ {{ msg }} ----------</p>
20     <h4 v-text="msg">==================</h4>
21     <!-- 默认 v-text 是没有闪烁问题的 -->
22     <!-- v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 -->
23
24     <div>{{msg2}}</div>
25     <div v-text="msg2"></div>
26     <div v-html="msg2">1212112</div>
27
28     <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
29     <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
30     <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
31     <!-- v-bind 中，可以写合法的JS表达式 -->
32
33     <!-- Vue 中提供了 v-on: 事件绑定机制 -->
34     <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->
35
36
37     <input type="button" value="按钮" @click="show">
38   </div>
39
40
41   <script src="./lib/vue-2.4.0.js"></script>
42
43   <script>
44     var vm = new Vue({
45       el: '#app',
46       data: {
47         msg: '123',
48         msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
49         mytitle: '这是一个自己定义的title'
50       },
51       methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
52         show: function () {
53           alert('Hello')
54         }
55       }
56     })
57
58
59     /* document.getElementById('btn').onclick = function(){
60       alert('Hello')
61     } */
62   </script>
63 </body>
64
65 </html>
66
67
68
69
70 <!-- 1. 如何定义一个基本的Vue代码结构 -->
71 <!-- 2. 插值表达式 和  v-text   -->
72 <!-- 3. v-cloak -->
73 <!-- 4. v-html -->
74 <!-- 5. v-bind   Vue提供的属性绑定机制   缩写是 : -->
75 <!-- 6. v-on     Vue提供的事件绑定机制   缩写是 @ -->

转载于:https://www.cnblogs.com/Renyi-Fan/p/11618038.html

黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用相关推荐

  1. oracle v$access执行很慢,Oracle bug之v$access

    今天在客户数据库查询一表格的访问情况,结果系统出现 引用 SQL> / EVENT ------------------------------------------------------- ...

  2. 黑马lavarel教程---10、lavarel模型关联

    黑马lavarel教程---10.lavarel模型关联 一.总结 一句话总结: 1.模型关联比较方便,一次定义,后面都可以使用 2.关联关系 使用动态属性进行调用 1.一对多,多对多实例? 一对多: ...

  3. 【归档】证明V的三个子空间的并是V的子空间，当且仅当其中一个子空间包含另外两个子空间

    Note: 旧的wordpress博客弃用,于是将以前的笔记搬运回来. Foreword: 标记,目前没有完成这道题,想出证明后会进行完善. Question: Prove that the unio ...

  4. 10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块

    效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...

  5. 10.2 黑马Vue电商后台管理系统 完善订单模块--搜索订单（修改后端）

    效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能 我的思 ...

  6. 【Vue】黑马Vue入门到高级实战汇总

    目录 v-text v-cloak 计算属性computed 计算属性双向绑定 监听器watch Class与Style绑定v-bind 条件渲染v-if v-if 与 v-show 比较 列表渲染 ...

  7. 黑马程序员-10 IO流2 File，properties，合并流，对象持久化，管道流，RandomAccessFile...

    ------- android培训.java培训.期待与您交流! ---------- File 将文件和文件夹封装成对象 File类常见方法: 1,创建. boolean createNewFile ...

  8. 黑马VUE快速入门笔记

    VUE 官网(https://v3.cn.vuejs.org/) 点击直接进入 我的第一个vue程序 <!DOCTYPE html> <html lang="en" ...

  9. VueDemo3：音乐播放器[黑马Vue基础网课跟写](vue,axios)

    VueDemo3:音乐播放器 一.歌曲搜索 1.按下回车(v-on,enter) 2.查询数据(axios 接口 v-model) 3.渲染数据(v-for 数组 that) 服务器返回的数据比较复杂 ...

  10. vue判断显示隐藏_web前端进阶之【Vue】10分钟掌握Vue 在学Vue的童鞋过来拿资料

    1.Vue官网 https://cn.vuejs.org 2.引入 通过script标签引入vue时最好放在head里,避免抖屏的情况. Tips:抖屏是指页面稍微大些,刷新页面会出现{{ }}的样式 ...

最新文章

  1. VC++结束程序进程
  2. BZOJ 5064: B-number
  3. Zabbix 2.2（一）：Web监控的监控项
  4. 安装版mysql错误2_【gem安装】mysql2错误
  5. Ivanti罗琦：IT服务管理中“拧紧螺丝”要有门道儿！
  6. 零基础应该先学习 java、php、前端 还是 python？
  7. VMware中的三种网络模式-----Host-only模式
  8. 管理新语：一项工作如果一定要上，不要等准备好，立即上
  9. C/C++[codeup 2088]排名
  10. Excel如何实现随机不重复抽取
  11. hp打印机装不上服务器系统,win10安装不了惠普打印机驱动怎么办
  12. prometheus监控nginx
  13. 关于vue2.0中watch与computed
  14. 反问疑问_反问疑问句的语法
  15. 如何将Scratch作品转换成HTML或者应用程序
  16. Java开源项目管理工具大全
  17. 2018.3版本 CLion的激活码
  18. URL地址中的%2F、%3F、%3D、%3A是什么意思
  19. 【滤波跟踪】基于粒子群算法优化粒子滤波实现目标滤波跟踪优化问题附matlab代码
  20. Moctf--Pubg题目

热门文章

  1. Duplicate property mapping of xxx found in xx 嵌套异常，重复的属性在映射中发现。
  2. 【C#】事件，委托3点详解
  3. java学习笔记-set
  4. 提高生产力：文件和IO操作(ApacheCommonsIO-汉化分享)
  5. Serializable接口初探
  6. JBPM executionService.deleteProcessInstanceCascade(id)报错
  7. 手把手教你自己写一个js表单验证框架
  8. 中间层通讯 Socket? Remoting? WCF?
  9. Linux下glibc内存管理
  10. shell训练营Day18