javaweb04-vue基础

话不多说，参考官网地址Vue官网集成Vue应用。

一、Vue快速入门

（1）新建HTML页面，引入Vue.js
我这里用的是CDN方式

（2）在核心区域创建Vue应用，定义数据模型

```

```
（3）编写视图
```

  

    {{message}}
  

```

**说明：**
（1）插值表达式：{{表达式}}。 内容可以是变量、函数调用、算数运算等
（2）创建Vue应用申明的'#app'，表明寻找一个作用域为app的块，并只在该块下生效
（3）核心架构采用mvvm，实现数据和视图的双向绑定

二、常见指令

在HTML标签上带有v-的特殊属性，不同指令代表不同的意义。
>1.v-bind 为HTML标签绑定属性值，比如设置 css 、href等
2.v-model 在表单元素上创建双向数据绑定
3.v-on 为HTML标签绑定事件
4.v-if、v-else-if、v-else 条件判定，符合条件时显示
5.v-show 符合条件时显示，区域在于切换的是display属性的值
6.v-for 列表渲染，遍历容器的元素或者对象的属性

（1）v-bind 为HTML标签绑定属性值，比如设置 css 、href等——href绑定

```

  

    链接
    {{message}}
  



```

——css绑定

```

  

    
aaa
    {{message}}
  



```

**注意：**
v-bind可以省略，直接写:href（2）v-model 在表单元素上创建双向数据绑定

```

  

    变化链接，跟随text文本框输入内容
    {{url}}
  



```

（3）v-on 为HTML标签绑定事件

```


  

    
  



```

**注意：**
v-on:click可以简写成@click

（4）v-if、v-else-if、v-else 条件判定，符合条件时显示

```
优秀
及格
不及格
```

（5）v-show 符合条件时显示，区域在于切换的是display属性的值

```

  

    优秀
  



```

（6）v-for 列表渲染，遍历容器的元素或者对象的属性

```

        {{index+1}}
        {{item.name}}
        {{item.age}}

        
          男
          女
        

        {{item.score}}

        
          优秀
          及格
          不及格
        

```

三、常见指令使用案例

代码：

  
  
  
  



  

    

      

        
编号
        
姓名
        
年龄
        
性别
        
成绩
        
等级
      

      

        
{{index+1}}
        
{{item.name}}
        
{{item.age}}

        

          男
          女
        

        
{{item.score}}

        

          优秀
          及格
          不及格
        
      
    
  

四、Vue生命周期

概念：指一个对象从创建到销毁的整个过程。

一共分为八个阶段

>beforeCreate 创建前

created 创建后

beforeMount 挂载前

mounted 挂载完成（钩子）

beforeUpdate 更新前

updated 更新后

beforeDestory 销毁前

destoryed 销毁后

晒一张官网生命周期图

**注意：**

Vue的生命周期都有单独的方法，可以直接声明出来。

主要关注mounted挂载完成，因为这里处理发送请求到服务端请求数据。

特别说明beforeUpdate和updateed，当data被修改时，在dom渲染之前调用befroreUpdate，渲染完成之后调用updated