Javaweb之Vue指令的详细解析

2.3 Vue指令

在上述的快速入门中，我们发现了html中输入了一个没有学过的属性v-model，这个就是vue的指令。

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表所示：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

2.3.1 v-bind和v-model

我们首先来学习v-bind指令和v-model指令。

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

• v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。

  接下来我们通过代码来演示。

  首先我们在VS Code中创建名为13. Vue-指令-v-bind和v-model.html的文件，然后准备好如下代码：

  
  
  
      
      
      
      
      
  
  
      
  
  ​
          链接1
          链接2
  ​
          
  ​
      
  
  
  

  在上述的代码中，我们需要给标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码：

  链接1

  在上述的代码中，v-bind指令是可以省略的，但是:不能省略，所以第二个超链接的代码编写如下：

  链接2

  浏览器打开，2个超链接都可以点击，然后跳转到百度去！效果如图所示：

• 

   

  注意：html属性前面有:表示采用的vue的属性绑定！

• v-model： 在表单元素上创建双向数据绑定。什么是双向？

  • vue对象的data属性中的数据变化，视图展示会一起变化

  • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

  data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：

  打开浏览器，我们修改表单项标签，发现vue对象data中的数据也发生了变化，如下图所示：

• 

  通过上图我们发现，我们只是改变了表单数据，那么我们之前超链接的绑定的数据值也发生了变化，为什么？

  就是因为我们双向绑定，在视图发生变化时，同时vue的data中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么？

  双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

  整体代码如下:

  
  
  
      
      
      
      
      
  
  
      
  
  ​
          链接1
          链接2
  ​
          
  ​
      
  
  
  

2.3.2 v-on

接下来我们学习一下v-on指令。

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

• v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数

• v-on语法绑定事件时，事件名相比较js中的事件名，没有on

  例如：在js中，事件绑定demo函数

  vue中，事件绑定demo函数

接下来我们通过代码演示。

首先在VS Code中创建名为14. Vue-指令-v-on.html的文件，提前准备如下代码：

    
    
    
    
    


    

​
        
        
​
    

然后我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下：

 methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}

然后我们给第一个按钮，通过v-on指令绑定单击事件，代码如下：

同样，v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下：

完整代码如下：

    
    
    
    
    


    

​
        
​
        
​