首页 > 其他 > 详细

Vue 学习 1

时间:2018-08-11 00:35:30      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:closed   oct   scrip   cti   针对   this   tcs   data   addm   

技术分享图片
  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>
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+‘!&nbsp;‘+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 **/
vue.js

 

Vue 学习 1

标签:closed   oct   scrip   cti   针对   this   tcs   data   addm   

原文:https://www.cnblogs.com/yanxiatingyu/p/9457938.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号