<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

	<style type="text/css">

		.red{

			color: red;

		}

		.hd{

			color: green;

		}

		#y{

			color: yellow;

		}

	</style>

</head>

<body>

	<div id="vue">

		<!-- v-bind:class="" 是绑定的class意思(可以写成 :class="")

		v-bind:id="" 是绑定id的意思(可以写成 :id="") -->

		<h1 v-bind:class="red" >VUE</h1> <!-- 这里red是变量,从下面的data里取值 -->

		<h1 :class = "hd">VUE</h1>

		<!-- 这里hd加上单引号后,hd就是字符串了,就是class="hd"的意思 -->

		<h1 :class = "'hd'">VUE</h1>

		<h1 v-bind:id="y">VUE</h1>

	</div>

</body>

<script type="text/javascript">

 var app=new Vue({

 	el:'#vue',

 	data:{

 		red:'red',

 		hd:'hd',

 		y:'y',

 	}

 });

</script>

</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. UnityError 动画系统中anystate跳转重复播放当前动画解决方案

  2. oracle 中的null与''

    1.先看看Null与''在oracle中的表现 C:\Users\zen>sqlplus hr/hr SQL Production :: Copyright (c) , , Oracle. Al ...

  3. 利用Python进行数据分析 2017 第二版 项目代码

    最近在学习<利用Python进行数据分析>,找到了github项目的地址, 英文版本,中文版本 (非常感谢翻译中文的作者). mark一下,方便后边学习查找.

  4. Spark编程模型(中)

    创建RDD 方式一:从集合创建RDD makeRDD Parallelize 注意:makeRDD可以指定每个分区perferredLocations参数parallelize则没有. 方式二:读取外 ...

  5. hibernate课程 初探单表映射1-5 hibernate第一个demo

    hibernate 开发步骤:(hibernate4.2+mysql6.0) 1 hibernate配置文件(hibernate.cfg.xml) 2 持久化类 3 对象-关系映射文件 4 hiber ...

  6. 【干货】JavaScript DOM编程艺术学习笔记7-9

    七.动态创建标记 在文档中不写占位图片和文字代码,在能调用js的情况下动态创建,文档支持性更好. 在原来的addLoadEvent prepareGallery showPic的基础上增加函数prep ...

  7. koa源码分析

    最近项目要使用koa,所以提前学习一下,顺便看了koa框架的源码. 注:源码是koa2.x koa的源码很简洁,关键代码只有4个文件,当然还包括一些依赖npm包 const Koa = require ...

  8. 多个图标图片（雪碧图）使用CSS样式显示

    现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务 ...

  9. 工作流性能优化（敢问activiti有扩展性？）（2）

    2015/4/17 粗略看了activiti的sql的,在ativity engine包里边: 没什么头绪,先用excel记录数据量少的时候本机的性能情况:   不打印hibernate的sql:一刷 ...

  10. mysqlimport命令

    mysqlimport的大多数选项直接对应LOAD DATA INFILE子句. 选项: -u,--user 指定连接用户名.   -p,--password[name] 指定连接用户的密码.   - ...