学习总结2

一、指令初始 和 v-html

1.什么是Vue指令呢？

        指令就是带有v-前缀的特殊属性，不同属性对应不同的功能

        学习不同指令——>解决不同业务场景需求

2.如果需要动态解析标签，可以用那个指令？语法？

v-html="表达式" ——>动态设置元素innerHTML

二、Vue指令 v-show vs v-if

v-show

1.作用：控制元素显示隐藏

2.语法：v-show=“表达式”  表达式值 true显示，false隐藏

3.原理：切换display:none 控制显示隐藏

4.场景：频繁切换显示隐藏的场景

v-if

1.作用：控制元素显示隐藏（条件渲染）

2.语法： v-if=”表达式“    表达式 true显示，false隐藏

3.原理：基于条件判断，是否创建或移除元素节点

4.场景：要么显示，要么隐藏，不频繁切换的场景

三、Vue指令 v-else vs v-else-if

1.作用：辅助v-if进行判断渲染

2.语法：v-else v-else-if="表达式"

3.注意：需要紧挨着v-if一起使用

<div id="app">
    <p v-if="gender==1">性别：男</p>
    <p v-else>性别：女</p>
    <hr>
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >= 70">成绩评定B：奖励周末旅游</p>
    <p v-else-if="score >=60">成绩评定C：奖励零食一包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue .js">
</script>

<script>
const app = new Vue({
    el:'#app',
    data:{
        gender:2,
        score: 95
    }
})
</script>

四、Vue指令 v-on

1.作用：注册时间 = 添加监听 + 提供处理逻辑

2.语法

        ① v-on:事件名=“内联语句”

        ② v-on:事件名="methods中的函数名"

3.简写： @事件名

4.注意： methods函数内的this指向Vue实例

<button v-on:click="count++">按钮</button>

<button @click="count++">按钮</button>

<button @click="fn">-</button>


<script>
const app = new Vue({
    el:'#app',
    data:{
        //提供数据
        isShow:true
    },
    methods:{
        fn(){
            this.isShow != this.isShow;
        }
    }
})
</script>

五、v-on调用传参

<div id="app">
    <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(10)">可乐10元</button>
        <button @click="buy(8)">可乐8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            money:100
        },
        methods:{
            buy(price){
                this.money -= price
            }
        }
})
</script>

六、Vue指令  v-bind

1.作用： 动态的设置html的标签属性 ——>src url title

2.语法：v-bind:属性名=“表达式”

3.注意：简写形式   :属性名=“表达式”

<div id="app>
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
</div>

<script>
const app = new Vue({
    el:'#app',
    data:{
        imgUrl:'./imgs/10-02.png',
        msg:'hello 爱莎'
    }
})

七、图片切换案例
核心思路分析：

①数组存储图片路径  ——> [图片1，图片2，图片3，...]

②准备下标index，数组[下标] ——>  v-bind设置src展示图片 ——>修改下标切换图片

<div id="app">
    <button v-show="index > 0" @click="index--">上一页</button>
    <div>
        <img :src="list[index]" alt="">
    </div>
    <button v-show="index < list.length -1" @click="index++">下一页</button>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            index:0;
            list:[
                './imgs/11-00.gif',
                './imgs/11-01.gif',
                './imgs/11-02.gif',
                './imgs/11-03.gif',
                ]
         }
    })
</script>

八、v-for指令

 1.作用：基于数据循环，多次渲染整个元素 ——> 数组、对象、数字

2.遍历数组语法：

        v-for="(item,index) in 数组"

        item 每一项，Index 下标

        省略index： v-for="item in 数组"

<div id="app">
    <h3>小黑水果店</h3>
    <ul>
        <li v-for="(item,index) in list">
            {{ item }} - {{ index }}
        </li>
    <ul>
    <ul>
        <li v-for="item in list">
            {{ item }}
        </li>
    <ul>
</div>

<script>
const app = new Vue({
    el:'#app',
    data:{
        list:['冬枣','葡萄','柚子']
    }
}

九、图书馆案例
 

<div id="app">
    <h3>小黑的书架</h3>
    <ul>
        <li v-for="(item,index) in booksList" :key="item.id">
            <span>{{ item.name}}</span>
            <span>{{ item.author }}</span>
            //注册点击时间——>通过id进行删除数组中的对应项
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
       

<script>
const app = new Vue({
    el:'#app',
    data:{
        booksList:[
            {id:1,name:'《红楼梦》',author:'曹雪芹'},
            {id:2,name:'《西游记》',author:'吴承恩'},
            {id:3,name:'《水浒传》',author:'施耐庵'},
            {id:4,name:'《三国演义》',author:'罗贯中'}
        ]
    },
    methods:{
        del(id){
            //通过id进行删除数组中的对应项 ——> filter（不会改变原数组）
            //filter:根据条件，保留满足条件的对应项，得到一个新数组
            this.booksList = this.booksList.filter(item=>item.id !== id)
        }
    }
})

</script>

十、v-for中的Key

Key作用:

        给元素添加的唯一标识，便于Vue进行列表项的正确排序复用

注意点：

        1.Key的值只能是字符串或数字类型

        2.Key的值必须具有唯一性

        3.推荐使用id作为Key（唯一），不推荐使用index作为Key（会变化，不对应）

 十一、Vue指令 v-model

1.作用：给表单元素使用，双向数据绑定——>可以快速获取或设置表单元素内容

        ① 数据变化——>视图自动更新

        ② 视图变化——>数据自动更新

2.语法： v-model='变量'

<div id="app">
    //v-model 可以让数据和视图，形成双向数据绑定
    // （1）数据变化，视图自动更新
    // （2）视图变化了，数据自动更新
    // 可以快速获取或设置表单元素的内容
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"><br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
</div>

<script>
const app = new Vue({
    el:'#app',
    data:{
        username:'',
        password:'',
    },
    methods:{
        login(){
            console.log(this.username,this.password)
        },
        reset(){
            this.uername='',
            this.password='',
        }
    }
})
</script>