vue学习笔记

今日内容概要

style和class
条件渲染
列表渲染
双向数据绑定
事件处理

今日内容详细

style和class

数据的绑定：

语法
:属性名=js变量/js语法

:class='js变量、字符串、js数组'
class：三目运算符、数组、对象{red: true}

:style='js变量、字符串、js数组'
style：三目运算符、数组[{backgreound: 'red'},]、对象{background: 'red'}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .red{
            background-color: aquamarine;
        }

        .size{
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>class的使用</h1>
    <div :class="classObj">
        我是class的div
    </div>

    <h1>style的使用</h1>
    <!-- <div style="background-color: aquamarine;font-size: 50px">-->
    <div :style="styleObj">
        我是style的div
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            // class的字符串用法
            classStr: 'red size',
            // class的数组写法，因为类本身可以放多个，用数组最合适
            classList:['red', 'size'],
            // class的对象用法
            classObj:{red:true, size:true},

            // style的字符串写法，以后不好改动
            styleStr: 'background-color: red;font-size: 50px',
            // style的数组写法
            // styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
            // 样式如果是多个单词用 - 链接的形式可以写成驼峰
            styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
            // style的对象写法,用的最多
            styleObj:{backgroundColor: 'blue', fontSize: '60px'}
        },
    })
</script>
</html>

条件渲染

# 写在标签上，控制标签的显示与不显示
v-if='布尔值/运算完是布尔值'
v-else-if='布尔值/运算完是布尔值'
v-else

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>条件渲染</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=70 && score<90">良好</div>
    <div v-else-if="score>=60 && score<70">及格</div>
    <div v-else>不及格</div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            score: 10
        },
    })
</script>
</html>

列表渲染

v-for：放在标签上，可以循坏显示多个此标签

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .top{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 class="text-center">控制购物车商品的显示</h1>
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 30px">
                    <button @click="handleClick" class="btn btn-info">加载购物车</button>
                </div>
                <div v-if="goodList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    购物车空空如也
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            goodList:[],
        },
        methods:{
            handleClick(){
                this.goodList =
                    // 假设去后端加载的数据
                    [{id: 1, name: '小汽车', price: '29999元', count: 1},
                    {id: 2, name: '钢笔', price: '9元', count: 2},
                    {id: 3, name: '铅笔', price: '4元', count: 10},
                    {id: 4, name: '苹果', price: '2元', count: 3},]
            }
        }
    })
</script>
</html>

v-for循环数组，字符串，数字，对象

# v-for 可以循环数组，字符串，数字，对象
v-for="a in obj"
    如果obj是数组：a就是数组的一个个元素
    如果obj是数字：a就是从1开始的一个个数字
    如果obj是字符串：a就是一个个字符
    如果obj是对象：a就是一个个value的值

v-for="(a,b) in obj"
    如果obj是数组：a就是数组的一个个元素，b就是索引
    如果obj是数字：a就是从1开始的一个个数字，b就是索引
    如果obj是字符串：a就是一个个字符，b就是索引
    如果obj是对象：a就是一个个value的值，b就是一个个key值

# 每次循环的标签上，一般都会带一个属性：  :key='值必须唯一'
key值的解释：为了加速虚拟dom的替换

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>循环数组</h1>
    <p v-for="(girl,a) in girls">
        第{{a}}个女孩是：{{girl}}
    </p>

    <h1>循环数字</h1>
    <ul>
        <li v-for="(i,a) in num">
            {{i}}-----索引值：{{a}}
        </li>
    </ul>

    <h1>循环字符串</h1>
    <ul>
        <li v-for="(i,a) in str">
            {{i}}-----索引值：{{a}}
        </li>
    </ul>

    <h1>循环对象</h1>
    <!--    <div v-for="value in obj">-->
    <!--    key在后，value在前-->
    <div v-for="(value,key) in obj">
        key值为：{{key}}，value值为：{{value}}
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 6,// 循环数字，从1开始，到6结束
            str: '彭于晏 is handsome',  // 循环字符串循环的是字符
            obj: {name: 'cxk', age: 19, hobby: ['唱', '跳', 'rap', '篮球']},
            girls: ['刘亦菲', '迪丽热巴', '杨超越']
        },
    })
</script>
</html>

数组的检测与更新

可以检测到变动的数组操作：

push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转

检测不到变动的数组操作：

filter()：过滤
concat()：追加另一个数组
slice()：新数组替换原数组
map()：新数组替换原数组

原因：
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

解决方法：

方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>数组的检测与更新</h1>
    <button @click="handleClick">点我追加女生</button>
    <button @click="handleClick1">点我追加一批女生</button>
    <button @click="handleClick2">点我修改数组页面变化</button>
    <p v-for="girl in girls">{{girl}}</p>

    <h1>对象的检测与更新</h1>
    <button @click="handleClick3">点我追加身高</button>
    <button @click="handleClick4">点我追加身高--解决</button>
    <p v-for="(value, key) in obj">{{key}}:{{value}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            obj: {name: 'cxk', age: 19, hobby: ['唱', '跳', 'rap', '篮球']},
            girls: ['刘亦菲', '迪丽热巴', '杨超越']
        },
        methods:{
            handleClick(){
                this.girls.push('美女1号') // 监控到变化了
            },
            handleClick1(){
                // 监控不到变化
                let a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
                console.log(a)
            },
            handleClick2(){
                Vue.set(this.girls,0,'sdasdfas') // 监控到变化了
            },
            handleClick3(){
                this.obj.height = '180'  // 监控不到变化
                console.log(this.obj)
            },
            handleClick4(){
                Vue.set(this.obj,'height',170)  // 监控到变化了
            }
        }
    })
