02-vue的指令系统.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">

		// v-text   innerText  相对而言使用不多
		// v-html  innerHTML


		// v-if是真正的条件渲染，DOM元素被切换的过程 被销毁和重建
		// v-if 是懒惰的。如果初始条件为假，则什么都不做，直到渲染条件变为值，才会开始渲染条件块
		// v-show 不管你的初始条件是什么，元素总是会被渲染，并且只是简单的基于css样式进行切换


		// 一般来说， v-if 有更高的切换开销，v-show 有更高的初始渲染开销


		// 关注的视图层
		new Vue({
			el:'#app',
			template:`
				<!-- 一定要有个根标签 闭合的标签-->
				<div>
					<div v-html = 'msg2'></div>
					<div v-if = 'isShow'>哈哈哈哈</div>
					<div v-show = 'isShow'></div>
					<div v-if = 'Math.random() > 0.5'>
						此值大于0.5
					</div>
					<div v-else>
						此值小于0.5
					</div>
					<ul>
						<li v-for = '(item,index) in menuLists'>
							<h3>{{ index }}</h3>
							<h5>{{item.name}}</h5>
							<h4>{{item.price}}</h4>

						</li>
					</ul>
					<ul>
						<li v-for = '(value,key) in object'>
							{{ key }} -- {{value}}
						</li>
					</ul>
				</div>
			`,
			data:function(){
				return {
					msg:"指令系统",
					msg2:"<h2>指令系统</h2>",
					isShow:true,
					menuLists:[
						{id:1,name:'大腰子',price:60},
						{id:2,name:'宫保鸡丁',price:30},
						{id:3,name:'炸黄花鱼',price:20}

					],
					object:{
						name:'凃sir',
						age:18,
						fav:'唱歌'
					}
				}
			}
		});
	</script>
	
</body>
</html>