首页 > 其他分享 >Vue模板语言入门

Vue模板语言入门

时间:2024-09-11 13:20:56浏览次数:11  
标签:Vue createApp 入门 app 绑定 const event 模板

一、绑定事件监听

                接上集,如果想看vue基础请移步主页

           1、默认事件形参event:

                        即在对象触发事件的函数的默认参数,即使在标签内触发函数位置没写event参数也可以在script函数中直接写:函数名(event){函数体},函数体内可以直接使用event参数

                        例如:

const {createApp}=Vue
        createApp({
            methods:{
                getText(event){
                    
                    console.log(event.target.innerHTML)
                }
            }
        }).mount('#app')

                说明:event.target.innerHTML是获得当前元素内的内容,例如以下代码

<button type="button" @click="getText">查看</button>

                那么event.target.innerHTML的内容会获得:查看

                target可以获得当前对象的属性列表,不仅是innerHTML还有:childNodes(子节点),className(类名),disabled(是否禁用),innerText(元素内文本)等。


  •                 小tips:innerHTML与innerText的区别:前者会识别标签内容,按照标签的特点显示,后者只是字符串,不会识别标签,如:

                        

<div id="app">
        <p v-text="link1"></p>
        <p v-html="link2"></p>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    link1:'<a href="https://www.163.com">网易</a>',
                    link2:'<a href="https://www.163.com">网易</a>'
                }
            },
            methods:{
               
            }
        }).mount('#app')
    </script>

                那么页面上第一个段落内容为<a href="https://www.163.com">网易</a>,第二个段落内容为:网易,单击即可跳转至https://www.163.com


     2、事件修饰符

                        (1)阻止默认事件修饰符(prevent)

                            如在button标签内type设置为submit,单击按钮时,他将触发表单的action属性,默认进行跳转,如果想要阻止这类行为,将用到组织默认事件修饰符,ps:@click为事件绑定写法,click为单击事件

                                        a.在标签内实现阻止默认事件:

                                            

<div id="app">
    <form action="https://www.163.com">
       
        <button type="submit" @click.prevent="go">提交</button>
    </form></div>
    <script>
        const {createApp}=Vue
        createApp({
            methods:{
                
                go(){
                   
                }
            }
        }).mount('#app')

                                        b.在函数内实现阻止默认事件 :

 <div>
<form action="https://www.163.com">
        <button type="submit" @click="go">提交</button>
       
    </form></div>
    <script>
        const {createApp}=Vue
        createApp({
            methods:{
               go(event){
                    event.preventDefault()//阻止默认事件
                }
            }
        }).mount('#app')</script>

这样就实现了阻止跳转的默认事件


                       (2)阻止冒泡事件(stopPropagation)

                                        

 <div id="app">
        <div id="red" @click="goRed">
            <div id="green" @click="goGreen">

            </div>
        </div>
    </div>
<script>
    const {createApp}=Vue
    createApp({
            methods:{
                goRed(event){
                    alert("Red")
                    
                },
                goGreen(event){
                    alert("Green")
                    //阻止冒泡行为
                    event.stopPropagation()
                }
            }
        }).mount('#app')
</script>

如上代码,当你有多个嵌套的元素,当单机内层元素时,将会依次触发外部元素的事件,例如上方代码,当你单击id值为green的div元素,浏览器将先弹出警告框内容为(Green),然后再弹出警告框内容为(Red),使用了stopPropagation后,单击id值为green的div元素后,不会在弹出其他警告框


                (3)按键修饰符

                                a.写法:@事件名.案件名="函数名"

<div id="app">
      
       
        <input type="button" value="" @keyup.enter="test">
    
    </div>
    <script>
         const {createApp}=Vue
         createApp({
            data(){
                return{
                   
                }
            },
            methods:{
                test(){
                    alert("您按了回车键")
}
            }
         }).mount('#app')
    </script>

                                b.写法:@事件名="函数名"

