Vue框架基本属性

Vue框架基本属性

基本框架

<script src="vue.js"></script>

   new Vue({
    el :"#app", //标签属性id
    data(){
        return {
            //需要返回的属性值等
}
}
})

• v-model: 在表单元素上创建双向数据绑定

<input name="username" v-model="username">
    {{username}}

• v-bind : 为HTML标签绑定属性值，如设置href，css样式等。

<a v-bind:href="url">百度一下</a>
<a:href="url"> 百度一下 </a> //v-bind可以省略

• v-on: 为HTML标签绑定事件

<input type="button" value="按钮" v-on:click="show()">
<input type="button" value="按钮" @click="show()">

new Vue({
    el:"#app",
    methods:{
        show(){
            alert("被点击了");
        }
    }
})

• v-if:
• v-else-if:
• v-else: 条件性的渲染某元素，判定为true时渲染，否则不渲染

<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else>div3 </div>

• v-show: 根据条件展示某元素，区别在于切换的时display属性的值

<div v-show="count==3">show v-show</div>

• v-for: 列表渲染，遍历容器的元素或者对象的属性

<div v-for="addr in addrs">
    {{adds}}<br>
</div>
* 加索引
<div v-for="(addr,i) in addrs">
<!-- i表示索引，从0开始-->
    {{i+1}}:{{addr}}<br>
</div>

Vue的生命周期

• 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestory	销毁前
destoryed	销毁后