AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue基础学习笔记（下）

2023-10-11 35
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue基础学习笔记

二十一.计算属性的复杂操作

<!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>
<div id='app'>
    <h2>总价:{{totalPrice}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            books:   [
                {id:110,name:'Unix',price:119},
                {id:111,name:'代码大全',price:201},
                {id:112,name:'深入理解计算机原理',price:52}
            ]
        },
        //有缓存，方法没有
        computed: {
            totalPrice:function(){
                let result = 0;
                for(let i =0;i<this.books.length;i++){
                    result += this.books[i].price;
                }
                return result;
            }
        }
    })
</script>
</body>
</html>

二十二.计算属性getter、setter

<!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>
<div id='app'>
    {{message}}
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            firstname:   'a',
            lastname:   'b',
        },
        computed: {
            // fullName:function(){
            //     return this.firstname + this.lastname;
            // }
            //属性fullName，一般只实现get方法，所以一般可以简写为上面的写法
            fullName :{
                set:function(newValue){
                    console.log(newValue);
                    const names = newValue.split(" ");
                    this.firstname = names[0];
                    this.lastname = names[1];
                },
                get:function(){
                    return this.firstname + this.lastname;
                }
            }
        }
    })
</script>
</body>
</html>

二十三.计算属性computed和methods的对比

  • 计算属性：一次计算，多次使用，有缓存
  • methods：多次计算，多次使用，无缓存

二十四.es6语法

24.1 let/var

注：let有闭包，var没有，推荐使用let

<!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>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script src='../js/vue.js'></script>
<script>
    //ES5之前因为 if、for没有块级作用域的概念，所以很多时候需要借鉴function的作用域
    //1.变量作用域：变量在什么范围内是可用
    {
        var name = 'why';
        console.log(name);
    }
    console.log(name);//var没有块级作用域
    //2.没有块级作用域引起的问题 if
    var func;
    if(true){
        var name = 'why';
        func = function(){
            console.log(name);
        }
        //func();
    }
    name = 'modify'; 
    func();
    //3.没有块级作用域引起的问题 for
    //为什么闭包可以解决问题：函数是一个作用域
    // var btns = document.getElementsByTagName('button')
    // for(var i = 0;i<btns.length;i++){
    //     (function(i){ //0
    //         btns[i].addEventListener('click',function(){
    //             console.log('第' + i + '个按钮被点击');
    //         })
    //     })(i)
    // }
    // 4.es6
    const btns = document.getElementsByTagName('button')
    for(let i = 0;i<btns.length;i++){
        btns[i].addEventListener('click',function(){
                console.log('第' + i + '个按钮被点击');
        })
    }
</script>
</body>
</html>

24.2 const

24.3 对象字面量增强

二十五.v-on

<!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>
<div id='app'>
    <h2>{{counter}}</h2>
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <button @click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            counter:   0
        },
        methods:{
            add(){
                this.counter++;
            },
            sub(){
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

语法糖：@click

二十六.v-on参数

<!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>
<div id='app'>
    <!-- 不需要参数的时候，不需要括号 -->
    <button @click="btn1Click">按钮1</button>
    <button @click="btn1Click">按钮1</button>
    <!-- 需要参数的时候，默认传入event参数，不需要括号 -->
    <button @click="btn2Click">按钮2</button>
    <button @click="btn2Click">按钮2</button>
    <!-- 需要参数的时候，并且需要event参数，-->
    <button @click="btn3Click(123,$event)">按钮3</button>
    <button @click="btn3Click">按钮3</button>
    <!-- 需要参数的时候，并且需要event参数，-->
    <button @click="btn3Click(123,$event)">按钮3</button>
    <button @click="btn3Click">按钮3</button>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },methods: {
            btn1Click(){
                console.log(123);
            },
            btn2Click(event){
                console.log(event);
            },
            btn3Click(first,event){
                console.log(first);
                console.log(event);
            }
        }
    })
</script>
</body>
</html>

二十七.v-on修饰符

