Vue模板语言入门

啧不应该啊

于 2024-09-10 21:21:47 发布

阅读量460

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Wgq0731/article/details/142094319

版权

一、绑定事件监听

接上集，如果想看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值为：张