标签：name put off type 不用 order opp css 事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 5 <meta charset="utf-8"> 6 <title></title> 7 <style type="text/css"> 8 #canvas { 9 width:600px; 10 padding: 200px 20px; 11 text-align: center; 12 border:1px solid orange; 13 } 14 </style> 15 </head> 16 <body> 17 18 <!--vue-app 是根容器--> 19 <div id="vue-app"> 20 <h1>{{ name }}</h1><!--模板语法--> 21 <!--将这块内容，放入虚拟DOM中，不会将 花括号--> 22 <p>{{ work }}</p> 23 <hr/> 24 <p>{{ greet() }}</p><!--方法也可以这样用--> 25 <hr/> 26 <p>{{ say(‘hello jack 你妹 ‘) }}</p><!--可以直接传参--> 27 <hr/> 28 <a v-bind:href="website">web开发</a> 29 <hr/> 30 <input type="text" v-bind:value="name"> 31 <!--v-bind 针对的是属性的绑定--> 32 <hr/> 33 <p v-html="websiteTag"></p> 34 <hr/> 35 <button v-on:click="age++">涨1岁</button> 36 37 <!--将事件绑定到当前标签--> 38 <button v-on:click="age--">减1岁</button> 39 <p>my age is {{age}}</p> 40 <hr/> 41 <!--利用方法 修改年龄--> 42 <!--这里方法 可以给（） 也可以不给---> 43 <!--假如你绑定的是事件 可以不用写 （），但是{{ add() }} 就必须给了---> 44 <button v-on:click="add">涨1岁</button> 45 <button v-on:click.once="add">涨1岁 once 事件修饰符 让事件只执行一次</button> 46 <!--将事件绑定到当前标签--> 47 <button v-on:click="substract">减1岁</button> 48 <p>my age is {{age}}</p> 49 <hr> 50 <!--双击 按钮 触发事件 ---> 51 <button v-on:dblclick="add">涨1岁</button> 52 <button v-on:dblclick="substract">减1岁</button> 53 <p>my age is {{age}}</p> 54 <hr/> 55 <button v-on:click="addMore(10)">涨10岁</button> 56 <p>my age is {{age}}</p> 57 <button v-on:dblclick="substractMore(10)">减10岁</button> 58 <hr/> 59 <p>v-on 另外一种用法</p> 60 <button @click="addMore(10)">涨10岁</button> 61 <p>my age is {{age}}</p> 62 <button @dblclick="substractMore(10)">减10岁</button> 63 <hr/> 64 <!-- 鼠标事件--> 65 <div id="canvas" v-on:mousemove="updateXY"> 66 {{ x }} 67 <hr/> 68 {{ y }} 69 </div> 70 71 <hr/> 72 <!-- 鼠标事件--> 73 <div id="canvas" v-on:mousemove="updateXY"> 74 {{ x }}: 75 {{ y }} 76 - <span @mousemove="stopMoving">Stop Moving</span> 77 </div> 78 <hr/> 79 <!-- 鼠标事件--> 80 <div id="canvas" v-on:mousemove="updateXY"> 81 {{ x }}:{{ y }}<!-- .stop 这里是事件修饰符的作用--> 82 - <span @mousemove.stop>Stop Moving 第二种方法阻止冒泡方法</span> 83 </div> 84 <hr/> 85 <!-- --> 86 <br> 87 <br> 88 <br> 89 nihao 90 91 <a v-on:click.prevent="alert()" href="http://www.konren.com">弹出窗口 并且</a> 92 </div> 93 <script src="app.js"></script> 94 <!-- <script type="text/javascript"> 95 96 var vm=new Vue({ 97 el:‘#vue-app‘, 98 data:{ 99 name:‘yanxiatingyu‘, 100 work:‘web 开发‘ 101 }, 102 methods:{ 103 greet:function(){ 104 return ‘Good Morning ！‘; 105 }, 106 say:function(msg){ 107 return ‘Good Morning !‘+msg+‘!‘; 108 } 109 } 110 }); 111 112 </script> --> 113 </body> 114 </html>
1 //实例化vue对象 2 3 var vm=new Vue({ 4 el:‘#vue-app‘, 5 data:{ 6 name:‘yanxiatingyu‘, 7 work:‘web 开发‘, 8 website:‘http://www.konren.com‘, 9 websiteTag:‘<a href="http://www.baidu.com">百度</a>‘, 10 age:30, 11 x:0, 12 y:0 13 }, 14 methods:{ 15 greet:function(){ 16 return ‘Good Morning ！‘; 17 }, 18 say:function(msg){ 19 return ‘Good Morning !‘+msg+‘! ‘+this.name; 20 }, 21 add:function(){ 22 this.age++; 23 }, 24 substract:function(){ 25 this.age--; 26 }, 27 addMore:function(year){ 28 this.age+=year; 29 }, 30 substractMore(year){ 31 this.age-=year; 32 }, 33 updateXY:function(event){ 34 // console.log(event); 35 // this.x=event.clientX; 36 // this.y=event.clientY; 37 38 this.x=event.offsetX; 39 this.y=event.offsetY; 40 }, 41 stopMoving:function(event){//阻止冒泡事件 42 event.stopPropagation(); 43 }, 44 alert:function(){ 45 alert(‘Hello world ！‘); 46 } 47 48 } 49 }); 50 51 /** 52 *el:是属性 代表element:需要获取的元素控制的元素，是HTML中的根容器元素 53 *data:用于数据的存储，data 本质是对象 54 *这些内容挂载在id为vue-app 中，其它地方不挂载 55 *methods 也是一个对象，里面可以存放很多方法,注册方法 56 *v-bind 针对的是属性的绑定 57 *v-html:输入原生html代码 58 *data-binding:给属性绑定对应的值 59 **/
标签：name put off type 不用 order opp css 事件
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9457938.html