<!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>
<div id='app'>
    <!-- 1.stop修饰符的使用(停止冒泡) -->
    <div @click="divClick">
        <button @click.stop='btnClick'>
            按钮
        </button>
    </div>
    <br>
    <!-- 2.prevent修饰符的使用(阻止默认行为) -->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
    <!-- 3.监听某个键盘的键帽 -->
    <input type="text" @keyup.enter="keyUp">
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        methods: {
            btnClick(){
                console.log("btnClick");
            },
            divClick(){
                console.log("divClick");
            },
            submitClick(){
                console.log("submitClick");
            },
            keyUp(){
                console.log("keyup");
            }
        }
    })
</script>
</body>
</html>

二十八.v-if、v-else-if、v-else

二十九.案例（切换）

<!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>
<div id='app'>
    <span v-if="isShow">
        <label for="" >邮箱登录：</label>
        <input type="text">
    </span>
    <span v-else>
        <label for="" >账号登录：</label>
        <input type="text">
    </span>
    <button @click="toggleButton">切换</button>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            isShow: true
        },
        methods: {
            toggleButton(){
                this.isShow = !this.isShow;
            } 
        }
    })
</script>
</body>
</html>

三十.input复用(问题)

注：上面的切换，会有input复用的问题

三十一.v-show

三十二.v-for

<!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>
<div id='app'>
    <ul>
        <li v-for="item in movies">
            {{item}}
        </li>
        --------------
        <li v-for="(item,index) in movies">
           {{index}} {{item}}
        </li>
        -------------
        <li v-for="(value,key,index) in info">
            {{index}}-{{key}}-{{value}}
        </li>
    </ul>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            movies:['a','b','c'],
            info:{
                name:'123',
                age:18,
                height:180
            }
        }
    })
</script>
</body>
</html>

三十三.组件的key属性

三十四.数组方法

三十五.图书购物车

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color:#f7f7f7;
            color:#5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div id='app'>
    <div  v-if="list.length">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td >{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.data}}</td>
                    <td>{{item.prize | showPrice}}</td>
                    <td>
                        <button @click="sub(index)">-</button>
                        {{item.count}}
                        <button @click="add(index)">+</button>
                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            总价：{{totalPrice | showPrice}}
        </div>
    </div>
    <div v-else>
        购物车为空
    </div>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            list:[
                {
                    id:1,
                    name:"a",
                    data:"2006-10",
                    prize:88.5,
                    count:1
                },
                {
                    id:2,
                    name:"a",
                    data:"2007-10",
                    prize:88.5,
                    count:1
                },
                {
                    id:3,
                    name:"a",
                    data:"2008-10",
                    prize:88.555,
                    count:1
                },
                {
                    id:4,
                    name:"a",
                    data:"2009-10",
                    prize:48.00,
                    count:1
                }
            ]
        },computed: {
            totalPrice(){
                let total = 0
                for(let i =0;i<this.list.length;i++){
                    let item = this.list[i];
                    total += item.prize * item.count;
                }
                return total;
            }
        },methods: {
            sub(index){
                this.list[index].count--;
            },
            add(index){
                this.list[index].count++;
            },
            handleRemove(index){
                this.list.splice(index,1);
            }
        },filters:{//过滤器
            showPrice(prize){
                return "￥" + prize.toFixed(2); 
            }
        }
    })
</script>
</body>
</html>

三十六.v-model

<!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>
<div id='app'>
    <!-- <input type="text" v-model="message"> -->
    <!-- 等价 -->
    <!-- <h2>{{message}}</h2>
    <input type="text" :value = "message" v-on:input="valueChange"> -->
    <!-- 等价2 -->
    <h2>{{message}}</h2>
    <input type="text" :value = "message" v-on:input="message = $event.target.value">
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },methods:{
            valueChange(event){
                console.log('---');
                this.message = event.target.value;
            }
        }
    })
</script>
</body>
</html>

三十七.v-model结合radio

<!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>
<div id='app'>
    <label for="">
        <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="">
        <input type="radio" id="womale" name="sex" value ="女" v-model="sex">女
    </label>
    <h2>您选择的性别是:{{sex}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            sex:    '男'
        }
    })
</script>
</body>
</html>

三十八.v-model结合checkbox

