<!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. elk-准备（一）

    一.在搭建elk之前需要做准备工作 1.创建elk用户 groupadd elk -g 1001 useradd elk -m -d /home/elk -s /bin/bash -g 1001 -u ...

  2. Linux命令vi/vim 使用方法讲解

    vi/vim 基本使用方法 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的 ...

  3. torch.utils.data.DataLoader使用方法

    数据加载器,结合了数据集和取样器,并且可以提供多个线程处理数据集.在训练模型时使用到此函数,用来把训练数据分成多个小组,此函数每次抛出一组数据.直至把所有的数据都抛出.就是做一个数据的初始化. 生成迭 ...

  4. One Technical Problem: Can one process load two different c libraries simutaneously, such as uclibc and glibc?

    For some special reasons, there is a possible case which need to load uclibc and glibc in one proces ...

  5. Chrome 调试技巧

    Chrome 调试技巧 1.alert 这个不用多说了,不言自明. 可参考:https://www.cnblogs.com/Michelle20180227/p/9110028.html 2.cons ...

  6. laravel使用记录

    引用外部文件方式参考地址:https://blog.csdn.net/Darry_Zhao/article/details/52689635 跟踪数据库执行语句 DB::enableQueryLog( ...

  7. JMeter学习-041-响应数据中文乱码解决方法

    华夏子孙,中文为母语.因而在接口测试过程中,响应数据含有中文是再也正常不过的事情.同时,初学JMeter的童鞋,经常会遇到响应数据中中文乱码的问题. 本文中提供两种方式的修正方法,仅供大家参考,谢谢. ...

  8. luogu2839 [国家集训队]middle

    题目链接:洛谷 题目大意:给定一个长度为$n$的序列,每次询问左端点在$[a,b]$,右端点在$[c,d]$的所有子区间的中位数的最大值.(强制在线) 这里的中位数定义为,对于一个长度为$n$的序列排 ...

  9. python基础(12)-包的导入&异常处理

    包的导入 几种导入方式 import 包名 import time time.time() import 包名,包名 import time,sys time.time() sys.path from ...

  10. mysql----------利用navicat查看两个数据库之间的差异