Vue學習之小知識點筆記

vue工程需要進行npm install

需要生產node_modules,下載完相關的依賴

vue文件中的標籤

一般一個vue頁面包括template、script，看工程初始化出來的例子：

template標籤一般是寫界面相關的如div之類的，script是數據邏輯層。除了上面兩個標籤，我看還有style標籤，寫樣式

數據與數據監聽

<template>
    <div id="app">
        <p style="font-size:25px;">計數器: {{ counter }}</p>
        <button @click="counter++" style="font-size:25px;">點我</button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                counter: 1
            }
        }, watch: {
            counter: function (newValue, oldValue) {
                alert('計數器值的變化 :' + oldValue + ' 變爲 ' + newValue + '!');
            }
        }
    }
</script>

<style scoped>

</style>

綁定樣式

<template>
    <div v-bind:class="{ active: isActive }"></div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                isActive: true
            }
        }
    }
</script>
<style>
    .active {
        width: 100px;
        height: 100px;
        background: green;
    }
</style>

計算屬性

計算屬性就是當其依賴屬性的值發生變化時這個屬性的值會自動更新，與之相關的dom部分也會自動同步更新

<template>
    <div v-bind:class="classObject"></div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                isActive: true,
                error: {
                    value: true,
                    type: 'fatal'
                }
            }
        }, computed: {
            classObject: function () {
                return {
                    active: this.isActive,
                    'text-danger': this.error.value && this.error.type === 'fatal',
            }
            }
        }
    }
</script>
<style>
    .active {
        width: 100px;
        height: 100px;
        background: green;
    }

    .text-danger {
        background: red;
        width: 100px;
        height: 100px;
    }
</style>

自定義方法

<template>
    <div id="app">
        <button @click="clickBt">one click</button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        methods: {
            clickBt() {
               alert("button clicked" )
            }

        }

    }
</script>

表單

<template>
    <div id="app">
        <p>input 元素：</p>
        <input v-model="message" placeholder="編輯我……">
        <p>消息是: {{ message }}</p>
        <p>textarea 元素：</p>
        <p style="white-space: pre">{{ message2 }}</p>
        <textarea v-model="message2" placeholder="多行文本輸入……" class="textareaStyle"></textarea>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                message: 'bifan-wei',
                message2: '表單message2'
            }
        },
        methods: {

        }

    }
</script>
<style>
    .textareaStyle{
        width: 500px;
        height: 300px;
        background-color: #ededed;
    }
</style>

複選框

<template>
    <div id="app">
        <p>單個複選框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>

        <p>多個複選框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>選擇的值爲: {{ checkedNames }}</span>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                checked : false,
                checkedNames: []
            }
        }

    }
</script>
```
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200329152800958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ2MTQwMzg=,size_16,color_FFFFFF,t_70)