vue的基本语法

属性的绑定，下面先来看一下关于对属性的绑定

      

        {{msg}}
      
    

在上面的代码中，我们通过v-bind的方式给h2绑定了一个title属性。

当然，上面的代码我们也可以使用如下的方式来进行简化

    
      

        {{msg}}
      
    

为了避免闪烁的问题，也就是最开始的时候，出现:{{msg}}的情况，可以使用如下的绑定方式。

  
      

        {msg}} -->
        
      
    

我们可以使用v-for指令基于一个数组来渲染一个列表.v-for指令需要使用item in items形式的语法。其中items 是源数组，而item则是被迭代的数组元素的别名。

基本实现的代码如下：

  
    
    
    
  
  
    
      

        
        
        
        

          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        
      
    
    
    
  

​

注意：为了能够保证列表渲染的性能，我们需要给v-for添加key属性。key值必须唯一，而且不能使用index与random作为key的值。

关于这一点是与虚拟DOM算法密切相关的。在后面的课程中会最为一个重点来探讨虚拟DOM的内容。这也是面试的时候经常被问到的问题。

在前面讲解vue简介的时候，我们说过，如果model中的数据发生了改变，会通过ViewModel通知View更新数据，这个效果前面我们也已经演示了，现在演示一下当view中的数据发生了变化后，怎样通过ViewModel来通知model来完成数据的更新。

其实这就是我们常说的，“双向数据绑定”

怎样实现这种效果呢？可以通过v-model来实现。

具体代码实现如下：

  
    
    
    
    
    
  
​
  
    
      
    
    
  

​

怎样验证v-model实现了双向数据绑定呢？

可以打开控制台，然后输入：vm.userName 发现输出的值为"zhangsan", 取的是模型中的数据。

当在文本框中输入新的值后，在敲一下vm.userName发现对应的数据发生了变化，也就是视图中的数据发生了变化，模型中的数据也 会发生变化。

那么在控制台中直接给vm.userName="lisi",发现文本框中的值也发生了变化。

关于v-model 这个知识点，面试的时候经常会被问到的一个问题就是，自己能否模拟实现一个类似于v-model的双向数据绑定的效果。关于这个问题你可以先思考一下，在后面的课程中，我们会详细的讲解。

怎样监听dom的事件呢？可以通过v-on指令完成，具体的代码如下：

    
    
    
    
    

​

    
        {{name}}
        
        更换姓名
    
    

还可以通过简写的形式。建议以后都使用简写的形式

更换姓名

带参数的形式如下：

带参数的情况
​
​

除了绑定鼠标的单击事件以外，也可以绑定键盘的实际。

例如，页面有有一个文本框，用户在该文本框中输入内容，按下回车键，获取到用户输入的内容。

      {{name}}
      
      更换姓名
      带参数的情况
    
      
    

在mehtods中定义changeUserName方法

 // 通过methods完成函数或方法的定义
        methods: {
          changeName() {
            // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
            this.name = "itcast";
          },
          changeNameByArg(userName) {
            this.name = userName;
          },
             //定义处理文本框键盘事件的方法。
          changeUserName() {
            console.log(this.name);
          },
        },

在上面的案例中，我们使用了按键的修饰符：.enter,在官方文档中，还有其它的按键修饰符，如下所示：

https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

与之相关的就是事件修饰符，如下所示：

https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

以上内容，大家可以在课下的时候，仔细看一下。

这块主要内容主要与样式设置有关。

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

下面先来看一下Class的绑定。

在"列表渲染"中给每个列表项添加对应的样式。

下面给li列表添加上面所定义的样式。

  

          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        

在上面的代码中，我们可以看到，给li标签绑定了class属性，同时actived的值为true,表示给li添加actived样式。

现在有一个需求，就是当鼠标移动到列表项上的时候，更改对应的背景色。

在对class进行绑定的时候，做了一个判断，判断一下selectItem是否与item相等，如果相等添加样式。

当鼠标移动到某个li 列表上的时候，触发mousemove事件，将item的值给selectItem.

在data中定义selectItem.

如下所示：

  data: {
          selectItem: "",
          users: [
            {
              id: 1,
              name: "张三",
            },
            {
              id: 2,
              name: "李四",
            },
            {
              id: 3,
              name: "老王",
            },
          ],
        },

完整 代码如下：

  
    
    
    
    
  
  
    
      

        
        
        
        

          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        
      
    
    
    
  

​

下面，我们再来看一下Style的绑定。

​
        

          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        

通过上面的代码，可以看到通过绑定style的方式来处理样式是非常麻烦的。

v-if和v-show指令可以用来控制元素的显示和隐藏

下面，我们先来看一下v-if的应用。

这里还是对用户数据进行判断。

    
      
没有任何用户数据
​
      

        
        
        
        {item.id}} 姓名:{{item.name}}---索引:{{index}}
         -->
​
        

          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        
      
    

在上面的代码中，我们首先对users数组做了一个判断，如果没有数据，就在页面上展示：“没有任何用户数据”

否则渲染整个列表。

上面是关于v-if的使用，下面看一下v-show.

v-show 是通过css属性display控制元素显示，元素总是存在的。

v-if:通过控制dom来控制元素的显示和隐藏,如果一开始条件为false,元素是不存在的。

什么时候使用v-show,什么时候使用v-if呢？

如果需要频繁的控制元素的显示与隐藏，建议使用v-show. 从而避免大量DOM操作，提高性能。

而如果某个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用v-if