VUE 开发——Vue学习（一）

news2024/10/8 14:18:52

一、认识Vue

Vue是一个用于构建用户界面的渐进式框架。构建用户界面，即基于数据渲染出用户看到的页面。

创建Vue实例：

    <div id="app">
        {{ msg }}
    </div>

    <script>
        //一旦引入VueJS核心包，在全局环境中，就有了Vue构造函数
        const app = new Vue({
            //通过el配置选择器，指定Vue管理的是哪个盒子,el挂载对象
            el: "#app",
            //通过data提供数据,给el指定的内容传递数据
            data: {
                msg: 'hello world'
            }
        })
    </script>

插值表达式：{{ 表达式 }}——一种Vue模板语法，使用的数据必须在data中

二、Vue指令

指令：带有v-前缀的特殊标签属性

v-show底层原理：切换CSS的display：none 来控制显示隐藏 —— 频繁切换显示隐藏的场景

v-if 底层原理：根据判断条件控制元素的创建和移除（条件渲染）—— 要么显示，要么隐藏，不频繁切换的场景

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    
    <div id="app">
        <!-- v-html：设置元素的innerHTML，v-html="表达式" -->
        <div v-html="msg"></div>
        <!-- v-show：控制元素显示隐藏 true显示 false隐藏 -->
        <div v-show="flag" class="box">v-show</div>
        <!-- v-if：控制元素显示隐藏（条件渲染）-->
        <div v-if="flag" class="box">v-if</div>
        <p v-if="gender === 1">性别：男</p>
        <p v-else>性别：女</p>
        <!-- v-on：注册事件 添加监听 + 提供处理逻辑  -->
             <!-- v-on:事件名="内联语句" -->
            <button @click="count--">-</button>  
            <span>{{ count }}</span>
            <button v-on:click="count++">+</button>
            <!-- v-on:事件名="methods中的函数名" -->
            <button @click="fn">切换显示隐藏</button>
            <h1 v-show="isShow">hello world</h1>
        <!-- v-bind: 动态设置html的标签属性 src、url、title v-bind:属性名="表达式"-->
        <img v-bind:src="imgUrl" >
        <!-- v-for: 数据循环，多次渲染整个元素 v-for=“（item，index） in 数组” -->
        <div>
            <ul>
                <li v-for="(item,index) in list">
                    {{ item }} - {{ index }}
                </li>
            </ul>
            <!-- v-for中的key key属性=“唯一标识” 给当前的列表项添加唯一标识，便于Vue进行列表项的正确排序复用 -->
        </div>
        <!-- v-model：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容 -->
        <div>
            <!-- 快速获取或设置表单元素的内容 -->
            账号：<input type="text" v-model="username"> <br><br>
            密码：<input type="password"> <br><br>
            <button @click="login">登录</button>
            <button @click="reset">重置</button>
        </div>

    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: `
                    <a href="http://www.baidu.com">
                        百度
                    </a>
                `,
                flag: true,
                gender: 2,
                count: 100,
                isShow: true,
                imgUrl: 'day01/imgs/WechatIMG324.jpg',
                list: ['语文','数学','英语'],
                username: '',
                password: ''
            },
            methods: {
                fn() {
                    this.isShow = !this.isShow
                    console.log('执行了fn')
                },
                login() {
                    console.log(thsi.username,this.password)
                },
                reset() {
                    this.username = ''
                    this.password = ''
                }
            }
        })
    </script>
</body>
</html>

三、指令的修饰符

通过"."指明一些指令后缀，不同后缀封装了不同的处理操作 —— 简化代码

1.按键修饰符

@keyup.enter 键盘回车监听

2.v-model修饰符

v-model.trim 去除首尾空格

v-model.number 转数字

3.事件修饰符

@事件名.stop 阻止冒泡

@事件名.prevent 阻止默认行为

四、v-bind对于样式控制的增强

操作class

语法 :class="对象/数组"

操作style

语法 :style="样式对象"

五、v-model应用于其他表单元素

<div class="radio">
        <!-- 
        1.name：给单选框加上name属性，可以分组 -> 同一组会互相互斥
        2.value： 给单选框加上value属性，用于提交给后台的数据 
        -->
        <input v-model="gender" type="radio" name="gender" value="1">男
        <input v-model="gender" type="radio" name="gender" value="2">女
    </div>

    <script>
        const radio = new Vue({
            el: 'radio',
            data: {
                gender: "2"
            }
        })
    </script>

六、计算属性的完整写法