Vue學習之渲染

時間 2019-11-20

標籤 vue 學習渲染简体版

原文原文鏈接

一.計算命令computedhtml

```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>
```

三.條件渲染vue

```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>
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。