5.Vue全家桶实战:第2讲- [Vue指令相关]

1.js有哪几种数据类型，5种 undefined- null-空对象的指针 number-整数型浮点型 boolean-布尔型，true\false string-字符串 object-对象 function-函数
本节学习了Vue常用的指令V-model、v-text、v-on、v-bind、v-for，以及数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue全家桶-指令系统</title>

</head>
<body>

<div id="app">
    <label>我的名字：{{name}}</label>
    <input type="text" v-text="name" ><br>
    <br><label>我的年龄：{{age}}</label>
    <input type="text" v-text="age" ><br>
    <label>我的公司：</label>
    <input v-model="company" /><br/>
    <input class="blueBut" type="button" value="点击提交" v-on:click="buttonToggle" v-bind:class="{butBlueBg:blueButActive}" />
    <br>
    <div ref="boxName" class="box" v-on:click="toggleBg" v-bind:class="{boxActive:setBgBlue}">
        red
    </div>
    <label>v-for的使用:v-for渲染数组</label>
    <ul>
        <li v-for="(item,index) in recipe">
            <h5>{{item.id}}</h5><h5>{{item.name}}</h5><h5>{{item.price}}</h5>
        </li>
    </ul>
    <label>v-for的使用:v-for渲染对象</label>
    <ul>
        <li v-for="(value,key) in person">
            <p>{{key}}--->{{value}}</p>
        </li>
    </ul>
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
   var vm = new Vue({
        el:"#app",
        data:function () {
            return{
               name:"李小鹏",
                age:"16",
                company:"亚信科技中国有限公司",
                setBgBlue:false,
                blueButActive:false,
                recipe:[
                    {id:1,name:"烤鸭",price:500},
                    {id:2,name:"牛肉",price:200},
                    {id:3,name:"蔬菜",price:60}
                ],
                person:{
                   name:"刘伟",
                    age:"28",
                    phoneNum:"18618222314"
                }
            }
        },
        methods:{
            handleFunc:function (e) {
                // alert("1111");
                console.log(this);
                console.log(vm.$refs.boxName);
                vm.$refs.boxName.setBgBlue = !this.setBgBlue;
            },
            toggleBg:function (e) {
                // console.log(vm);
                this.setBgBlue = !this.setBgBlue;
                console.log(this);

            },
            buttonToggle:function () {
                this.blueButActive = !this.blueButActive;
                // vm.$refs.boxName.setBgBlue = !this.setBgBlue;
                // console.log(vm.$refs.boxName);
                this.setBgBlue = !this.setBgBlue;
            }
        }

    });
</script>

</body>
</html>
<style>
    .blueBut{
        width: 100px;
        height: 30px;
        background:#42b983;
        text-align: center;
        color: beige;
    }
    .blueButActive{
        background: steelblue;
    }
    .box{
        background: red;
        width: 100px;
        height: 200px;
        text-align: center;
    }
    .boxActive{
        background: #42b983;
    }
    .butBlueBg{
        background: #2c3e50;
    }
</style>