Vue 常用选项简单理解

1. 数据选项- data

<script>
export default {
    data() {
        return {
            msg:'a test'
        }
    },
}
</script>

2. 方法 - methods

methods:{
    init(){
        alert('Hello world')
    }
}

等同于javascript

var init = function(){
    alert('Hello world')
}

3. 生命周期 - mounted 组件初始化时执行

例如组件初始化时 调用 methods 里的init方法

mounted() {
    this.init()
}

4. 生命周期 - beforeDestroy 组件销毁时执行

例如组件关闭时 弹出确认框

beforeDestroy(){
    alert('确定退出？')
}

5. 监听 - watch

例如 某事件改变data 里 msg 的数据时 进行判断并弹框显示信息

watch:{
    // data里定义的 msg
    // oldVal 改变前的数据
    // newVal 新的数据
    msg(oldVal,newVal){
        if (newVal == 'new test') {
            alert('data 里的 msg 被更新了')
        }
    }
}

Vue 模板语言

1. 插值表达式

例如 使用data里定义的msg 在模板上使用，经过vue处理，展示为真实Dom元素显示在网页上

<template>
    <div class="box">
        {{msg}}
    </div>
</template>

2. v-show

根据data里的false 或 true 来选择此盒子是否展示

例如 p_show:false 则此p标签将不会展示

<template>
    <div class="dom">
        <p v-show="p_show"></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            p_show:false
        }
    },
}
</script>

3. v-if 条件表达式 类似与v-shwo，但v-show为切换元素的display属性，不造成元素的重新渲染,v-if则是直接删除元素,导致元素重新渲染,项目中根据实际需求来选择适合的指令

例如 当data里的数据为2时 模板上对应的v-else-if则会渲染 其他则不渲染

<template>
    <div class="dom">
        <p v-if     ="p_if == 1"></p>        
        <p v-else-if="p_if == 2"></p>        
        <p v-else> </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            p_if:2
        }
    },
}
</script>

4. v-bind 简写为引文冒号 :

例如 给元素绑定多个值

<template>
    <div class="dom" v-bind="bindTest">

    </div>
</template>

<script>
export default {
    data() {
        return {
            bindTest:[{
                name:'张三',
                age : 20
            }]
        }
    },
}
</script>

或者 指定一个路径

<template>
    <div class="dom">
        <a :href="url"></a>
    </div>
</template>

<script>
export default {
    data() {
        return {
            url:'www.baidu.com'
        }
    },
}
</script>

5. 监听事件

例如监听元素的点击 ，此点击事件可简写为 @click="btn"

<template>
    <div class="dom" v-on:click="btn">
        click
    </div>
</template>

<script>
export default {
    methods:{
        btn(){
            console.log('dom 被点击了');
        }
    }
}
</script>

6. v-model 双向绑定值 ，向input输入值，data里的inpval同步改变,或改变inpval的值,input里的内容也会同步改变

<template>
    <div class="dom">
        <input v-model="inpVal">
    </div>
</template>

<script>
export default {
    data() {
        return {
            inpVal:'我是输入框的值'
        }
    }
}
</script>

7. 样式类绑定

例如 domStyle为样式属性 isDomStyle为是否添加此样式

<style>
    .domStyle{
        color: red;
    }
</style>

<template>
    <div class="dom" :class="{domStyle:isDomStyle}">
        111
    </div>
</template>

<script>
export default {
    data() {
        return {
            inpVal:'我是输入框的值',
            isDomStyle:true
        }
    }
}
</script>

8. v-for 列表渲染

例如 item为每一内容，使用v-for时 一般要指定key

<template>
    <div class="dom">
        <div v-for="(item,index) in list" :key="index">
            {{item}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list:['张三','李四','大帅宇']
        }
    }
}
</script>