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              }          }        }      })