Vue复习-第一天

Vue复习

第一天复习内容如下

1. 双中括号引用vue对象中的data的数据{{}}
2. Vue中的v-text or v-html
3. vue中的v-on绑定事件和 @绑定事件
4. v-bind和:
5. vue中的 v-if和v-show
6. vue中的mesthods对象其中定义方法页面中可以引用
7. 数组中的 push方法和 splict方法
8. vue中的双向绑定 v-model 只能绑定在表单

一、双中括号引用vue对象中的data的数据{{}}

<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            message:"相生永远的神"
        }
    })

二、 Vue中的v-text or v-html

v-text跟上面的{{}}是一样的引用不过会替换其中标签的值

例子： <p v-text="xs"></p>

v-html跟v-text大同小异不过就是其中可以添加html语义

例子：<p v-html="<a href="#" />"></p>

三、 vue中的v-on绑定事件和 @绑定事件

其中的绑定方式:v-on绑定事件跟@绑定事件几乎相同

<div id="app">
<!--    on-->
    <h2 v-on:click="opp">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script !src="">
    new Vue({
        el: "#app",
        data:{
            message:"西红柿炒蛋"
        },
        methods:{
            opp(){
                this.message+="好好吃"
            }
        }
    })
</script>

四、v-bind和 :

方法类似预值，如果绑定到vue中data的数据，修改其中的数据可以实时更换数据。

<div id="app">
    <img v-bind:src="IMGSRC" alt="" style="width: 200px;height: 200px">
    <img :src="IMGSRC2" alt="" style="width: 200px;height: 200px" :class="actives?'xsyyds':''">
    <img :src="IMGSRC2" alt="" style="width: 200px;height: 200px" :class="{xsyyds:actives}">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script !src="">
    new Vue({
        el: "#app",
        data:{
            IMGSRC:"img/05.jpg",
            IMGSRC2:"img/06.jpg",
            actives:true
        }
    })
</script>

五、 vue中的 v-if和v-show

v-if和v-show使用来判断该便签是否可以显示在页面
区别是v-if如何使false该设置的标签就会消失 而v-show 会显示display:none

<p v-if=""></p>
<p v-show=""><p>

六，vue中的mesthods对象其中定义方法页面中可以引用

就是在队形中写个methods属性其中可以写方法。

七、数组中的 push方法和 splice方法shift

push从最后的地方添加

add(){
              this.jieshao.push({
                    name:"永远的神"
                })
            },

shift方法从最后面删除数据

remove(){
                this.jieshao.shift();
            }

splice(index,flag) index代表索引 flag代表删除几个

deleteList(index){
                //删除索引为index，删除一个
                this.listop.splice(index,1)
            },

八、vue中的双向绑定 v-model 只能绑定在表单

v-model只能用在表单中,输入值的时候会动态更改data中的vue数据