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)