02、Vue-指令系统

02、Vue-指令系统


<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘title>
		
		<script src="./js/vue.min.js" type="text/javascript" charset="utf-8">script>
		<style type="text/css">
			.box{
				width: 300px;
				height:300px;
				background-color:red;
			}
			.active{
				background-color:green;
			}
		style>
	head>
	<body>
		<div id="app">	
		div>
	body>
	<script>
		// 创建实例化对象

		// v-text innertext  
		// v-html innerhtml
		// v-if 数据属性的值 如果为假 则不再页面中渲染反之亦然 (开销较大)
		// v-show 控制dom元素的显示隐藏 控制display:none|block;    本质上无论真假都被渲染出来了
		// v-bind 给标签绑定属性(系统属性,自定义属性) 控制类名(class)对元素显示隐藏display:none|block  简便写法 :class=
		// v-on:原生事件名='我们声明的函数名'        绑定事件  简便写法 @:click
		// v-for='(value,key) in menuList'         遍历对象
		new Vue({
			el: "#app",
			data: function() {
				return {
					// 数据属性
					msg: "指令系统",
					msg2: 'innerhtml',
					isshow: true,
					isgreen: false,
					menuList: [
						// 数组
						{"id":1,name:"cxm",price:70},
						{"id":2,name:"wusiyuan",price:80},
						{"id":3,name:"cxm",price:90},
						{"id":4,name:"yy",price:30},
					],
					object:{
						// 对象
						name:"cxm",
						age:18,
						sex:"女",
					}
				}
			},
			template: `
				

{{msg}}

如果为真就显示
否则就隐藏
已显示
已隐藏
show已显示
show已隐藏
  • {{value.id}}

    {{value.name}}

    {{value.price}}

  • {{key}} === {{value}}
`
, methods:{ clickHandler(e){ console.log(this) // this.isgreen=true; // 绑定点击事件 改变isgreen值来改变颜色 this.isgreen=!this.isgreen; } } })
script> html>

你可能感兴趣的:(Vue学习基础)