黑马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的基本使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <style>

     [v-cloak] {

       /* display: none; */

     }

   </style>

 </head>

 <body>

   <div id="app">

     <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->

     <p v-cloak>++++++++ {{ msg }} ----------</p>

     <h4 v-text="msg">==================</h4>

     <!-- 默认 v-text 是没有闪烁问题的 -->

     <!-- v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空 -->

     <div>{{msg2}}</div>

     <div v-text="msg2"></div>

     <div v-html="msg2">1212112</div>

     <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->

     <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->

     <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->

     <!-- v-bind 中，可以写合法的JS表达式 -->

     <!-- Vue 中提供了 v-on: 事件绑定机制 -->

     <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->

     <input type="button" value="按钮" @click="show">

   </div>

   <script src="./lib/vue-2.4.0.js"></script>

   <script>

     var vm = new Vue({

       el: '#app',

       data: {

         msg: '123',

         msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',

         mytitle: '这是一个自己定义的title'

       },

       methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法

         show: function () {

           alert('Hello')

         }

       }

     })

     /* document.getElementById('btn').onclick = function(){

       alert('Hello')

     } */

   </script>

 </body>

 </html>

 <!-- 1. 如何定义一个基本的Vue代码结构 -->

 <!-- 2. 插值表达式 和  v-text   -->

 <!-- 3. v-cloak -->

 <!-- 4. v-html -->

 <!-- 5. v-bind   Vue提供的属性绑定机制   缩写是 : -->

 <!-- 6. v-on     Vue提供的事件绑定机制   缩写是 @ -->
 

黑马vue---8-10、v-cloak、v-text、v-html、v-bind、v-on的基本使用的更多相关文章

  1. [前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre

    vue的指令学习记录 vue-if | text | for | on | model - 目录 vue的指令学习记录 vue-if | text | for | on | model ... 预备 ...

  2. java.lang.NoSuchMethodError: com.itextpdf.text.pdf.PdfDiv.setKeepTogether(Z)V

    用com.itextpdf.text.Document打印pdf报错 时间:2017-06-22 12:23:39,594 - 级别:[ERROR] - 消息: [other] Servlet.ser ...

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

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

  4. 异常 Failed to bind NettyServer on /10.133.7.216:29105, cause: Failed to bind to: /0.0.0.0:29105

    "C:\Program Files\Java\jdk1.7.0_80\bin\java" -agentlib:jdwp=transport=dt_socket,address=12 ...

  5. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  6. Error (10170): Verilog HDL syntax error at passwd.v(21) near text "if"; expecting an identifier ("if" is a reserved keyword ), or "endmodule", or a parallel statement

    你得加上时序啊笨蛋

  7. cordova -v 报错，必须用sodu cordova -v

    问题来源:MAC Caption EI 安装nodejs 4.5.0 之后,用命令:sudo npm install -g cordova ionic 安装cordova 和 ionic 然后用命令: ...

  8. Ubuntu 14.10 下安装Sublime Text 3，注册码，中文输入法

    1 下载Sublime Text 3,网址http://www.sublimetext.com/3 2 双击deb安装 3 因为需要需要付费,输入下面的注册码,下面的注册码,来自百度,亲测可行 Sub ...

  9. Vue（10）表单输入绑定v-model

    v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...

  10. 黑马vue学习的总结,vue笔记

    cls:清除终端输出 $refs $http $route 使用this.$emit('show')来调用父方法

随机推荐

  1. 1 sql server 中merge的用法

    MERGE 要更新的表名 AS target USING ( 这里是用什么数据源来跟新 ) AS source ( 这里是数据源的所有列名 ) ON 这里是要更新的表和数据源的匹配条件 WHEN MA ...

  2. 1.移动端自动化测试-知识笔记（面试必备，测试点，adb命令）

    移动端测试: 移动应用,特性(功能) 满足 需求(产品文档,隐性需求) 一.App功能测试: 死活背下来1.业务逻辑正确性测试: 产品文档,隐性需求- 写成测试用例 2.兼容性测试:   1.系统版本 ...

  3. linux 重定向类型 超级块 i节点

    超级块:定义文件系统的元数据(总大小.块大小.空闲.......):在格式化的时候确定 查看超级块信息:tune2fs  -l   目录 i节点:定义文件的元数据(名称.大小.存放位置.权限.修改时间 ...

  4. 2019.5.13-5.17知识点：文件管理、目录操作、索引节点、软硬链接，vim文本编辑 知识点

    文件管理 ● cp 复制文件 cp /路径(原文件) /路径(复制文件)/文件重命名(可选)    -i:覆盖前询问    -r:递归复制目录及内部内容   -a:归档,相当于-dr --preser ...

  5. 解决docker容器的窗口大小问题

    解决docker容器的窗口大小问题 最近哥们在是使用docker时,发现有些容器内部窗口大小有问题. 如下午所示,vi窗口只占据左上角一部分.正常情况下vi应该铺满整个窗口才对呀. 所以哥们找到了解决 ...

  6. context:component-scan 注解的扫描

    <context:component-scan base-package="com.matt.cloud"/> bean-context中 spring.handler ...

  7. union共同体

    定义: union 共用体名{ 成员列表}: 与结构体不同的是,共用体的所有成员占用同一段内存,修改一个成员会影响其余成员.但是结构体的各个成员会占不同的内存. 结构体占用的内存大于等于所有成员占用的 ...

  8. 利用fastjson的一些使用小记

    //Json converter to objectTouBaoTXTpaicResponse touBaoTXTpaicResponse = JSON.parseObject(json.toJSON ...

  9. AngularJs-变量

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. [Angular 8] Take away: Tools for Fast Angular Applications

    Based on the talk from NG-CONF. Check it out by yourself, here is just my own take away :) Different ...