Vue3学习笔记（3.0）

最新推荐文章于 2025-04-16 11:57:45 发布

原创最新推荐文章于 2025-04-16 11:57:45 发布 · 517 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #开发语言 #前端 #vue.js

mez_Blog的专栏同时被 3 个专栏收录

147 篇文章

订阅专栏

前端

72 篇文章

订阅专栏

29 篇文章

订阅专栏

本文介绍了Vue.js中的核心概念，如指令（如v-if、v-for、v-bind、v-on）及其参数、修饰符的使用，以及如何通过v-model实现双向数据绑定和事件监听来响应用户输入。

表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定就是，每个绑定只能包含单个表达式，所以下面的实例不会生效：

{{var a = 1}}  //语句，不是表达式


{{if (ok) {return message }}}   //控制流，不是三元表达式

指令

指令是带有v-前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到DOM上。如下例子：

<div id="app">
    <p v-if="seen">test文本</p>
</div>

<script>

const app1={
    data(){
        return{
            seen:true //若改成false，信息就无法显示
}}}

Vue.createApp(app1).mount('#app')
</script>

在该实例中，v-if指令将根据表达式seen的值（TRUE或false）来决定是否插入p元素

另外还有其他指令，每个都有特殊的功能。例如，v-for指令可以绑定数组的数据来渲染一个项目列表：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-26 16:32:27
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="test in sites">
                {{test.city}}
            </li>

        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

参数

参数在指令后以冒号指明。例如，v-bind指令被用来相应的更新HTML属性：

<div id="app">
    <p><a v-bind:href="url">测试文本</a></p>

</div>

<script>
const app={
data() {
return {
    url:'https://www.baidu.com'}}}


Vue.createApp(app).mount('#app')

</script>

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

另一个实例是v-on指令，它用于监听DOM事件：

<a v-on:click="doSomething"> ... </a>

<a @click="doSomething"> ... </a>

<a @[event]="doSomething"> ...</a>

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():

<form v-on:submit.prevent="onSubmit"></form>

用户输入

在input输入框中我们可以使用v-model指令来实现双向数据绑定：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:57:44
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-26 17:00:24
 * @FilePath: \vscode\数据绑定.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <script>
        const mez={
            data(){
                return {
                    message:"hello Mez!"
                }
            }
        }
        Vue.createApp(mez).mount('#app')
    </script>
</body>
</html>

v-model指令用来在input、select、textarea、CheckBox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素值。

按钮的时间我们可以使用v-on监听事件，并对用户的输入进行响应。

以下实例在用户电机按钮后对字符串进行反转操作：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:57:44
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-26 17:13:54
 * @FilePath: \vscode\数据绑定.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <!-- <input v-model="message"> -->
        <button v-on:click="reverseMessage">两级反转</button>
    </div>

    <script>
        const mez={
            data(){
                return {
                    message:'helloMez!'
                }
            },
            methods: {
                reverseMessage(){
                    this.message=this.message
                    .split('')
                    .reverse()
                    .join("")
                }
            }
        }
        Vue.createApp(mez).mount('#app')
    </script>
</body>
</html>