VueJS 常用系统指令

最新推荐文章于 2024-06-11 01:14:10 发布

少营营

最新推荐文章于 2024-06-11 01:14:10 发布

阅读量388

点赞数

分类专栏： vue 文章标签： VueJS 常用指令

本文链接：https://blog.csdn.net/weixin_35674711/article/details/95511550

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

VueJS 常用系统指令

1. v-on:（等同于@）

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

2. v-on:click（等同于@click）

demo2.html

【需求】：点击按钮事件，改变message的值

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-on:click单击事件</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}}  
         <!--<button v-on:click="fun('good')">改变</button>-->
         <button @click="fun('good')">改变</button>
      </div>
   </body>
   <script>
      //view model
      var vm = new Vue({
         el:"#app",
         data:{
            message:"hello world"//model
         },
         methods:{
            fun:function(msg){
                // this代表的是vue对象，或者使用vm
               this.message=msg;
            }
         }
      });
   </script>
</html>

3. v-on:keydown

表示键盘按下事件。

http://www.t086.com/article/4315

Keycode对照表

demo3.html

【需求】：对文本输入框做校验，使用键盘按下事件，如果按下0-9的数字，正常显示，其他按键则阻止事件执行。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:keydown</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <input type="text" v-on:keydown="fun($event)">    
         
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         data: {
            message: 10 //model
         },
         methods: {
            fun: function(e) {
               //1.捕获keyCode 判断它是否是0-9  需要使用event对象
               var keyCode = e.keyCode;
               if(!(keyCode >= 48 && keyCode <= 57)) {
                  //2.阻止默认行为执行
                  e.preventDefault();
               }
            }
         }
      });
   </script>
   
   

</html>

输入框中只能输入0-9的数字，如果不是0-9的数字，不能输入。

4 . v-on:mouseover

鼠标移入区域事件

demo4.html

【需求1】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。

【需求2】：在div中添加<textarea>，鼠标移动到<textarea>，再弹出一个窗口

【需求3】：阻止上一层事件的执行

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:mouseover</title>
      <style>
         #div {
            background-color: red;
         }
      </style>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <div @mouseover="fun1" id="div" style="width: 70%;height: 80%">
12345
            <textarea @mouseover="fun2($event)">abc</textarea>
         </div>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         methods:{
            fun1:function(){
               alert("div区域......");
            },
            fun2:function(e){
               alert("textarea区域......");
               // 阻止冒泡（如果2个方法重叠，阻止上一层fun1方法的执行 ）
               e.stopPropagation();
            }
         }
      });
   </script>

</html>

5. 事件修饰符（了解）

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop // 停止触发，阻止冒泡修饰符（阻止上一层事件）

.prevent // 阻止事件发生，阻止事件默认行为

.capture // 捕获

.self //只点自己身上才运行

.once // 只执行一次

demo5.html

【需求】：在表单中，点击“提交”按钮，阻止执行（.prevent）；在超链接中，点击url，阻止上一层事件执行（.stop）

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:事件修饰符</title>

      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <form v-on:submit.prevent action="http://www.itcast.cn">
            <input type="submit" value="提交">
         </form>

         <div @click="fun1">
            <a @click.stop href="http://www.itcast.cn">itcast</a>
         </div>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         methods: {
            fun1:function(){
               alert("hello");
            }
//          fun2:function (e) {
//             e.preventDefault();
//          },
//          fun3:function (e) {
//             e.stopPropagation();
//          }

         }
      });
   </script>

</html>

6. 按键修饰符（了解）

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter  // 表示键盘的enter键

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

demo6.html

【需求】：在输入框中，如果输入回车键，就执行弹出窗口事件（可用于网页登录）。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:按键修饰符</title>

      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <!--当按下按键enter的时候，触发fun1事件-->
         <input type="text" @keydown.enter="fun1">
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         methods: {
            fun1:function(){
               alert("输入的回车键！");
            }
//          fun1:function (e) {
//             var keyCode = e.keyCode;
//             //alert(keyCode);
//             if(keyCode == 13){
//                 alert("输入的回车键！")
//             }
//          }
         }
      });
   </script>

