|
|
@@ -0,0 +1,78 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <style>
|
|
|
+ .box1{
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background-color: pink;
|
|
|
+ }
|
|
|
+ .box2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ .box3{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: blue;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <!-- v-on 为元素绑定事件 v-on:事件名称="方法名" -->
|
|
|
+ <button v-on:click="fun">按钮</button>
|
|
|
+ <!-- 如果需要传递参数 可以在方法名后面添加参数 -->
|
|
|
+ <button v-on:click="fun2('2')">按钮2</button>
|
|
|
+ <!-- v-on可以缩写为 @ -->
|
|
|
+ <button @click="fun3">按钮3</button>
|
|
|
+
|
|
|
+ <div v-if="isShow"> hello Vue!</div>
|
|
|
+
|
|
|
+ <div class="box1" @click="fun4">
|
|
|
+ <div class="box2" @click="fun5">
|
|
|
+ <!-- .stop 等同于 stopPropagation 阻止事件冒泡 -->
|
|
|
+ <div class="box3" @click.stop="fun6"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ isShow:true,
|
|
|
+ },
|
|
|
+ // methods 内部放置一些自定义的方法 比如事件处理函数
|
|
|
+ methods:{
|
|
|
+ fun(){
|
|
|
+ console.log("hello vue");
|
|
|
+ },
|
|
|
+ fun2(i){
|
|
|
+ console.log(i);
|
|
|
+ },
|
|
|
+ fun3(){
|
|
|
+ console.log("hello vue3");
|
|
|
+ // 修改data中的值
|
|
|
+ // vue 中使用this 可以指向data中的值
|
|
|
+ this.isShow = false;
|
|
|
+ },
|
|
|
+ fun4(){
|
|
|
+ console.log("4");
|
|
|
+ },
|
|
|
+ fun5(){
|
|
|
+ console.log("5");
|
|
|
+ },
|
|
|
+ fun6(e){
|
|
|
+ // e.stopPropagation();
|
|
|
+ console.log("6");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
