<!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提供的事件绑定机制   缩写是 @ -->

03.v-cloak、v-v-text、v-html、v-bind、v-on的更多相关文章

  1. empty()、html("")和text("")

    empty().html("")和text("")在删除匹配元素内内容时是一样的.jQuery源码中实现有所不同,但效果相同.可以测试一下源码: <!DO ...

  2. MySQL中char、varchar和text的区别

    三者空间占用方面: char:存储定长数据很方便,CHAR字段上的索引效率极高,可以有默认值,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间(自动用空格填 ...

  3. 启动服务报错：nested exception is java.lang.NoSuchMethodError: org.apache.cxf.common.jaxb.JAXBUtils.closeUnmarshaller(Ljavax/xml/bind/Unmarshaller;)V

    1.启动tomcat时报错:Error creating bean with name 'payInfService': Invocation of init method failed; neste ...

  4. Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)

    Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架)   插件名称:javascript-API-Completions 支持Javascript.J ...

  5. MySQL之char、varchar和text的设计

    最近有表结构设计中出现了varchar(10000)的设计引起了大家的讨论,我们下面就来分析分析. 首先我们先普及一下常识: 1.char(n)和varchar(n)中括号中n代表字符的个数,并不代表 ...

  6. 【工具篇】Sublime Text 2/3 安装汉化破解、插件包安装教程详解

    Sublime Text概述: Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器. 漂亮的用户界面和非凡的功能,例如:迷你地图,多选择,Python插件,代码段等等. 完全 ...

  7. [转载]MySQL之char、varchar和text的设计

    [转载]MySQL之char.varchar和text的设计 来源:https://www.cnblogs.com/billyxp/p/3548540.html 首先我们先普及一下常识: 1.char ...

  8. js中bind、call、apply函数的用法

    最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...

  9. Javascript中bind、call、apply函数用法

    js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用. 同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和ar ...

  10. [专业名词·硬件] 2、DC\DC、LDO电源稳压基本常识（包含基本原理、高效率模块设计、常见问题、基于nRF51822电源管理模块分析等）·长文

    综述先看这里 第一节的1.1简单介绍了DC/DC是什么: 第二节是关于DC/DC的常见的疑问答疑,非常实用: 第三节是针对nRF51822这款芯片电源管理部分的DC/DC.LDO.1.8的详细分析,对 ...

随机推荐

  1. ArcGIS AddIn调用ArcMap自带的对话框

    ESRI.ArcGIS.Framework命名空间提供了ArcGIS常用的一些对话框,可以在开发时直接调用这些对话框,而不需要重新去写Form 主要对话框有 1.IColorBrowser/IColo ...

  2. Java窗体简单登入案例（附带源码）

    运行截图 源代码下载地址 https://pan.baidu.com/s/1i82Z_onKdOdPFdfGce5e8Q

  3. Saltstack如何修改主机名或者minion id

    参考:http://www.mamicode.com/info-detail-2241784.html 在生产维护的过程中,由于某种需要,可能需要给一些服务器改名,比如根据服务器的用途重新进行定义主机 ...

  4. git迁移

    git迁移 项目开发的不同阶段可能要使用不同的git仓库,有时需要迁移. git有很好的方法,只需要几个命令 目标: 我们需要把代码从 http://a.com/projectA.git 迁移到 ht ...

  5. redis分布式锁的具体应用

    1.关于redis分布式锁,有个setIfAbsent: 即如果没有设置,会添加分布式锁,并返回true; 2.redis分布式锁有个轮询过程: / * @param key redis键 * @pa ...

  6. PrimeNG之DataTable

    --数据表显示在表格格式数据. Basic Import import {DataTableModule,SharedModule} from 'primeng/primeng'; source &l ...

  7. SQL[Err] ORA-00979: not a GROUP BY expression

    Oracle中group by用法 not a GROUP BY expression异常产生是因为group by用法的问题. 在使用group by 时,有一个规则需要遵守,即出现在select列 ...

  8. ADB命令（全）

    当熟悉Shell命令的人使用adb是没有任何难度的,因为adb中绝大多少命令都是引用的shell命令 以下命令进行归类,红色部分字体是测试人员常用的adb命令 基础命令 1.启动adb服务 adb s ...

  9. mysql /tmp目录爆满问题的处理

    mysql /tmp目录爆满问题的处理 突然收到zabbix告警,说mysql服务器的/目录磁盘空间不足. 登录到服务器,看了下发现100GB的根目录,居然使用了差不多90GB.这台服务器上只跑了一个 ...

  10. JMeter-标的上架调整与完成

    问题:利随本青,按日的返回的参数不正确 各种计息方式的上标,新做产品的上架 散标各种计息方式的上架,新做产品的上架 修改后B环境上架 修改后C环境上架 [制作提案(担保机构)-提交18] loan.d ...