2 Vue-指令系统_jquery

02、Vue-指令系统

<!DOCTYPE html>
<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: '<a>innerhtml</a>',
          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: `
        <div clss='app'>
          <h2>{{msg}}</h2>
          <p v-text='msg'></p>
          <div v-html='msg2'></div>
          
          <div v-if='isshow'>如果为真就显示</div>
          <div v-if='!isshow'>否则就隐藏</div>
          
          <div v-if='Math.random() > 0.5'>已显示</div>
          <div v-else='Math.random() < 0.5'>已隐藏</div>
          
          <div v-show='isshow'>show已显示</div>
          <div v-show='!isshow'>show已隐藏</div>
          
          <div class='box' v-bind:class='{active:isgreen}' v-on:click='clickHandler'></div>
          
          <ul>
            <li v-for='(value,index) in menuList'>
              <h3>{{value.id}}</h3>
              <h3>{{value.name}}</h3>
              <h3>{{value.price}}</h3>
            </li>
          </ul>
          
          <ul>
            <li v-for='(value,key) in object'>
              {{key}} === {{value}}
            </li>
          </ul>
        </div>
        `,
        methods:{
          clickHandler(e){
            console.log(this)
            // this.isgreen=true; // 绑定点击事件 改变isgreen值来改变颜色
            this.isgreen=!this.isgreen;
          }
        }
    })</script>
</html>

2 Vue-指令系统_vue_02