Vue学习之渲染

一.计算命令computed

```html
<body>
    <div id="app">
        姓<input type="text" v-model="first_name">
        <hr>
        名<input type="text" v-model="last_name">
        <hr>
        <p>{{ first_name + " " + last_name }}</p>
        <p>{{ full_name_fn() }}</p>
        <!-- 一个变量的值依赖于多个变量的值 -->
        <p>{{ full_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            first_name: "",
            last_name: "",
        },
        methods: {
            // 声明的是函数, 该函数必须手动调用
            full_name_fn: function () {
                return this.first_name + " " + this.last_name
            }
        },
        computed: {
            // 声明变量full_name, 该变量的值等于后方函数的返回值
            // 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数
            full_name: function () {
                return this.first_name + " " + this.last_name
            }
        }
    })
</script>
```
二.监听命令watch

```html
<body>
    <div id="app">
        姓名<input type="text" v-model="full_name">
        <hr>
        <p>{{ first_name }}</p>
        <hr>
        <p>{{ last_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            full_name: "",
            first_name: "",
            last_name: "",
        },
        watch: {
            // wacth只是对已有的变量进行值变化的监听, 一旦发现值变化,系统自动回调监听变量后的函数
            // 后方函数和前方变量只有数据变化的监听绑定关系, 没有值相关的联系
            full_name: function () {
                arr = this.full_name.split(" ");
                this.first_name = arr[0];
                this.last_name = arr[1];
            }
        }
    })
</script>
```

三.条件渲染

```html
<style>
    .wrap {
        width: 300px;
    }
    .box {
        width: 100px;
        height: 100px;
    }
    .red {
        background-color: red;
        float: left;
    }
    .orange {
        background-color: orange;
        float: right;
    }
</style>
<body>
    <div id="app">
        <button @click="rAction">red切换</button>
        <button @click="oAction">orange切换</button>
        <div class="wrap">
            <!-- v-if 值为false时, 不会被渲染   -->
            <!-- 了解 :key由vue控制的属性key值需要唯一标识,因为key的值就是vue对该组件在内存中建立缓存的key -->
            <div class="box red" v-if="r_show" :key="key" ></div>
            <!-- v-show 值为false时, 以display:none被渲染 -->
            <div class="box orange" v-show="o_show"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            r_show: true,
            o_show: true
        },
        methods: {
            rAction: function () {
                this.r_show = !this.r_show;
            },
            oAction: function () {
                this.o_show = !this.o_show;
            }
        }
    })
</script>
```

四.循环渲染

``html
<body>
    <div id="app">
        <ul>
            <li>{{ ls[0] }}</li>
            <li>{{ ls[1] }}</li>
            <li>{{ ls[2] }}</li>
            <li>{{ ls[3] }}</li>
        </ul>
        <ul>
            <li v-for="(ele, index) in ls">{{ ele }} {{ index }}</li>
        </ul>
        <ul>
            <li v-for="(value, key, index) in dic">{{ key }} {{ value }} {{ index }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            ls: ['张三', '李四', '王五', '赵六', '钱七'],
            dic: {
                name: 'Bob',
                age: 88,
                gender: '男'
            }
        },

    })
</script>
```

五.组件初识

```html
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 每个组件均具有自身的模板template，根组件的模板就是挂载点
    new Vue({
        // 根组件一定需要挂在点(否则无法渲染到页面中), 一般情况下, 根组件的template就取挂载点,不需要自定义
        el: "#app",
        data: {
            msg: "信息"
        },
        // template就是组件的html架构
        // 每个组件模板只能拥有一个根标签
        template: "<div><p>锻炼</p></div>"
    })
</script>
```

六局部组件

```html
<body>
    <div id="app">
        <abc></abc>
        <abc></abc>
        <abc></abc>
    </div>
    <hr>
    <div id="main">
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    var localTag = {
        // 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据
        data: function () {
            return {  // 返回值是一个数据字典(一套数据)
                count: 0
            }
        },
        template: "<div @click='fn'>点击{{ count }}次</div>",
        methods: {
            fn: function () {
                this.count += 1;
            }
        }
    }

    // app根组件
    new Vue({
        el: "#app",
        // 注册
        components: {
            'abc': localTag
        }
    })
    // main根组件
    new Vue({
        el: "#main",
        components: {
            // localTag
            'local-tag': localTag
        }
    })
</script>
```

猜你喜欢