我爱Java系列---【2.Vue的常用系统指令】

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>常用系统指令</title>
  6     </head>
  7     <script src="js/vuejs-2.5.16.js"></script>
  8     <body>
  9         
 10         <!--
 11          完整语法 
 12         <a v-on:click="doSomething">...</a>
 13          缩写 
 14         <a @click="doSomething">...</a>
 15         -->
 16             
 17         <!--1.v-on：click-->
 18         <h4 style="color: blue;text-align:center">1.v-on：click</h1>
 19         <div id="app1" align="center">
 20             
 21         {{message}}
 22         
 23         <button v-on:click="fun1('good')">点击改变</button>
 24         </div>
 25     <script>
 26         new Vue({
 27             el:'#app1',//表示当前对象接管了div区域
 28             data:{
 29                 message:'时间处理v-on示例1'//注意不要以分号结尾
 30             },
 31             methods:{
 32                 fun1:function(msg){
 33                     this.message=msg;
 34                 }
 35             }
 36         });
 37     </script>
 38     
 39     <hr />
 40     
 41     <!--2.v-on:keydown-->
 42     <h4 style="color: blue;text-align:center">2.v-on:keydown</h1>
 43         <div id="app2" align="center">
 44             
 45         <input value="" v-on:keydown="fun1('你好')" />
 46         <input value="" @keyup.49="fun2" /><!--注意：v-on和@两个用哪个都行，这里的49代表键盘上的1，表示按1弹框49，按其他键不弹框-->
 47     </div>
 48     <script>
 49         new Vue({
 50             el:'#app2',
 51             methods:{
 52                 fun1:function(msg){
 53                     alert(msg);
 54                 },
 55                 fun2:function(){
 56                     alert(event.keyCode);
 57                 }
 58             }
 59         });
 60     </script>
 61     
 62     <hr />
 63     
 64     <!--3.鼠标悬停事件-->
 65     <h4 style="color: blue;text-align:center">3.鼠标悬停事件</h1>
 66         <div id="app3"  @mouseover="fun1" style="border: 1px solid red;height: 20px;">
 67             
 68         </div>
 69         <script>
 70             new Vue({
 71                 el:"#app3",
 72                 methods:{
 73                     fun1:function(){
 74                         alert(event);
 75                     }
 76                 }
 77             })
 78         </script>
 79         
 80         <!--4.事件修饰符
 81             Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。
 82             Vue.js通过由点(.)表示的指令后缀来调用修饰符。
 83                 .stop
 84                 .prevent
 85                 .capture
 86                 .self
 87                 .once
 88                         -->
 89         <h4 style="color: blue;text-align:center">4.事件修饰符</h1>
 90             <div id="app4"  align="center" @click="fn2" style="border:1px solid #FF0000;height: 50px;"  >
 91             <a href="http://www.itcast.cn" @click.stop  @click.prevent   @click.once="fn1" >跳转到传智</a>
 92             <a href="http://www.baidu.com" @click.prevent="fn1" >跳转到百度</a>
 93             </div>
 94     </body>
 95     <script>
 96             var x=new Vue({
 97                 el:"#app4",
 98                 data:{
 99                     
100                 },
101                 methods:{
102                     fn1:function(){
103                         alert("点我跳转不？");
104                         event.preventDefault();//阻止默认事件
105                         //event.stopPropagation();//阻止事件冒泡
106                     },
107                     fn2:function(){
108                         alert("div被点击了..");
109                         //event.preventDefault();
110                     }
111                 }
112                 
113             })
114             
115         </script>
116         
117         <hr />
118         <!--5.按键修饰符
119         Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
120             全部的按键别名：
121             .enter
122             .tab
123             .delete (捕获 "删除" 和 "退格" 键)
124             .esc
125             .space
126             .up
127             .down
128             .left
129             .right
130             .ctrl
131             .alt
132             .shift
133             .meta
134         -->
135         <h4 style="color: blue;text-align:center">5.按键修饰符</h1>
136             <div id="app5"  align="center" style="border:1px solid #FF0000;height: 50px;"  >
137                 <input type="text" @keyup.enter="fun1">
138             </div>
139             <script>
140                 new Vue({
141                     el:'#app5', //表示当前vue对象接管了div区域
142                     methods:{
143                         fun1:function(){
144                             alert("你按了回车");
145                         }    
146                     }
147                 });
148             </script>
149             
150             <!--6. v-text与v-html-->
151             <h4 style="color: blue;text-align:center">6. v-text与v-html</h1>
152             <div id="app6"  align="center" style="border:1px solid #FF0000;height: 70px;"  >
153                 <div v-text="message"></div><!--<h3>传智黑马</h3>-->
154                 <div v-html="message"></div><!--传智黑马-->
155             </div>
156             <script>
157                 new Vue({
158                     el:'#app6', //表示当前vue对象接管了div区域
159                     data:{
160                         message:"<h3>传智黑马</h3>"
161                     }
162                 });
163             </script>
164             
165             <hr>
166             
167             <!--7.v-bind
168                 插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
169                 完整语法
170                 <a v-bind:href="url">...</a>
171                 缩写
172                 <a :href="url">...</a>
173             -->
174             <h4 style="color: blue;text-align:center">7.v-bind</h4>
175             <div id="app7"  align="center" style="border:1px solid #FF0000;height: 70px;"  >
176                 <font size="5" v-bind:color="ys1">传智播客</font><br>
177                 <font size="5" :color="ys2">黑马程序员</font>
178             <hr>
179                 <a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
180             </div>
181             <script>
182                 new Vue({
183                     el:'#app7', //表示当前vue对象接管了div区域
184                     data:{
185                         ys1:"red",
186                         ys2:"green",
187                         id:1
188                     }
189                 });
190             </script>
191             <br />
192             <hr >
193             
194             <!--8. v-model
195                 v-model用于表单数据的双向绑定，其实它就是一个语法糖。可以通过值改变输入框，也可以通过输入框改变默认值
196             -->
197             <h4 style="color: blue;text-align:center">8. v-model</h4>
198             <div id="app8"  align="center" style="border:1px solid #FF0000;height: 70px;"  >
199                 姓名:<input type="text" id="username" v-model="user.username"><br>
200                 密码:<input type="password" id="password" v-model="user.password"><br>
201                 <input type="button" @click="fun" value="获取">
202             </div>
203             <script>
204                 new Vue({
205                     
206                     el:'#app8', //表示当前vue对象接管了div区域
207                     data:{
208                             user:{username:"",password:""}
209                         },
210                     methods:{
211                             fun:function(){
212                                 alert(this.user.username+" "+this.user.password);
213                                 this.user.username="tom";
214                                 this.user.password="11111111";
215                             }
216                     }
217                 });
218             </script>
219             
220             <hr>
221             
222             <!--9.1v-for
223                 操作array
224             -->
225             <h4 style="color: blue;text-align:center">9.1v-for操作array</h4>
226             <div id="app9_1"   style="border:1px solid #FF0000;height: 150px;"  >
227                 <ul>
228                     <li v-for="(item,index) in list">{{item+" "+index}}</li>
229                 </ul>
230             </div>
231             <script>
232                 new Vue({
233                     el:'#app9_1', //表示当前vue对象接管了div区域
234                     data:{
235                         list:[1,2,3,4,5,6]
236                     }
237                 });
238             </script>
239 
240 
241             <!--9.2v-for
242                 操作对象
243             -->
244             <h4 style="color: blue;text-align:center">9.2v-for操作对象</h4>
245             <div id="app9_2"   style="border:1px solid #FF0000;height: 150px;"  >
246                 <table border="1">
247                     <tr>
248                         <td>序号</td>
249                         <td>名称</td>
250                         <td>价格</td>
251                     </tr>
252                     
253                     <tr v-for="p in products">
254                         <td>
255                             {{p.id}}
256                         </td>
257                         <td>
258                             {{p.pname}}
259                         </td>
260                         <td>
261                             {{p.price}}
262                         </td>
263                     </tr>
264                 </table>
265             </div>
266             <script>
267                 new Vue({
268                     el:'#app9_2', //表示当前vue对象接管了div区域
269                     data:{
270                         products:[{id:1,pname:"电视机",price:6000},{id:2,pname:"电冰箱",price:8000},
271                         {id:3,pname:"电风扇",price:600}]
272                     }
273                 });
274             </script>
275             
276             <hr />
277             
278             <!--10.v-if与v-show
279                 v-if是根据表达式的值来决定是否渲染元素    现用现渲染，耗内存
280                 v-show是根据表达式的值来切换元素的display css属性-->
281             <h4 style="color: blue;text-align:center">9.2v-for操作对象</h4>
282             <div id="app10"   style="border:1px solid #FF0000;height: 150px;"  >
283                 <span v-if="flag">传智播客</span>
284                 <span v-show="flag">itcast</span>
285                 <button @click="toggle">切换</button>
286             </div>
287             <script>
288                 new Vue({
289                     el:'#app10', //表示当前vue对象接管了div区域
290                     data:{
291                         flag:false
292                     },
293                     methods:{
294                         toggle:function(){
295                             this.flag=!this.flag;
296                         }
297                     }
298                 });
299             </script>
300     </body>
301 </html>