学习Vue日记第二天

最新推荐文章于 2024-04-25 13:56:39 发布
最新推荐文章于 2024-04-25 13:56:39 发布
阅读量120 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43061473/article/details/117457529
版权

v-on指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click="showInfo">请单击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '单击查看此内容'
            },
            methods: {
                showInfo () {
                    this.msg = '123'
                }
            }
        })
    </script>
</body>

</html>

v-for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(item,key) in list" data-id="key">
            索引是:{{key}},元素内容:{{item}}
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data: {
                list: [1,2,4]
            }
        })
    </script>
</body>
</html>

v-if指令
v-if重新创建v-show是显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
        <button @click="isShow=!isShow">显示/隐藏</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                isShow:'true'
            }
        })
    </script>
</body>
</html>

学生列表案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="add">添加学生</button>
        <button @click="del">删除学生</button>
        <table border="1" width="50%" style="border-collapse: collapse">
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr align="center" v-for="item in students">
                <td>{{item.grade}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                students: []
            },
            methods: {
                //添加学生信息
                add () {
                    var student = { grade: '1', name: 'cc', gender: 'nan', age: 22 };
                    this.students.push(student)
                },
                //删除学生信息
                del () {
                    this.students.pop()
                }
            }
        })
    </script>
</body>

</html>

v-on允许触发事件时执行JavaScript代码
随机数案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="count+=Math.random()" >随机数</button>
        <p>随机数是{{count}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                count:0
            },
            methods:{
                submit(){
                    count=1
                }
            }
        })
    </script>
</body>
</html>

keyup.enter按键修饰符监听按键
回车按键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:value="skt" v-on:keyup.enter="submit">
        <hr/>
        <p>{{skt}}</p>
    </div>
    <script>
        var vm =new Vue({
            el:'#app',
            data:{
                skt:'123'
            },
            methods:{
                submit(){
                    this.skt='cuowu'
                }
            }
        })
    </script>
</body>
</html>

事件修饰符
.stop阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-on:click="doParent">
            <button v-on:click="doThis">时间冒泡</button>
            <button v-on:click.stop="doThis">阻止时间冒泡</button>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            methods:{
                doParent(){
                    console.log('父类单击事件')
                },
                doThis(){
                    console.log('子类单击事件')
                }
            }
        })
    </script>
</body>
</html>

.prevent阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="https://www.baidu.com" v-on:click.prevent>阻止默认行为</a>
        <a href="https://www.baidu.com" >不阻止默认行为</a>
    </div>
    <script>
        var vm=new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

.capture事件捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-on:click.capture="doParent">
        <button v-on:click="doThis">事件捕获</button>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            methods:{
                doParent(){
                    console.log('fu')
                },
                doThis(){
                    console.log('zi')
                }
            }
        })
    </script>
</body>
</html>

.self自身触发和.once触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="Odiv1" v-on:click.self="doParent">a
            <div class="Odiv2" v-on:click="doThis">b</div>
        </div>
        <!-- 只执行一次 -->
        <div class="Odiv1" v-on:click.once="doParent">c
            <!-- 被单击执行 -->
            <div class="Odiv2" v-on:click.self.stop="doThis">d</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            methods:{
                doParent(){
                    console.log('fu')
                },
                doThis(){
                    console.log("danji")
                }
            }
        })
    </script>
</body>
</html>
<style>
    .Odiv1{width: 80px;height: 80px;background: #aaa;margin: 5px;}
    .Odiv2{width: 50px;height: 50px;background: #ccc;}
</style>

Vue组件
案例：多个按钮单击计算次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>
    <script>
        // 创建组件
        Vue.component('my-component',{
            data(){
                return {
                    count:0
                }
            },
            template:'<button v-on:click="count++">被单击{{count}}次</button>'
        }
        )
        var vm=new Vue({el:'#app'})
    </script>
</body>
</html>

局部注册组件component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
    var com1={
        template:'<p>我是vm实例中局部组件</p>'
    }
    var vm=new Vue({
        el:'#app',
        //注册局部组件
        components:{ myComponent:com1}
    })
    </script>
</body>
</html>

template模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{title}}</p> 
        <hr/>
        <!-- 这是实现的 -->
        <my-component></my-component>
    </div>
    <template id="tmp1">
        <p>{{title}}</p>
    </template>
    <script>
        Vue.component('my-component',{
            template:'#tmp1',
            data(){
                return {
                    title:'我是组件内的title'
                }
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{
                title:'我是vm实例中的title'
            }
        })
    </script>
</body>
</html>

prop传值子类接收父类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <my-parent name="title"></my-parent>
    </div>
    <template id="template1">
        <div>我是父组件{{name}}</div>
    </template>
<script>
    Vue.component('my-parent',{
        template:'#template1',
        props:['name'],        
    })
    var vm=new Vue({el:'#app'})
</script>
</body>

</html>

$emit传值子类传父类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <parent></parent>
    </div>
    <template id="child">
        <div>
            <hr />
            <button @click="click">send</button>
            <input type="text" v-model="message">
        </div>
    </template>
    <script>
        Vue.component('parent', {
            template: '<div><child @childFn="transContent"></child>'+'子组件传来的值:{{message}}</div>',
            data() {
                return {
                    message: '11'
                }
            },
            methods: {
                transContent(payload) {
                    this.message = payload
                }
            }
        })
        Vue.component('child', {
            template: '#child',
            data() {
                return {
                    message: '我是子组件的消息'
                }
            },
            methods: {
                click() {
                    this.$emit('childFn', this.message);
                }
            }
        })
        var vm = new Vue({ el: '#app' })
    </script>
</body>

</html>

组件切换
v-if实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
        <a href="#" @click.prevent="flag?flag=!flag:flag">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <template id="login">
        <div>登录界面</div>
    </template>
    <template id="register">
        <div>注册界面</div>
    </template>
    <script>
        Vue.component('login', {
            template: '#login'
        })
        Vue.component('register', {
            template: '#register'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            }
        })
    </script>
</body>

</html>

is属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="#" @click.prevent="comName='login'">登录</a>
        <a href="#" @click.prevent="comName='register'">注册</a>
        <component v-bind:is="comName"></component>
    </div>
    <template id="login">
        <div>登录界面</div>
    </template>
    <template id="register">
        <div>注册界面</div>
    </template>
    <script>
         Vue.component('login', {
            template: '#login'
        })
        Vue.component('register', {
            template: '#register'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                comName: ''
            }
        })
    </script>