<!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>
<div id='app'>
    <!-- checkbox单选框 -->
    <!-- label的作用就是让你选择文字的时候选上 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="agree">同意协议
    </label>
    <h2>您的选择:{{agree}}</h2>
    <button :disabled="!agree">下一步</button>
    <!-- checkbox多选框 -->
    <input type="checkbox" v-model="hobbies" value="篮球">篮球
    <input type="checkbox" v-model="hobbies" value="足球">足球
    <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
    <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            agree:  false,
            hobbies:    []
        }
    })
</script>
</body>
</html>

三十九.v-model结合select

<!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>
<div id='app'>
    <!-- 选择一个 -->
    <select name="" id="" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
        <option value="梨">梨</option>
        <option value="西瓜">西瓜</option>
    </select>
    <h2>
        {{fruit}}
    </h2>
     <!-- 选择多个 -->
     <select name="" id="" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
        <option value="梨">梨</option>
        <option value="西瓜">西瓜</option>
    </select>
    <h2>
        {{fruits}}
    </h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            fruit:  '苹果',
            fruits: []
        }
    })
</script>
</body>
</html>

四十.值绑定

<!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>
<div id='app'>
    <!-- checkbox单选框 -->
    <!-- label的作用就是让你选择文字的时候选上 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="agree">同意协议
    </label>
    <h2>您的选择:{{agree}}</h2>
    <button :disabled="!agree">下一步</button>
    <!-- checkbox多选框 -->
    <!-- <input type="checkbox" v-model="hobbies" value="篮球">篮球
    <input type="checkbox" v-model="hobbies" value="足球">足球
    <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球 -->
    <label for="" v-for="item in originHobbies">
        <input type="checkbox" v-model="hobbies" :value="item">{{item}}
    </label>
    <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            agree:  false,
            hobbies:    [],
            originHobbies :['篮球','足球','羽毛球']
        }
    })
</script>
</body>
</html>

四十一.修饰符

<!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>
<div id='app'>
    <!-- 1.修饰符:lazy -->
    <!-- 失去焦点，防抖 -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>
    <!-- 2.number -->
    <input type="text" v-model.number="age">
    <h2>{{typeof(age)}}</h2>
    <!-- 3.trim -->
    <input type="text" v-model.trim="name">
    <h2>{{name}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            age:    0,
        }
    })
</script>
</body>
</html>

参考视频：

https://www.bilibili.com/video/BV15741177Eh?p=44

文章标签：
JavaScript
缓存
关键词：
vue学习笔记VUE.js
学习笔记VUE.js
VUE.js学习笔记
宋wz
目录
相关文章
游客zi3qmblbcdexu
|
3天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
15 6
游客zi3qmblbcdexu
|
3天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
16 5
大树营养快线
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
40 4
dufadayang
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽，你可以更好地组织和定制组件的模板结构，使组件更具灵活性和可复用性。同时，具名插槽也有助于提高代码的可读性和可维护性。
dufadayang
13 2
dufadayang
|
8天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性，使你能够根据具体需求在组件中插入不同的内容，同时保持组件的结构和样式的一致性。
dufadayang
12 2
我是快乐的嘟嘟
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术，它允许将不同的微前端模块组合在一起，形成一个统一的应用。在 vite+vue 项目中，使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍，相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦，包括安装、配置和使用等方面。在实际开发中，你可以根据自己的需求和项目的特点，灵活地使用模块联邦，提高项目的可维护性和扩展性。
我是快乐的嘟嘟
23 1
大树营养快线
|
9天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素，包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整，可以最大限度地发挥 Tree shaking 的优势，为 Vue 项目带来更好的性能和用户体验。
大树营养快线
13 2
大树营养快线
|
9天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景，可以根据项目的需求和架构选择合适的方法来实现模块的异步加载，以提高应用的性能和用户体验
大树营养快线
15 1
大树营养快线
|
9天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素，通过仔细分析、排查和优化，逐步提高 Tree shaking 的效果，为项目带来更好的性能和用户体验。同时，持续关注和学习相关技术的发展，不断探索新的解决方案，以适应不断变化的项目需求。
大树营养快线
20 1
dufadayang
|
10天前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值，可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善，其应用场景还将不断拓展和深化
dufadayang
25 2