<div id="app">
      
       
        <input type="button" value="" @keyup="test">
    
    </div>
    <script>
         const {createApp}=Vue
         createApp({
            data(){
                return{
                   
                }
            },
            methods:{
                test(){
                    if(event.keyCode==13){
                    alert("您按了回车键")
}
}
            }
         }).mount('#app')
    </script>

说明:在上方代码,没使用事件名.按键名的方式,而是在函数中判断了当前按键的编号是多少,从而实现 


二、双向数据绑定

                双向数据绑定(v-model),页面数据发生变化,脚本中的数据同时发生变化脚本中的数据发生变化,页面数据同时变化,类似于数据联动

<div id="app">
        <h1>双向数据绑定</h1>
        <p>
            用户姓名:<input type="text" v-model="user.username">
        </p>
        <p>
            用户密码:<input type="text" v-model="user.password">
        </p>
        <p>
            性别:<input type="radio" v-model="user.sex" value="male">男
            <input type="radio" v-model="user.sex" value="female">女
        </p>
        <p>
            爱好:<input type="checkbox" name="hobby" v-model="user.hobby" value="sport">运动
            <input type="checkbox" name="hobby" v-model="user.hobby" value="read">读书
            
        </p>
        <p>
            学历:
            <select v-model="user.education">
                <option value="专科">专科</option>
                <option value="本科">本科</option>
                <option value="研究生">研究生</option>
            </select>
        </p>
        <p>
            用户描述:<textarea v-model="user.desc"></textarea>
        </p>
        <p>
            <button type="button" @click="show">显示绑定数据</button>
        </p>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    user:{
                        username:'',
                        password:'',
                        sex:'male',
                        hobby:['sport','read'],
                        education:'专科',
                        desc:''
                    }
                }
            },
            methods:{
                show(){
                    alert(JSON.stringify(this.user))
                    this.user.username='admin'
                    this.user.password='admin123'
                    this.user.sex='female'
                }
            }
        }).mount('#app')
    </script>

页面效果:

 说明:因为sex的初始值为male,所以会显示value值为male对应的元素为选中状态,(ps:传统input控件不用写成v-model:value="值"的方式,默认绑定在value上),因为hobby的初始值包括sport和read,所以默认是选中状态,学历同上。

当单击显示绑定数据按钮时,根据事件触发show函数,使user对象中的username,password,sex重新赋值,页面上值也会发生相应的改变,这就是数据的双向绑定,单击按钮后:

 


三、class 与 Style 绑定

v-model用于数据的动态绑定,那么:class和:style是用来动态绑定样式的

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .btn1{
            width:100px;
            height:30px;
            font-size:16px;
            color:red;
        }
        .btn2{
            background-color: #0aed30;
            border-left:solid  1px #ccc;
            border-top:solid  1px #ccc;
            border-right:solid  2px #666;
            border-bottom:solid  2px #666;
        }
    </style>
</head>
<body>
    <div id="app">
        <button type="button" :class="className1">绑定样式</button>
        <button type="button" :class="{btn1:btn1_choose,btn2:btn2_choose}">绑定对象样式</button>
        <button type="button" :class="[className1,className2]">绑定数组样式</button>
        <button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式中含数组运算</button>
        <hr>
        style绑定样式
        <br>
        <button type="button" :style="style1">按钮1</button>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    className1:'btn1',
                    className2:'btn2',
                    btn1_choose:false,
                    btn2_choose:true,
                    style1:{
                        width:'100px',
                        height:'30px',
                        fontSize:'16px',
                        color:'green'
                    }
                }
            }
        }).mount('#app')
</script>
</body>

说明:上述代码,定义了类选择器.btn1和.btn2分别设置了样式以便区分调试,在元素内部属性class和style前加上':'就实现了动态绑定样式,例如第二个按钮,动态绑定了一个对象样式,也就是当btn1_choose值为true时,那么btn1的值就为true,这个元素就会有btn1的样式,btn2同理,若想改变样式可以通过设置btn1_choose、btn2_choose的真假值即可。第三个按钮动态绑定了一个数组样式,那么两个样式他都会有,如果想改变,只需改变data中的className1/className2的值即可。第四个按钮同理,只是增加了一个三元运算符。以此实现样式的动态绑定


