JavaWeb—vue（基础知识）

目录

1.什么是Vue?

2.Vue快速入门

插值表达式：

 常用指令

 v-bind

v-model

v-on

v-if /v-show

v-for

案例：通过Vue完成表格数据的渲染展示

 生命周期

---

1.什么是Vue?

Vue 是一套 前端框架 ，免除原生 JavaScript 中的 DOM 操作，简化书写。

基于 MVVM (Model-View- ViewModel ) 思想，实现数据的 双向绑定 ，将编程的关注点放在数据上。

官网： Vue.js

2.Vue快速入门

新建 HTML 页面，引入 Vue.js 文件

在 JS 代码区域，创建 Vue 核心对象，定义数据模型

在创建vue对象时，有几个常用的属性：

• el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值

• data: 用来定义数据模型

• methods: 用来定义函数。这个我们在后面就会用到

编写视图

    
    {{ message }}

插值表达式：

         用来将vue对象中定义的model展示到页面上

形式： {{ 表达式 }} 。

内容可以是：

变量

三元运算符

函数调用

                    算术运算

 常用指令

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

 v-bind

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

传智教育

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

传智教育

v-model

在表单元素上创建双向数据绑定。双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

        什么是双向？

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

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

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

通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

v-on

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

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

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

• 我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下：
  
   methods: {
          handle: function(){
             alert("你点我了一下...");
          }
  }
  
  然后我们给第一个按钮，通过v-on指令绑定单击事件，代码如下：
  
   
  
  同样，v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下：
  
  
  
  

v-if /v-show

v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

    
    
    
    
    


    

        
        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)

        



        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)

    

v-for

从名字我们就能看出，这个指令是用来遍历的

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}


需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    
   {{索引变量 + 1}} {{变量名}}


接下来，准备如下代码：



    
    
    
    
    


    


    




然后分别编写2种遍历语法，来遍历数组，展示数据，代码如下：

 

     
{{addr}}
     

     
{{index + 1}} : {{addr}}

案例：通过Vue完成表格数据的渲染展示

如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

• 分析：

  首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换

• 步骤：

  • 使用v-for的带索引方式添加到表格的标签上

  • 使用{{}}插值表达式展示内容到单元格

  • 使用索引+1来作为编号

  • 使用v-if来判断，改变性别和等级这2列的值

• 代码实现：

    
    
    
    
    


    
    

        
        

            

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

            

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

                    男
                    女
                
                
{{user.score}}
                

                    优秀
                    及格
                    不及格
                
            
        

    

 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：