Vue 常用选项简单理解

  1. 数据选项- data

<script>
export default {
    data() {
        return {
            msg:'a test'
        }
    },
}
</script>
  1. 方法 - methods

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

等同于javascript

var init = function(){
    alert('Hello world')
}
  1. 生命周期 - mounted 组件初始化时执行

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

mounted() {
    this.init()
}
  1. 生命周期 - beforeDestroy 组件销毁时执行

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

beforeDestroy(){
    alert('确定退出?')
}
  1. 监听 - 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>
  1. 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>
  1. 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>
  1. 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>
  1. 监听事件

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

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

<script>
export default {
    methods:{
        btn(){
            console.log('dom 被点击了');
        }
    }
}
</script>
  1. v-model 双向绑定值 ,向input输入值,data里的inpval同步改变,或改变inpval的值,input里的内容也会同步改变

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

<script>
export default {
    data() {
        return {
            inpVal:'我是输入框的值'
        }
    }
}
</script>
  1. 样式类绑定

例如 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>
  1. 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>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值