JavaWeb开发 —— Vue框架

目录

一、概述

 二、Vue快速入门

三、常用指令

1.  v-bind & v-model 

2.  v-on

3.  v-if & v-else-if & v-else & v-show

4.  v-for

四、案例分析

五、生命周期

---

一、概述

• Vue 是一套前端框架，免除原生Javascript中的DOM操作，简化书写。
• 基于 MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
• 官网：http://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

 二、Vue快速入门

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

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

• 编写视图

  
         
         {{ message }} 
  
  

插值表达式：

① 形式： {{ 表达式 }}

② 内容：

• 变量
• 三元运算符
• 函数调用
• 算术运算

    
    
    
    
    


    

        
        {{message}}
    

三、常用指令

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

② 常用指令：

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

1.  v-bind & v-model 

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

    


    

        链接1
        链接2>
        
    

2.  v-on

3.  v-if & v-else-if & v-else & v-show

    


    

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

       



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

4.  v-for

    


    

        
{{addr}}
        

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

四、案例分析

通过Vue完成表格数据的渲染显示：

    
    
    
    
    


    

        

            

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

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

                    男
                    女
                
                
{{user.score}}}}
                

                    优秀
                    及格
                    不及格
                
            
        
    

五、生命周期

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态	阶段周期
beforecreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后