</html>

7. v-text与v-html

使用{{}}可以输出文本的值。

v-text：输出文本内容，不会解析html元素

v-html：输出文本内容，会解析html元素

demo7.html

【需求】：使用message属性赋值“<h1>hello world</h1>”，查看页面输出内容。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-text与v-html</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <div v-text="message"></div>
         <div v-html="message"></div>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
            message:"<h1>hello world</h1>"//model
         }
      });
   </script>
</html>

8. v-bind

插值语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind指令

demo8.html

【需求】：使用vue定义属性ys，对页面中的字体标签<font>赋值颜色（color）。

使用vue定义属性info，对页面中的超链接<a>传递参数（href）。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-bind</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <font size="5" v-bind:color="ys1">传智播客</font>
         <font size="5" :color="ys2">黑马程序员</font>
         <hr>
         <a v-bind={href:"http://www.itcast.cn/"+info}>itcast</a>
      </div>
   </body>
   <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                ys1:"red",
                ys2:"green",
                info:"subject/javaeezly/index.shtml"
            }
        });
   </script>

</html>

v-bind简写方式

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

9. v-model

用于读取数据。

demo9.html

【需求】：使用vue赋值json数据，并显示到页面的输入框中（表单回显）。

点击提交按钮，改变json数据，验证同时输入框的内容也发生改变。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-model</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         用户名:<input type="text" v-model="user.username"><br>
         密码:<input type="text" v-model="user.password"><br>
         <input type="button" @click="fun" value="按钮">
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         data: {
            user: {
               username: "tom",
               password: "123"
            }
         },
         methods: {
            fun: function() {
               alert(this.user.username+"   "+this.user.password);
               this.user.username = "fox";
               this.user.password = "456";
            }
         }
      });
   </script>

</html>

10. v-for

用于操作array/集合，遍历

demo10.html

【需求1】：使用vue赋值list集合，分别存放数组和集合，并把数据遍历到页面上的<li>标签中。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-for遍历数组</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <ul>
            <li v-for="(value,index) in arr">{{value}}----{{index}}</li>
         </ul>
         <hr>
         <ul>
            <li v-for="(value,index) in list">
{{value.username}}----{{value.age}}----{{index}}
</li>
         </ul>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
            arr:['aaa','bbb','ccc'], //model
            list:[{username:"张三",age:18},{username:"李四",age:22}]
         }
      });
   </script>
</html>

demo11.html

【需求2】：使用vue赋值json数据，并把数据遍历到页面上的<table>里的<tr>标签中。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-for遍历对象</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <table border="1">
            <tr>
               <td>序号</td>
               <td>编号</td>
               <td>名称</td>
               <td>价格</td>
            </tr>

            <tr v-for="(p,index) in products">
               <td>{{index+1}}</td>
               <td>{{p.id}}</td>
               <td>{{p.name}}</td>
               <td>{{p.price}}</td>
            </tr>
         </table>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el: "#app",
         data: {
            products: [{
               id: 'itcast001',
               name: "电视机",
               price: 1000
            }, {
               id: "itcast002",
               name: "洗衣机",
               price: 2000
            }] //model
         }
      });
   </script>

</html>

11. v-if与v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

demo12.html

【需求】：使用vue赋值flag变量（boolean类型），用来判断<span>元素中的内容是否显示。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-if和v-show</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <span v-if="flag">传智播客</span>
         <span v-show="flag">itcast</span>
         <button @click="toggle">切换</button>
      </div>
   </body>
   <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                flag:false
            },
            methods:{
                toggle:function(){
                    this.flag=!this.flag;
                }
            }
        });
   </script>

</html>

少营营

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueJS 常用系统指令

VueJS 常用系统指令1. v-on:（等同于@）可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码2. v-on:click（等同于@click）demo2.html【需求】：点击按钮事件，改变message的值<!DOCTYPE html><html> <head> ...
复制链接

扫一扫

专栏目录