Vue.js基本知识02--基本语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_50311889/article/details/124527041

本文详细介绍了Vue.js中的一些核心指令，包括v-bind用于数据绑定，v-model实现双向数据绑定，v-on及其简写@用于事件绑定，以及修饰符如.prevent在表单提交时的应用。此外，还展示了条件渲染v-if/v-else和v-for指令用于列表渲染。这些内容涵盖了Vue.js基础语法的重要方面。

摘要由CSDN通过智能技术生成

基本语法

v-bind指令

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

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

<body>
    <div id="app">
        <!-- v-bind指令 单项数据绑定 一般用在标签属性内  获取值
        -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>

        //简写方式
        <h1 :title="message">
            {{content}}
        </h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>
</body>

</html>

v-model:

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

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

<body>
    <div id="app">
        <input type="text" v-bind:value="searchMap.keyWord"/>
        <input type="text" v-model="searchMap.keyWord"/>
       
        <p>{{searchMap.keyWord}}</p>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '小王'
                }
            }
        })
    </script>
</body>

</html>

绑定事件：

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

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

<body>
    <div id="app">
        <!-- vue绑定事件 -->
        <button v-on:click="search()">查询</button>
        <!-- 简写方式 -->
        <button @click="f1()">玩呢</button>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '尚硅谷'
                },
                //查询结果
                result: {}
            },
            methods: {
                search() {
                    console.log('search')
                    //TODO
                },
                f1(){
                    console.log('f1...')
                }
            }
        })
    </script>
</body>

</html>

修饰符

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

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

<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" name="name" v-model="user.name" />
            <button type="submit">保存</button>
        </form>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit(){

                }
            }
        })
    </script>
</body>

</html>

条件渲染

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

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

<body>
    <div id="app">
        <input type="checkbox" v-model="ok" />是否同意
        <h1 v-if="ok">小王</h1>
        <h1 v-else>老王</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

</html>

v-for指令

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

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

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <hr>
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
        </hr>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
            }
        })
    </script>
</body>

</html>