1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 	<title>vue</title>
  7. 	<link rel="stylesheet" href="">
  8. 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. 	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
  10. 	<style type="text/css">
  11. 		.red{
  12. 			color: red;
  13. 		}
  14. 		.hd{
  15. 			color: green;
  16. 		}
  17. 		#y{
  18. 			color: yellow;
  19. 		}
  20. 	</style>
  21. </head>
  22. <body>
  23. 	<div id="vue">
  24. 		<!-- v-bind:class="" 是绑定的class意思(可以写成 :class="")
  25. 		v-bind:id="" 是绑定id的意思(可以写成 :id="") -->
  26. 		<h1 v-bind:class="red" >VUE</h1> <!-- 这里red是变量,从下面的data里取值 -->
  27. 		<h1 :class = "hd">VUE</h1>
  29. 		<!-- 这里hd加上单引号后,hd就是字符串了,就是class="hd"的意思 -->
  30. 		<h1 :class = "'hd'">VUE</h1>
  31. 		<h1 v-bind:id="y">VUE</h1>
  32. 	</div>
  33. </body>
  34. <script type="text/javascript">
  35.  var app=new Vue({
  36.  	el:'#vue',
  37.  	data:{
  38.  		red:'red',
  39.  		hd:'hd',
  40.  		y:'y',
  41.  	}
  42.  });
  43. </script>
  44. </html>

效果:

02.VUE学习二之数据绑定的更多相关文章

  1. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  4. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  5. vue学习二:

    vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind: ...

  6. vue 学习二 深入vue双向绑定原理

    vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...

  7. vue 学习 二

    动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...

  8. vue学习(二) 三个指令v-cloak v-text v-html

    //style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...

  9. vue学习(二)

随机推荐

  1. lecture-9-hashmap

    1.hashmap基本操作 2.hash function,equals函数,hashCode 3.练习题 1)Two Sum Given an array of integers, return i ...

  2. Java文件与io——字符流

    Writer写入字符流的抽象类.对文件的操作使用:FileWriter类完成 Reader读取字符的抽象类. public class CharDemo { /** * @param args */ ...

  3. Murano中的角色

    Application Publisher - An individual or company that publishes an application to an application cat ...

  4. (转)linux内核参数注释与优化

    linux内核参数注释与优化 原文:http://blog.51cto.com/yangrong/1321594 http://oldboy.blog.51.cto.com/2561410/13364 ...

  5. vs2017通过模块文件添加自定义注释

    有时我们在VS里建立类和接口时,需要添加比较规范的注释信息,而每次都要复制粘贴比较麻烦,所以需要我们的IDE做一些支持,比较修改VS里自定义的注释模式,以添加自己公司需要的信息格式. 注释比较规范,是 ...

  6. 【Linux】让Ubuntu 支持 GBK等字符集，解决中文乱码

    对GBK,GB2312,GB18030字符集的支持是UBUNTU中文乱码的罪魁祸首,其实我们可以在保持UTF-8为默认编码的条件下添加对这几个编码的支持,以解决中文乱码问题. 我想这个问题肯定有其他人 ...

  7. Freetype 安装时提示 make: Nothing to be done for `unix'

    [Software-Freetype] Freetype 安装时提示 make: Nothing to be done for `unix' 官网下载的第三方软件包,编译安装会报以下错误,解决办法如下 ...

  8. ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第十四天(非原创）

    文章大纲 一.淘淘商城总体架构介绍二.淘淘商城重要技术点总结三.项目常见面试题四.项目学习(all)资源下载五.参考文章 一.淘淘商城总体架构介绍 1. 功能架构   2. 技术选型 (1)Sprin ...

  9. 为什么要使用Vuex?

    为什么要使用Vuex? 1. 假如不使用 1.1 父子组件依赖同一个state 1.2 兄弟组件依赖同一个state 2. 用了Vuex之后 3. 方便记忆和理解

  10. SVG矢量图【转】

    var iconArray=[ //'circle', //实心圆 //'rect', //矩形 //'roundRect', //圆角矩形 //'triangle', //三角形 //'diamon ...