Vue的语法

1、Visual Studio Code格式化代码快捷键：On Windows 　　Shift + Alt + F

 

2、v-bind单向绑定 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><br>
        <input type="text" v-model="searchMap.keyword"></input>
        <p>
            {{searchMap.keyword}}
        </p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                    searchMap:{
                        keyword:"尚硅谷"
                    }
            }
        })
    </script>
</body>

</html>

3、事件

 <div id="app">
        <button v-on:click="search()">查询</button>
        <button @click="search()">查询1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyword: '尚硅谷'
                },
                //查询结果
                result: {}
            },
            methods: {
                search() {
                    console.log('search......')
                },
                f1(){

                    console.log('f1....')
                }
            }
        })
    </script>
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
 <div id="app">
        <button v-on:click="search()">查询</button>
        <p>您要查询的是:{{searchMap.keyword}}}</p>
        <p>
            <a v-bind:href="result.site" target="_blank">{{result.title}}</a>
        </p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyword: '尚硅谷'
                },
                //查询结果
                result: {
                }
            },
            methods: {
                search() {
                    this.result={
                        site:'http://www.baidu.com',
                        title:'搜索结果'
                    }
                }
            }
        })
    </script>
posted @ 2021-11-24 10:18  关陈七  阅读(48)  评论(0)    收藏  举报