Vue学习日记——Day 1

最新推荐文章于 2024-09-16 15:56:04 发布

林钟雪

最新推荐文章于 2024-09-16 15:56:04 发布

阅读量490

点赞数 12

分类专栏： Vue 文章标签： vue.js 学习前端笔记

本文链接：https://blog.csdn.net/Lin_Zhong_/article/details/136626856

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue进行前端开发，包括准备Vue容器，引入官方包，创建Vue实例并配置数据，使用插值表达式、Vue指令（如v-show、v-if、v-on等），以及计算属性和Watch侦听器的使用方法。

摘要由CSDN通过智能技术生成

一、基本流程

1、准备容器(将使用Vue的代码块)
2、引入包(官方包)
3、创建实例
4、添加配置项

示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,     initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1、准备容器 -->
    <div id="app">
        <!-- 大括号中是data提供的数据 -->
        <div>{{ msg }}</div>
        {{count}}
        
    </div>
    <!-- 2、引入包 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 3、创建实例 -->
    <script>
        const app = new Vue({
            // 4、添加配置项
            // 通过el配置选择器，指定Vue管理的是哪个盒子
            el:"#app",
            // 通过data提供数据
            data:{
                msg:"Hello Vue!",
                count:666,
                //这里的msg和count都是标记
            },
        })
    </script>
</body>
</html>

二、插值表达式

1、插值表达式
    {{ 表达式 }}
//作用：利用表达式进行插值，渲染到页面中
    如：
        {{title}}
        {{nickname.toUpperCase()}}        //.toUpperCase()的意思是将前面的值全部大写
        {{age >= 18 ? '成年' : '未成年'}}  //三目运算符……
        {{obj.name}}
    注：
        1、{{}}中不支持表达式，
            如：{{if}}*不正确
        2、不能在标签中使用{{}}插值

三、Vue指令

1、概述

1、Vue会根据不同的指令，针对标签实现不同的功能
    指令：带有 "v-" 前缀的特殊标签属性
    如：
        <div v-html="str"></div>
        //v-html
        //作用：设置元素的innerHTML
        //语法：v-html="表达式"
    示例：
            <div id="app">
                <div v-html="msg"></div>
            </div>
            <script>
                const app = new Vue({
                    el:"#app",
                    data:{
                        msg:`<a href="https://www.baidu.com/">百度</a>`
                    },
                })
            </script>

2、更多指令

2.1、v-show和v-if

v-show：控制元素显示隐藏
//v-show="表达式",true显示，false隐藏
//原理：切换display:none控制显示隐藏

v-if：控制元素显示隐藏
//v-if="表达式",true显示，false隐藏
//原理：根据条件创建或移除

2.2、v-else,v-else-if

//需要配合v-if使用
    示例：
        <div id="app">
            <div v-if="gender===1">性别：男</div>
            <div v-else>性别：女</div>
        </div>
    
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    gender: 2,
                },
            })
        </script>

2.3、v-on

    //注册事件
        2.3.1、内嵌语句
        //语法：
            v-on:事件名 = "内嵌语句"
            //click：点击
            //keyup：键盘
        示例：
            <div id="app">
                <button v-on:click="count--">-</button>
                <span>{{ count }}</span>
                <button v-on:click="count++">+</button>
            </div>
        或：
            <div id="app">
                <button @click="count--">-</button>
                <span>{{ count }}</span>
                <button @click="count++">+</button>
            </div>
        //简写
        2.3.2、函数调用
        //语法
            v-on="methods中的函数名"
            示例：
                <div id="app">
                    <button @click="fn">切换隐藏显示</button>
                    <span v-show="isShow">Vue</span>
                </div>
            
                <script>
                    const app = new Vue({
                        el:"#app",
                        data:{
                            isShow:true
                        },
                        methods:{
                            fn(){
                                this.isShow = !this.isShow
                            }
                        }
                    })
                </script>
        2.3.3、传参
        示例：
            <div id="app">
                <div class="box">
                    <h3>售货机</h3>
                    <button v-on:click="buy(5)">可乐五元</button>
                    <button v-on:click="buy(10)">咖啡十元</button>
                    <button v-on:click="buy(8)">牛奶八元</button>
                </div>
                <h2>银行卡余额：{{money}}元</h2>
            </div>
        
            <script>
                const app = new Vue({
                    el:"#app",
                    data:{
                        money:100
                    },
                    methods:{
                        buy(price){
                            if(this.money-price>=0)
                                this.money -= price;
                        }
                    }
                })
            </script>

2.4、v-bind

1、作用：
    动态的设置标签属性
2、语法：
    v-bind:属性名="表达式"
    示例：
        <img v-bind:src="imgsrc" alt="">

2.5、v-for

1、作用：
    基于数据循环，多次渲染整个元素
2、语法：
    v-for = "(item, index) in Array"
    //item：当前项
    //index：下标
3、key
    作用：为列表的每一项添加唯一标识，便于列表进行排列
    语法：:key属性="唯一标识"
    //若不加key，v-for会尝试原地修改元素
    v-for = "(item,index) in Array" :key="唯一值"

2.6、v-model

1、作用：
    为表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容
2、语法：
    <input type="text" v-model="变量">
    //可以实时获取表单返回的元素

3、指令修饰符

1、作用：
    通过"."指明一些指令后缀，不同后缀封装了不同的处理操作
    如：
        @keyup.enter ——> 键盘回车监听
        @click.stop  ——> 阻止冒泡

4、bind扩展

1、操作class
    语法：
        :class="对象/数组"
    示例：
        <div class="box" :class="{类名1:布尔值, 类名2：布尔值}">
        //布尔值为true时，加上类，flase时，去掉类
        <div class="box" :class="{类名1, 类名2, 类名3}">
2、操作style
    语法：
        :style="样式对象"
    示例:
        :style="{属性:'属性值'}"

四、计算属性

1、概述

1、概念：
    基于现有的数据，计算出来的新属性，依赖的数据变化，自动重新计算
2、语法：
        声明在computed配置中，一个计算属性对应一个函数
        使用起来和普通属性一样{{计算属性名}}
    示例：
        computed:{
            totalCount(){
                let total = this.list.reduce((sum,item) => sum + item,0)
                return total;
                
                //reduce:累加器
                //reduce((上一次值,当前值) => 语句 , 初始值)
            }        
        }
3、优势：计算属性一旦计算出结果，就会立即缓存，下次直接读取缓存，性能特别高

2、完整写法

1、计算属性默认写法只能读取，不能修改，如果需要修改，便需要写完整写法

2、完整写法
    computed:{
        计算属性名:{
            get(){
                代码体(计算逻辑)
                return 结果            
            }, 
            set(修改的值){
                代码体(修改逻辑)         
            }    
        }    
    }
    示例：
        fullName:{
            get(){
                return this.firstName + this.lastName            
            },
            set(value){
                                            
            }
        }

五、Watch侦听器

1、作用：监听数据变化，执行一些业务逻辑或异步操作
2、语法：
    2.1、简单写法 ——>简单类型数据，直接监视
        data:{
            words:'苹果',
            obj:{
                words:"苹果"            
            }        
        },
        
        watch:{
            words(newValue,oldValue){
                //当监听对象变化时会触发 
                //会返回一个新值和一个老值           
            },
            'obj.words'(newValue,oldValue){
                //当监听对象变化时会触发            
            }

六、Watch完整写法

1、添加额外项
    deep：true（对复杂类型深度监视）
    immediate：true（初始化立刻执行一次handler方法）
2、示例
    数据属性名：{
        deep:true,//深度监视
        immediate：true,//是否立即执行一次
        handler(newValue){
                    
        }
    }