四、条件渲染

              1、v-if,v-else

 <a href="#" v-if="user.username=='admin'">编辑</a>
        <a href="#" v-else>详情</a>

这个很容易理解,v-if后的表达式为真,就会显示当前元素内容,若为假,则会显示v-else的内容

那么上述代码的意思为:如果(v-if)user对象的username值为admin就显示编辑,否则显示详情

                2、v-show

                                也是用于控制元素的显示与隐藏当v-show后的表达式为真,就会显示当前元素内容,例子:

 <a href="#" v-show="user.username=='admin'">编辑</a>
        <a href="#" v-show="user.username!='admin'">详情</a>

五、列表渲染

         1、v-for

                        也就是循环遍历一个数组,将里边的元素都显示到页面上

<div id="app">
        <ul>
            <li v-for="(u,index) in user">{{index}}_{{u.id}}_{{u.name}}_{{u.age}}</li>
        </ul>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                  user:
                    [{id:1,
                    name:'张三',
                    age:20},
                    {
                        id:2,
                    name:'李四',
                    age:21 
                    }
                ]
                 
                }
            },
            methods:{
                
            }
        }).mount('#app')
    </script>

上述代码说明:主要功能是循环遍历数组user将每一个元素独立显示在一个li标签中,v-for=(u,index),u代表user中的一条数据,index是该条数据的下标值,这个结果会显示两条li。这样减少了代码量,方便修改数据


六、计算属性(computed)

           

<div id="app">
        姓:<input type="text" v-model="firstName1">
        名:<input type="text" v-model="lastName1">
        姓名:<input type="text" v-model="username1"><br><br>
        姓:<input type="text" v-model="firstName2">
        名:<input type="text" v-model="lastName2">
        姓名:<input type="text" v-model="username2"><br><br>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    firstName1:'',
                    firstName2:'',
                    lastName1:'',
                    lastName2:'',
                   
                }
            },
            //计算属性
            computed:{
                username1(){
                    return this.firstName1+''+this.lastName1;
                },
                username2:{
                    get(){
                        return this.firstName2+''+this.lastName2
                    },
                    set(val){
                        let strArr= val.split("")
                        this.firstName2=strArr[0]
                        this.lastName2=strArr[1]
                    }
                }
            }
        }).mount('#app')
    </script>

上述代码将实现firstName和lastName的拼接,当firstName与lastName变化时,username也会跟着发生变化,例如firstName的值输入为:张,lastName输入为:三,那么username的值就是张三,而username2在这基础上也可以实现当username2值变化时,firstName与lastName也会发生变化。


七、监听属性(watch)

          使用案例:

<div id="app">
        姓:<input type="text" v-model="firstName">
        名:<input type="text" v-model="lastName">
        姓名:<input type="text" v-model="username"><br><br>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    firstName:'',
                    lastName:'',
                    username:''
                }
            },
           
            watch:{
                username(newVal,oldVal){//参数一:新数据,参数二:老数据
                    if(newVal){
                        let strArr = newVal.split('')
                        this.firstName = strArr[0]
                        this.lastName=strArr[1]
                    }
                    else{
                        this.firstName = ''
                        this.lastName=''
                    }
                }    
            }
        }).mount('#app')
    </script>

上述代码实现了对username属性的监听,他会监听username值的变化,当他的值变化时,会检测到新数据,那么就会将firstName和lastName重新赋值,let strArr = newVal.split('')表示将新值分隔成一个数组,将第一个元素给到firstName,第二个元素给到lastName。比如username值更改为张三,那么lastName的值为:三,fistName值为:张

标签:Vue,createApp,入门,app,绑定,const,event,模板
From: https://blog.csdn.net/Wgq0731/article/details/142094319

