VueJS 常用系统指令

VueJS 常用系统指令

1. v-on:(等同于@)

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

 

 

2. v-on:click(等同于@click)

demo2.html

【需求】:点击按钮事件,改变message的值



   
      
      v-on:click单击事件
      
   
   
      
{{message}}

 

3. v-on:keydown

表示键盘按下事件。

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

Keycode对照表

VueJS 常用系统指令_第1张图片

demo3.html

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




   
      
      v-on:keydown
      
   

   
      

 

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

 

 

4 . v-on:mouseover

鼠标移入区域事件

demo4.html

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

【需求2】:在div中添加

 

 

 

5. 事件修饰符(了解)

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

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

.stop  // 停止触发,阻止冒泡修饰符(阻止上一层事件)

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

.capture  // 捕获

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

.once  // 只执行一次

demo5.html

 

【需求】:在表单中,点击“提交”按钮,阻止执行(.prevent);在超链接中,点击url,阻止上一层事件执行(.stop)




   
      
      v-on:事件修饰符

      
   

   
      
   
   


 

6. 按键修饰符(了解)

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

全部的按键别名:

.enter  // 表示键盘的enter键

.tab

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

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

demo6.html

【需求】:在输入框中,如果输入回车键,就执行弹出窗口事件(可用于网页登录)。




   
      
      v-on:按键修饰符

      
   

   
      

 

7. v-textv-html

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

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

v-html:输出文本内容,会解析html元素

demo7.html

【需求】:使用message属性赋值“

hello world

”,查看页面输出内容。



   
      
      v-text与v-html
      
   
   
      


 

 

8. v-bind

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

demo8.html

【需求】:使用vue定义属性ys对页面中的字体标签赋值颜色(color)。

          使用vue定义属性info,对页面中的超链接传递参数(href)。




   
      
      v-bind
      
   

   
      
   
   



v-bind简写方式


...

...

 

 

9. v-model

用于读取数据。

demo9.html

【需求】:使用vue赋值json数据,并显示到页面的输入框中(表单回显)。

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




   
      
      v-model
      
   

   
      
用户名:
密码:

 

10. v-for

用于操作array/集合,遍历

demo10.html

【需求1】:使用vue赋值list集合,分别存放数组和集合,并把数据遍历到页面上的

  • 标签中。

    
    
       
          
          v-for遍历数组
          
       
       
          
    • {{value}}----{{index}}

    • {{value.username}}----{{value.age}}----{{index}}


     

    demo11.html

    【需求2】:使用vue赋值json数据,并把数据遍历到页面上的

    里的标签中。

    
    
    
       
          
          v-for遍历对象
          
       
    
       
          
    序号 编号 名称 价格
    {{index+1}} {{p.id}} {{p.name}} {{p.price}}
  •  

    11. v-ifv-show

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

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

    demo12.html

    【需求】:使用vue赋值flag变量(boolean类型),用来判断元素中的内容是否显示。

    
    
    
       
          
          v-if和v-show
          
       
    
       
          
    传智播客 itcast


     

    VueJS 常用系统指令_第2张图片

     

    你可能感兴趣的:(vue,VueJS,常用指令)