Vue基础-插值表达式-数据驱动视图-指令系统

   <div id="app">
           <h1>{{msg}}</h1>
           <h2>{{str.split('').reverse().join('')}}</h2>
       </div>
       <script type="text/javascript">
      var vm= new Vue ({
               el:'#app',
               data:{
                   msg:'大葱',
                   str:'react'
               },
              // 写在构造器中
              template:`
              <div class='app'>
               <h2>{{msg}} </h2>
               <p v-text='msg'> </p>
              </div>`
           });
          console.log(vm);
       </script>

new Vue({
				el:'#app',
				data:function(){
					return{
						msg:'指令系统',
						msg2:'<h2>指令系统</h2>',
						isShow:false,
						isGreen:false,
						text:'哈哈哈',
						menuLists:[
							{id:1,name:"大腰子",price:50},
							{id:2,name:"排骨",price:60},
							{id:3,name:'肘子',price:830},
						],
						people:{
							name:'寇世龙',
							age:21,
							fav:'AV'
						}
					}
				},
				// 写在构造器中
				template:`
				<div class='app'>
	             <h2>{{msg}} </h2>
	             <p v-text='msg'> </p>
				 <div v-html='msg2'></div>
				 <div v-text='1+1'></div>
				 <div v-if='isShow'>我想你也是爱我的</div>
				 <div v-if='!isShow'>你也舍不得</div>
				 <div v-if='Math.random()>0.5'>
				 已显示
				 </div>
				 <div v-else>
				 已隐藏
				 </div>
				 <div v-show='isShow'>显示 </div>
				 <div v-show='!isShow'>隐藏 </div>
				 <div class='box' :class='{active:isGreen}' :a='text' v-on:click='clickHeadler'>  </div>
				 <ul>
				  <li v-for='item in menuLists'>
				   <h5 v-text='item.id'></h5>
				   <h3>{{item.name}}</h3>
				   <em>{{item.price}}</em>
				  </li>
				 </ul>
				 
				 <ul>
				 <li v-for='(value,key) in people'>
				  {{key}}==={{value}}
				 </li>
				 </ul>
	            </div>`,
				methods:{
					clickHeadler(e){
						// this.isGreen=!this.isGreen
						if(this.isGreen =true){
							this.isGreen =false
						}else{
							this.isGreen=true	
						}
					}
				}
			})