Vue1-class、style、v-bind:(简写为 :)、v-show、v-if

```css
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		.active{color: red;}
		.cen{text-align: center;line-height: 200px;}
	</style>
</head>
<body>
	<!-- 
	vue+vuex+vuerouter+elementui+axios
	核心+管数据+管路有+快速建立框架+异步请求 --辅助开发
	渐进式(需要什么加什么,一层层加)
	先加vue链接:https://cn.vuejs.org/v2/guide/
	引入文件(基础学习使用)
	mvc --model(数据层) view(视图结构) controler(控制器-控制逻辑)
	vue --数据与视图分离-最小程度操作DOM(DOM过多影响性能)
	数据推动视图
	vue是一个mvvm模型(model view viewmodel)

	如何往页面中加html
	指令:是指带有v-前缀的特殊属性,指令后面都是Js
		v-html 往元素里面插入html内容
	如何操作元素的属性 
		v-bind 用于动态的绑定元素的属性(class,href等等),可以直接简写为:
		v-bind关于class和style的特殊用法
			class:
				直接绑定一个对象,对象的布尔值用来表示属性名那个class存不存在
				直接绑定一个数组,数组里面变量存储着真实的class名字
			style:
				直接绑定一个样式对象,驼峰式命名,分号该对象
				直接绑定一个数组
		v-show 绑定布尔值控制显示隐藏,元素存在,切换样式(频繁切换)
		v-if   绑定布尔值控制显示隐藏,元素是否渲染(存在)(判断显示隐藏)
		v-else-if 互斥事件

	 -->

	 <div id="app">
	 	<div v-html="message" v-bind:class="{active:isActive,box:aaa}"></div>
	 	<h2>{{news.title}}</h2>
	 	<a :href="url">跳转</a>
	 </div> 

	 <div id="try">
		<div v-html="message" v-bind:class="[activeClass,errClass]"></div>
	 </div>

	 <div id="try2">
	 	<h1 v-bind:style="{width:'200px',height:'200px',backgroundColor:color}" v-bind:class="cenClass">188男团</h1>	
	 </div>

	 <div id="try3">
	 	<h1 v-bind:style="
	 	[try3Style_1,try3Style_2]">人渣</h1>	
	 </div>

	 <div id="try4">
	 	<h1 v-show="show1">23333</h1>
	 	<h2 v-if="show2">hhhhh</h2>	
	 	<h3 v-if="show3=='A'"></h3>
	 	<h3 v-else-if="show3=='B'">T</h3>
	 	<h3 v-else-if="show3=='C'">M</h3>
	 	<h3 v-else="show3"></h3>
	 </div>

	 <script type="text/javascript">
	 	var app = new Vue({
	 		el:"#app",  
	 		//挂载点,这个实例对哪个(#app/.box--css选择器,一般用id)
	 		//div生效,在这个div里写vue语法都可以被识别
	 		data:{
	 			message:"

我的第一个vue应用

"
, //{{}}是提供一个js环境,只能写表达式不能写语句,赋值加减乘除三目运算比大小,在标签之中用 news:{title:"美伊战争"}, url:"http://www.jd.com", isActive:true, //显示有没有这个class aaa:true } }) //class传数组 var app2 = new Vue({ el:"#try", data:{ message:"尝试", activeClass:"active", errClass:"text-danger" } }) //style里面color是动态值 var app3 = new Vue({ el:"#try2", data:{ color:"#666666", cenClass:"cen", } }) //style里放数组 var app4 = new Vue({ el:"#try3", data:{ try3Style_1:{ width:"100px", height:"100px", backgroundColor:"#E8B66C" }, try3Style_2:{ textAlign:"center", lineHeight:"100px" } } }) var app5 = new Vue({ el:"#try4", data:{ show1:true, show2:true, show3:"A" } }) </script> </body> </html>

你可能感兴趣的:(Vue1-class、style、v-bind:(简写为 :)、v-show、v-if)