VUE语法模板（第一章）

最新推荐文章于 2024-10-12 10:41:56 发布

DngYT

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量505

点赞数 17

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74139820/article/details/142094525

版权

一、差值表达式

在Vue 3中，差值表达式是指在模板中嵌入JavaScript表达式的一种方式。这允许你将动态数据绑定到视图上。差值表达式通常使用双大括号 {{ }} 包裹JavaScript表达式。

功能：向页面输出数据

差值表达式可以使用各种运算符号

在差值表达式可以使用条件运算符

在差值表达式可以使用调用对象的函数

二、强制数据绑定

v-bind:属性名='属性值'；

<div id="app">
        <h1>{{title}}</h1>
        <p>
            <label>用户名：</label><input type="text" v-bind:value="username">
        </p>
        <p></p>
            <label>密码：</label><input type="text":value="password">
        </p>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    title:'强制数据绑定',
                    username:'admin',
                    password:'abc123'
                }
            }
        }).mount('#app')
    </script>

三、绑定事件监听

在Vue 3中，绑定事件监听通常使用 v-on 指令，但在Vue 3中，这个指令的缩写是 @。你可以使用这个缩写来监听DOM事件，并将事件处理函数绑定到组件的方法上

3.1、默认事件形参

在Vue 3中，当你为组件或DOM元素绑定事件监听器时，你可以通过事件处理器（即你在模板中定义的方法）来访问事件的默认形参。这个默认形参通常代表触发该事件的事件对象（Event）。这个事件对象包含了事件的详细信息，比如触发事件的元素、事件类型、事件发生的时间等。

在Vue的模板中，你可以通过@eventName="methodName"的语法来绑定事件监听器，其中eventName是你想要监听的事件的名称（比如click、input等），而methodName则是你在Vue组件的methods选项中定义的处理该事件的方法的名称。

在methodName方法中，你可以定义一个参数来接收事件对象。这个参数就是所谓的“默认事件形参”。

3.2、事件修饰符

在Vue 3中，事件修饰符（Event Modifiers）是一种特殊的后缀，可以添加到v-on或@事件监听器上，用于指示Vue自动执行一些DOM事件的常见操作。这些修饰符可以帮助我们避免在事件处理函数中编写额外的代码来处理这些常见的任务。Vue 3继承了Vue 2中的大部分事件修饰符，并提供了一些新的功能或改进。

3.3、阻止冒泡事件

.stop：阻止事件冒泡。当事件在嵌套元素上被触发时，默认情况下它会冒泡到父元素上。使用.stop修饰符可以阻止这个行为。

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

四、双向数据绑定

4.1、绑定元素的文本与HTML

文本绑定 (v-text)：v-text 指令用于更新元素的文本内容。它会替换元素的当前内容，而不是插入或解析任何HTML标签。

HTML绑定 (v-html)： v-html 指令用于更新元素的HTML内容。它会将数据作为HTML插入到元素中，这时你需要确保数据的安全性，以防止跨站脚本攻击（XSS）。

五、条件渲染

v-if：用于根据表达式的真假来决定是否渲染元素。

v-else：与 v-if 配合使用，用于在条件为假时渲染不同的元素。

v-show：与 v-if 类似，但是它通过切换CSS的 display 属性来控制元素的显示和隐藏，而不是真正地从DOM中添加或移除元素。

 <div id="app">
        <p>
            <a href="#" v-if="user.username=='admin'">编辑</a>
            <a href="#" v-else>详情</a>
        </p>
        <p>
            <a href="#" v-if="user.username=='admin'">编辑</a>
            <a href="#" v-if="user.username!='admin'">详情</a>
        </p>
        <p>
            <a href="#" v-show="user.username=='admin'">编辑</a>
            <a href="#" v-show="user.username!='admin'">详情</a>
        </p>
        <p>
            <button type="button" @click="change">切换成guest</button>{{user.username}}
        </p>
    </div>    
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    user:{
                        username:'xiaopaopao'
                    }
                }
            },
            methods:{
                change(){
                    if(this.user.username=='admin'){
                        this.user.username='guest'
                        event.target.innerText='切换成Admin'
                    }else{
                        this.user.username='admin'
                        event.target.innerText='切换成Guest'
                    }
                }
            }            
        }).mount("#app")
    </script>

六、列表渲染

在Vue 3中，列表渲染通常使用 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:'Tom',age:18},
                        {id:2,name:'Cathy',age:24},
                        {id:3,name:'Scott',age:20},
                        {id:4,name:'Dom',age:19},
                    ]
                }
            }
            //提前加载 钩子函数mounted
        }).mount("#app")
    </script>