03.v-cloak、v-v-text、v-html、v-bind、v-on
<!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的更多相关文章
- empty()、html("")和text("")
empty().html("")和text("")在删除匹配元素内内容时是一样的.jQuery源码中实现有所不同,但效果相同.可以测试一下源码: <!DO ...
- MySQL中char、varchar和text的区别
三者空间占用方面: char:存储定长数据很方便,CHAR字段上的索引效率极高,可以有默认值,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间(自动用空格填 ...
- 启动服务报错：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 ...
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架) 插件名称:javascript-API-Completions 支持Javascript.J ...
- MySQL之char、varchar和text的设计
最近有表结构设计中出现了varchar(10000)的设计引起了大家的讨论,我们下面就来分析分析. 首先我们先普及一下常识: 1.char(n)和varchar(n)中括号中n代表字符的个数,并不代表 ...
- 【工具篇】Sublime Text 2/3 安装汉化破解、插件包安装教程详解
Sublime Text概述: Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器. 漂亮的用户界面和非凡的功能,例如:迷你地图,多选择,Python插件,代码段等等. 完全 ...
- [转载]MySQL之char、varchar和text的设计
[转载]MySQL之char.varchar和text的设计 来源:https://www.cnblogs.com/billyxp/p/3548540.html 首先我们先普及一下常识: 1.char ...
- js中bind、call、apply函数的用法
最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...
- Javascript中bind、call、apply函数用法
js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用. 同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和ar ...
- [专业名词·硬件] 2、DC\DC、LDO电源稳压基本常识（包含基本原理、高效率模块设计、常见问题、基于nRF51822电源管理模块分析等）·长文
综述先看这里 第一节的1.1简单介绍了DC/DC是什么: 第二节是关于DC/DC的常见的疑问答疑,非常实用: 第三节是针对nRF51822这款芯片电源管理部分的DC/DC.LDO.1.8的详细分析,对 ...
随机推荐
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- C#压缩图片时保留原始的Exif信息
啥是Exif信息,有啥用,百度百科有解释: Exif百科 总之,这东西对摄影爱好者来说是不可或缺的,通常使用Photoshop来压缩只要不是保存为Web格式都会保留Exif信息. 而我们写代码来压缩图 ...
- python语法_使用占位符进行格式化输出
“%s” 占位符 name = input("name:") age = input("age:") job = input("job:" ...
- C++中类型（理解）
long long类型 转载:https://blog.csdn.net/junecau/article/details/6766033 在做ACM题时, 经常都会遇到一些比较大的整数.而常用的内置整 ...
- CH 3101 - 阶乘分解 - [埃筛]
题目链接:传送门 题解: $(1e6)!$ 这种数字,表示都表示不出来,想直接 $O(\sqrt{N})$ 分解质因数这种事情就不要想了. 考虑 $N!$ 的特殊性,这个数字的所有可能包含的质因子,就 ...
- Spring Boot 你所不知道的超级知识学习路线清单
因而 Spring Boot 应用本质上就是一个基于 Spring 框架的应用,它是 Spring 对“约定优先于配置”理念的最佳实践产物,它能够帮助开发者更快速高效地构建基于 Spring 生态圈的 ...
- Web开发——HTML基础（HTML表单/下拉列表/多行输入）
参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...
- scrollview嵌套tableview
之前写过一次,忘记了, 用的通知 FS
- 第一个微信小程序踩的几个小坑
1.小程序测试调试阶段可以打开项目设置中的“开发环境不校验请求域名.TLS版本及HTTPS证书”配置,即可以和自己的服务器联调了. (需要在工具栏的设置 -> 项目设置 中配置,mac下直接co ...
- 洛谷P2569 股票交易 [SCOI2010] dp
正解:dp+单调队列优化 解题报告: 先放个传送门鸭qwq umm首先dp转移挺好想的?就买和不买 f[i][j]表示第i天手上有j的股份的最多钱,转移也很好想?就枚举第1天到第i-w-1天枚举买k股 ...