相关文章

  • vue学习
    学习目标一周掌握VUE的使用(陆续更新中)学习内容:了解vue的概念及特点引入vue掌握vue核心知识笔记产出:一、vue介绍Vue.js,我们通常简称为Vue,是一个用于构建用户界面的渐进式JavaScript框架。它就像是一个超级强大的工具箱,帮助开发者更轻松、更高效地创建网页和应用程......
  • 零基础国产GD32单片机编程入门(十六)DMA详解及ADC-DMA方式采集含源码
    文章目录一.概要二.GD32F103C8T6单片机DMA外设特点三.GD32单片机DMA内部结构图四.DMA各通道请求五.GD32F103C8T6单片机ADC-DMA采集例程六.工程源代码下载七.小结一.概要基本概念:DMA是DirectMemoryAccess的首字母缩写,是一种完全由硬件执行数据交换的工作方式。DM......
  • 【生日视频制作】直升机飞机侧身AE模板修改文字软件生成器教程特效素材【AE模板】
    生日视频制作教程直升机飞机侧身AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程AE模板套用改图文教程↓↓:怎么如何做的【生日视频制作】直升机飞机侧身AE模板修改文字软件生成器教程特效素材【AE模板】生日视频制作步骤:下载AE模板安装AE软件把AE模板导入......
  • 【卷起来】VUE3.0教程-06-组件详解
    ============各位看官,点波关注和赞吧===========组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构:这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装......
  • asp.netcore8 + vue3 + mysql 自用记账项目(四)项目部署
    一、生成后台api服务 1、在系统生成的Dockerfile基础上,添加时区标识FROMmcr.microsoft.com/dotnet/aspnet:8.0ASbaseENVTZAsia/ShanghaiRUNln-snf/usr/share/zoneinfo/$TZ/etc/localtime&&echo$TZ>/etc/timezoneWORKDIR/appEXPOSE80EXPOSE443FROMmcr.......
  • asp.netcore8 + vue3 + mysql 自用记账项目(二)环境搭建
    一、vue1、node.js安装安装node.js的攻略网上有很多,这里就不多做赘述,安装完成后,验证是否正常然后就是配置淘宝镜像加速,配置环境变量等操作。2、vue安装上面安装完node.js之后,就可以安装vue环境了,网上同样很多,需要注意的是,vue安装完成了,最好将webpack模版、vue-cli、vue-rout......
  • asp.netcore8 + vue3 + mysql 自用记账项目(三)功能开发
    一、前端前端使用vue3+vant4组件实现页面功能。 1、创建vue3项目各个操作分别是:选择创建模式?手动创建选择项目模块?Babel,Kouter,Wuex,CSSPreprocessors选择vue版本?3.0是否使用历史路由模式?是样式的写法?Less项目配置放在哪?package.json文件里是否保存本次......
  • asp.netcore8 + vue3 + mysql 自用记账项目(一)背景简介
    一、背景18年的时候,用了一年多第三方免费的记账本不用了,两个方面原因,一是随着数据增多,APP用着越来越慢,二是相关数据被用于其他用途的风险很大且广告很烦。所以,后面通过MUI+asp.netcore+sqlserver实现记账web功能,在阿里云1核2G服务器的windows系统上发布了自用的服务,最......
  • vue3 中使用 icon 图标的 3 种方案
    1.element-iconElementPlus提供了一套常用的图标集合。1.1.安装#选择一个你喜欢的包管理器#NPM$npminstall@element-plus/icons-vue#Yarn$yarnadd@element-plus/icons-vue#pnpm$pnpminstall@element-plus/icons-vue#选择一个你喜欢的包管理器1.2.......
  • Vue style 动态绑定
    方法1:<divclass="flexpeopleRygl-main-left-nr03":style="divStyleZdfw()">return{ divStyle11:{color:'red',fontSize:'14px',backgroundColor:'yellow',alignIte......