</script>
</html>

双向数据绑定

# input标签，v-model：数据的双向绑定
使用属性指令绑定： :value='变量' 数据单向绑定
                 v-model='变量' 数据双向绑定

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>数据双向绑定</h1>
    <p>用户名：<input type="text" v-model="name"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <button @click="handleSubmit">提交</button>{{err}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name:'',
            password:'',
            err:'',
        },
        methods:{
            handleSubmit(){
                console.log(this.name, this.password)
                this.err='用户名密码错误'
            }
        }
    })
</script>
</html>

事件处理

input也有很多事件：

事件	释义
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件

change 和 blur 最本质的区别：

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>input的事件处理</h1>
    <h2>blur</h2>
    <p><input type="text" v-model="name" @blur="handleBlur">{{name}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="name1" @change="handleChange">{{name1}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="name2" @input="handleInput">{{name2}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name:'',
            name1:'',
            name2:'',
        },
        methods:{
            handleBlur(){
                console.log('失去焦点了，触发了', this.name)
            },
            handleChange(){
                console.log('发生变化，触发了', this.name1)
            },
            handleInput(){
                console.log('输入了内容，触发了', this.name2)
            }
        }
    })
</script>
</html>

过滤案例

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
            newdataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
        },
        methods: {
            handleSearch() {
                console.log('搜索的内容是：', this.search)
                // 复杂写法
                // var _this=this
                // this.dataList=this.dataList.filter(item=>{
                //     console.log(this)
                //     // 判断this.search是否在item中，如果在保留，return true，如果不在返回false
                //     if (item.indexOf(this.search)>=0){
                //         return true
                //     }else {
                //         return  false
                //     }
                // })

                // 简单写法
                this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            },
        }
    })

    // 补充：
    // 1 数组过滤方法，内置的
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
    //     'csrf',
    //     'd',
    //     'dddd',
    // ]
    // // filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
    // // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
    // l = l.filter(function (item) {
    //     console.log('进来一个值：',item)
    //     return false
    // })
    // console.log(l)


    //2 判断子字符串是否在字符串中
    // var s='tttatom'
    // var a ='a'
    // console.log(s.indexOf(a)>=0)


    // 3  es6 模板字符串  ``   对象写法    箭头函数
    // var f=function (){
    //     console.log('打印了')
    // }
        //3.1 不带参数的箭头函数
        // var f = () => {
        //     console.log('打印了')
        // }

        // 3.2 带一个参数，没有返回值得箭头函数
        // var f = name=>{
        //     console.log('打印了', name)
        // }
        // 3.3 多个参数，没有返回值
        // var f = (name,age) => {
        //     console.log('打印了', name,age)
        // }
        // 3.4 带一个参数，有返回值，函数体只有一行

        // var f = function (name) {
        //     return name+'nb'
        // }
        //  var f = name=> name+'nb'

        // 有什么用？ 1 简洁  2 箭头函数没有自己的this,会用上一层的this


        // var f = function () {
        //     console.log('匿名函数的this', this)
        // }
        // var f1 = () => {
        //     console.log('箭头函数的this', this)
        // }

        // var obj = {
        //     f: function () {
        //         console.log('匿名函数的this', this)
        //     },
        //     f1: () => {
        //         console.log('箭头函数的this', this)
        //     }
        // }
        //
        // obj.f()
        // obj.f1()
</script>
</html>

事件修饰符

.stop  只处理自己的事件，不向父标签冒泡
.self  只处理自己的事件，子标签冒泡的事件不处理
.prevent  阻止a标签链接的跳转
.once  事件只会触发一次（适用于抽奖页面）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件修饰符</h1>
    <h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2>
    <ul @click="handleUl">
        <li @click.stop="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>

    <h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
    <ul @click.self="handleUl">
        <li @click="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>

    <h3>阻止a标签跳转</h3>
    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

    <h4>once只执行一次</h4>
    <button @click.once="handleOnce">点我秒杀</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUl() {
                console.log('ul被点了')
            },
            handleMn() {
                console.log('美女被点了')
            },
            handleSg() {
                console.log('帅哥被点了')
            },
            handleA() {
                console.log('a被点了')
            },
            handleOnce() {
                console.log('恭喜你，秒到了')
            }
        }
    })
</script>
</html>

按键修饰符

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>按键修饰符</h1>
    <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            search: ''
        },
        methods: {
            // 方法1：
            handleUp() {
                console.log('回车被按了')

            // 方法2：
            // handleUp(event) {
            //     if (event.code == 'Enter') {
            //         console.log('回车键被按了', event)
            //     }
            // }
            }
        }
    })
</script>
</html>

posted @ 2022-10-25 18:11 空白o 阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue学习笔记

· Vue学习-02

· vue篇：标签渲染、事件处理...

· style和class使用、条件渲染、v-for遍历数字，数组，对象、key值解释和数组的检测与更新、事件处理、过滤案例、事件修饰符、数据的双向绑定

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：空白o
园龄： 2年8个月
粉丝： 8
关注： 13

+加关注

2025年3月

日

一

二

三

四

五

六

vue学习笔记

今日内容概要

今日内容详细

style和class

条件渲染

列表渲染

v-for循环数组，字符串，数字，对象

数组的检测与更新

双向数据绑定

事件处理

过滤案例

事件修饰符

按键修饰符

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔档案 (123)

阅读排行榜

推荐排行榜