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的详细分析,对 ...
随机推荐
- 不简单的工厂：实际体验 .NET Core 2.1 新生物 HttpClientFactory
在 HttpClientFactory 出生之前,由于 HttpClient 臭名昭著的“dispose之后4分钟TCP连接才会被关闭”问题(详情),只能使用单例或静态的 HttpClient ,比如 ...
- poj3278
#include<iostream> #define MAX 100001 int john,cow; int queue[MAX]; int vis[MAX]; int ans; voi ...
- 在centos7下安装python3的步骤
环境搭建 准备工具: centos7:http://mirror.bit.edu.cn/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso virtus ...
- Objective-C语法之代码块(block)的使用 （转载）
代码块本质上是和其他变量类似.不同的是,代码块存储的数据是一个函数体.使用代码块是,你可以像调用其他标准函数一样,传入参数数,并得到返回值. 脱字符(^)是块的语法标记.按照我们熟悉的参数语法规约所定 ...
- 深入浅出--UNIX多进程编程之fork()函数
0前言 上周都在看都在学习unix环境高级编程的第八章--进程控制.也就是这一章中.让我理解了unix中一些进程的原理.以下我就主要依照进程中最重要的三个函数来进行解说.让大家通过阅读这一篇文章彻底明 ...
- 9个用来爬取网络站点的 Python 库
上期入口:10个不到500行代码的超牛Python练手项目 1️⃣Scrapy 一个开源和协作框架,用于从网站中提取所需的数据. 以快速,简单,可扩展的方式. 官网:https://scrapy.or ...
- sqlite数据库中为字段设置默认值为当前时间
开始 `creation_time` NUMERIC DEFAULT (datetime('now','localtime')), `update_time` NUMERIC DEFAULT (dat ...
- python 定义带默认参数的函数
- vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
- Missing library: xdoclet-1.2.1.jar.如何解决？
去这里下载xdoclet-bin-1.2.1.zip http://sourceforge.net/projects/xdoclet/files/xdoclet/1.2.1/ 解压出来,比如解压到C: ...