Vue基础教程(六) - 博客详情

在Vue中为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中。

例如：

<!DOCTYPE html>
<html lang="zh">
<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</title>
</head>

<body>
    <!-- id标识vue作用的范围 -->
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
   -->
    <div id="app">
        <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
        <button v-on:click="search()">查询</button>
        <p>您要查询的是：{{searchMap.keyWord}}</p>
        <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
                searchMap:{
                    keyWord: '牛牛编程'
                },
                //查询结果
                result: {}
            },
            methods:{
                search(){
                    console.log('search');
                    this.result = {
                        "title":"牛牛编程",
                        "site":"http://www.simoniu.com"
                    }
                }
            }
        })
    </script>
</body>
</html>

运行效果如下：

v-on 指令的简写形式是 @，上面代码简写方式如下：

<!DOCTYPE html>
<html lang="zh">
<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</title>
</head>

<body>
    <!-- id标识vue作用的范围 -->
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
   -->
    <div id="app">
        <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
        <button @click="search()">查询</button>

        <p>您要查询的是：{{searchMap.keyWord}}</p>
        <p><a :href="result.site" target="_blank">{{result.title}}</a></p>
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
                searchMap:{
                    keyWord: '牛牛编程'
                },
                //查询结果
                result: {}
            },
            methods:{
                search(){
                    console.log('search');
                    this.result = {
                        "title":"牛牛编程",
                        "site":"http://www.simoniu.com"
                    }
                }
            }
        })
    </script>
</body>
</html>