study
/
vue
/
17th.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <script>
    /***
    思想
        jQuery  操作Dom
        vue     数据驱动
        vue 属于 mvvm模式
        vm双向数据绑定(v-view,m-model)
        单应用页面
        路由
        组件、指令，生命周期，vuex等
        v-for
        v-on 事件处理
            v-on:click  简写 @click
            v-on:mouseover  @mouseover
            v-on:mouseout   @mouseout
            v-on:dblclick   @dblclick
        v-show  是否演示元素
        v-if   v-else-if    v-else  //用于显示时,vi-if不占dom, v-show 会占dom
        v-model 实现view同步,表单的值
        v-bind 属性绑定 eg:v-bind:class 缩写 :class , :src

    */
    </script>

    <style>
        .a1{
            color: red;
        }
        .a2{
            background-color: antiquewhite;
            border: solid 1px black;
        }

         .a3{
            background-color: brown;
            border: solid 1px black;
        }
    </style>

</head>
<body>
    <div id="my">
        <h1>{{name}}的测试</h1>
        <h1>{{age}}</h1>
        <ul>
            <li v-for=" v in arr">{{v}}</li>
        </ul>
        <ul>
            <li v-for="(v,index) in arr">{{v}}{{index}}</li>
        </ul>
        <table>
            <tbody>
                <tr v-for=" (v,index) in lists">
                    <td>{{v.name}}</td>
                    <td>{{v.state | stateFilter}}</td>
                    <td><button v-on:click="del(index)">Del</button></td>
                </tr>
                <tr>
                    <td colspan="3">{{lists.length}}</td>
                </tr>
            </tbody>
        </table>
        <button v-on:click="add(name)">Click</button>
        <br>
        <input type="text" v-model="name" />
        <br>
        <!--obj-->
        <ul>
            <li  v-for="(val,key) in obj">{{val}} === {{key}}</li>
        </ul>
        <br>
        <button @mouseover="mouseover" @mouseout="mouseout">Button event Test</button>
        <button @dblclick="dblclick">dblclick</button>
        <br>
        <button v-show="age == 20">按钮v-show测试</button>
        <br>
        <p v-if="age==18">{{age}}  p的18</p>
        <p v-else-if="age==20">{{age}}  p的20</p>
        <p v-else>nothing</p>
        <br>
        <img v-bind:src="imgurl" width="50" height="50" :title="imgtitle" />

        <!--单个class-->
        <div :class="a1">测试class</div>

         <!--多个class-->
        <div :class="[a1,a2]">测试class2</div>

         <!--json引用,特别注意，这里有个大括号，大括号，大括号 ！！！-->
         <div :class="{'a3':flag}">测试class</div> <!--flag是判断条件,a3是满足条件的值-，a3可以是变量也可以是实际的class->
    </div>
</body>
</html>