初识Vue

概念：Vue是用于构建用户界面的渐进式框架

构建用户界面——>创建Vue实例初始化渲染

准备容器
引包
创建Vue实例new Vue()
指定配置项——>渲染数据

    <div id="app">
        <div v-html="msg"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                msg:`
                <a href="https://www.bilibili.com/video/BV1HV4y1a7n4?p=8&spm_id_from=pageDriver&vd_source=ac77daa3b045a582b2440a69b9c0a04f">
                    B站</a>
                `    
            }
        })
    </script>

注： new Vue()中V要大写

插值表达式#####

作用：利用表达式进行插值，渲染到页面中

语法：{{表达式}}

vue指令

vue会根据不同的指令，针对标签实现不同的功能指令：带有V-前缀的特殊标签属性

v-show和v-if

v-show 作用：控制元素显示隐藏语法：v-show=“表达式” 表达式值true显示，false隐藏

v-if 作用：控制元素显示隐藏（条件渲染）语法：v-if=“表达式” 表达式值true显示，false隐藏

v-else

v-if和v-else需要一起使用，不能单独使用v-else 例

 <div id="app">
        <p v-if="gender===1">男 </p>
        <p v-else>女</p>
        <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="./vue.js"></script>
    <script>
        const app= new Vue({
            el:'#app',
            data:{
                gender:2,
                score:80
            }
        })
    </script>

v-on

作用：注册事件=添加监听+提供处理逻辑语法： 1.v-on：事件名=“内联语句”

2.v-on:事件名=“methods中的函数名”
"v-on:"="@"


//使用内联语句时
<div id="app">
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <button @click="count++">+</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                count:100
            }
        })
    </script>

//methods中的函数名
 <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马承修院</h1>
</div>
<script src="./vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
        isShow:true
        },
        methods:{
            fn(){
             this.isShow=!this.isShow 
                
            }
        }
    })
</script>

//vue 指令v-on 调用传参
<div id="app">
    <div class="box ">
        <h3>小黑自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(20)">咖啡20元</button>
    </div>
    <p >银行卡余额：{{money}}元 </p>
</div>
<script src="./vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
     money:100
        },
        methods:{
            buy(price){
          this.money-=price
                
            }
        }
    })
</script>

v-bind

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

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

<div id="app">
<img :src="imgUrl" alt="">
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue ({
        el:'#app',
        data:{
            imgUrl:`./dhghfs`
        }
    })
</script>

v-bind 对于样式的增强 class 语法： :class="对象/数组"

<div id="app">
    <div class="box" :class="{pink:true,big:flase}"></div>
    //将颜色变成粉色,true则实现，flase则移除
    //一个类名来回切换
    <div class="box" :class="['pink','big ']"></div>
    //数组写法则什么都不加
    //批量添加或删除
</div> -->

<!-- 案例 -->
<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key(id) @click="indexIndex=active">
            <a :class="(active:index===activeIndex)"   class="active" >{{item.name}}</a>
        </li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            activeIndex:0,//记录高亮
            list:[
                {id:1,name:'京东秒杀'},
                {id:2,name:'每日特价'},
                {id:3,name:'品类秒杀'}

            ]

        }
    })
</script>

v-bind操作style
语法：:style="样式对象"
<div class="box" :style="{css属性名1:css属性值,css属性名1:css属性值}"></div>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<div id="app">
<div class="box" :style="{ width:'400px',height:'400px','background-color':'green'}"></div>
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

v-for

1.作用：基于数据循环，多次渲染整个元素

2.遍历数组语法：v-for=“（item，index） in 数组”

<div id="app">
<h3>小黑水果点</h3>
<ul>
 <li v-for="(item,index) in list">
    {{item}}
 </li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            list:['西瓜','苹果','鸭梨','榴莲']
        }
    })
</script>

v-for 中的key

注意：

key的值只能是字符串或数字类型
key的值必须具有唯一性
推荐使用id作为key（唯一），不推荐index作为key(会变化，不对应)

v-model

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

语法：v-model=变量

    <div id="app">
        账户：<input type="text" v-model="username"><br><br>
        密码：<input type="password" v-model="password"><br><br>
        <button @click="login">登录</button>
        <button @click="render">重置</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app =new Vue({
            el:'#app',
            data:{
                username:'',
                password:''

            },
            methods:{
                login(){
                    console.log(this.username,this.password)

                },
                render (){
                   this.username=''
                   this.password='' 
                }
            }
        })

应用于其他表单元素

输入框: input:text -> value
文本域: textarea -> value
复选框: input:checkbox -> checked
单选框: input:radio -> checked
下拉菜单: select -> value

初始Vue和关于v-简介