<!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. 电子产品使用感受之———我用过的最昂贵的手机壳：otter box 和 Apple 原装清水壳的对比

    2014年9月27日,我买到了我所使用的第一部 iPhone — iPhone 5C 蓝色.今天,2019年3月2日,我手里拿的是iPhoneXR 蓝色,两款手机如出一辙的设计和手感,让我充满了无限的 ...

  2. phpspider php爬虫框架

    其实我自身的不是经常写正则,而且不规则的html去写正则本身就是件很麻烦的事情,如果页面有些微变动和更新就得再次去维护正则表达式,其实是非常蛋疼的 我第一感觉就是去找一下爬虫的库,但是发现现在php爬 ...

  3. Codeforces 670 - A/B/C/D/E/F - (Done)

    链接:https://codeforces.com/contest/670 A - Holidays - [水] AC代码: #include<bits/stdc++.h> using n ...

  4. typescript 如何引入jquery

    webpack配置,不需要配置externals,webpack具体配置如下, const webpack = require('webpack'); const path = require('pa ...

  5. python类型错误：'NoneType' object is not subscriptable

    TypeError: 'NoneType' object is not subscriptable --> 原因:变量使用了系统内置的关键字list 解决:重新定义下这个变量

  6. python基础(13)-面向对象

    类 类的定义和使用 # class Person: def __init__(self, name, age, gender): self.name = name self.age = age sel ...

  7. java 和 c++ 实现的各种基础数据结构和算法

    https://github.com/phishman3579/java-algorithms-implementation https://github.com/xorz57/forest

  8. linux 进程间通信——内存共享映射mmap和munmap

    IPC三种通信机制是指:信号量.共享内存.消息队列,   信号量:通过操作系统中的PV操作来实现: 共享内存:申请一块内存,进程A往共享内存中写,其他的进程就可以通过读出共享内存中的内容来获取进程A所 ...

  9. 简单配置jena在eclipse的开发环境

    Jena:A free and open source Java framework for building Semantic Web and Linked Data applications. 耶 ...

  10. 《linux就该这么学》第五节课，shell脚本的各种语句！

    第四章shell语句 (据课本和虚拟机实验排版,借鉴请改动)               4.2:shell脚本   脚本包括:脚本声明,脚本注释,脚本内容和命令 例:#!/bin/bash      ...