</body>
</html>

加油！！！

c木
关注
Vue使用日记（29）：Vuex详解
jimson_zhu的博客
12-03 200
Vuex是什么？ 官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式插件。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 状态管理是什么？ 可以简单地将其...
前端学习日记 -- 八月
Nana_9457的博客
09-03 3351
1、柯里化与连续箭头函数（闭包）：https://blog.csdn.net/allangold/article/details/86667908
vue的内置指令练习 和 vue的事件练习
qq_53366282的博客
03-18 1104
目录 1.vue的内置指令练习 2. vue事件的练习 1.vue的内置指令练习 <head> <title>内置指令</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <!-- 建议用 v-if --> <p>&lt.
Vue框架学习（三）
qq_46087627的博客
01-12 645
Vue事件和Vue组件
学习Vue日记第五天
qq_43061473的博客
06-05 85
钩子函数实现动画（越来越难了@！–！@） Vue结合Velocity.js实现动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="velocity.min.js"></script> <script src="../vue.js"></script
Vue第一天日记
weixin_45452537的博客
12-05 233
.stop 和.self都可以阻止冒泡，但还是有区别 例如a->b.stop->c，那么只会执行c； 而a->b.self->c，则执行c和a。 再来说一下v-cloak和v-text的区别： 两个都是属性控件， msg=‘123’，可以看到，v-cloak不会覆盖其他内容，而v-text则把后面的内容给覆盖掉了。 这两条语句的区别是有没有在value前加v-bin...
对vue开发进行一周的日记
09-06
第二天： 今天，我决定尝试一下使用vue来构建一个简单的ToDo列表应用程序。我创建了一个vue项目，并在主组件中定义了一些数据和方法。然后，我使用v-for指令来遍历数据，并使用v-bind指令实现了数据的双向绑定。我还...
【项目日记】第一天
weixin_66380637的博客
06-13 1307
今日错误
2024全新Java学习路线图一条龙（视频+课件+源码资料）
码农王也的博客
04-25 1586
互联网浩瀚无际，你能来到这里，是机遇也是缘分，机遇，就像我的标题一样，你找到了一份Java 360度无死角的 Java 学习路线，而缘分让我们相遇，注定给你的学习之路搭上一把手，送你一程。整条线路除了拥有后端整个技术体系外，还涵盖了前端、大数据、云计算、运维等各大领域。在这十八般武艺汇聚全身的同时，这条学习路线也拥有着独有的特色和着重点，比如加入了极为重要且业内稀缺的基本功修炼——六套计算机基础类课程。还有多套Java基础类课程，多维度讲解帮助学习者入门。
5110-微信小程序健身房私教预约微信小程序+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
Fast_integration_dependencies_in_spring_boot.是一个快速_fastdep.zip
最新发布
09-15
Fast_integration_dependencies_in_spring_boot.是一个快速_fastdep
05-Python数据类型-列表的相关运算
09-15
05_Python数据类型_列表的相关运算 文章对应的 jupyter notebook 源文件，可以用来做练习。欢迎下载使用。 目录如下： Python的基础数据类型 列表运算符 赋值和深浅拷贝 赋值 浅拷贝 深拷贝 附件
python字典介绍​.docx
09-15
python字典介绍​
5062-微信小程序传染病防控宣传系统的设计与实现+springboot（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
智慧种植管理系统.zip
09-15
Farmify是一个基于Python的项目，旨在帮助农民进行作物病虫害预测、作物推荐和肥料建议。该项目利用机器学习模型建立预测系统，并结合Flask进行Web应用开发。它提供了疾病预测、作物推荐和肥料建议等功能。项目结构清晰，包含多个模块，如疾病预测模型、肥料建议模型、随机森林模型用于作物推荐等。此外，该项目还集成了天气预报数据，并使用了OpenWeatherMap API获取温度和湿度数据。该项目有助于提高农业生产效率和农民收入。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看ReaDME.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
5302-微信小程序党建工作小秘书（源码+数据库）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5137-微信小程序在线选座+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5208-微信小程序校园约拍微信小程序设计与实现ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
Vue框架入门：第一天学习总结
"这是关于Vue.js框架的学习笔记，涵盖了对Vue的基本认识、安装方式、初步使用体验，以及列表渲染和计数器的示例。" 在前端开发领域，Vue.js是一个非常流行的渐进式JavaScript框架，它允许开发者构建用户界面并处理...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值