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

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_30483697

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量182

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/11618038.html

版权

黑马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

weixin_30483697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用

黑马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] {...
复制链接

扫一扫