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…
JavaWeb—vue(基础知识)_第1张图片

 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: 可以替换成@,所以第二个按钮绑定单击事件的代码如下:
    
    
    
    
    
    
    
        
        
        
        Vue-指令-v-on
        
    
    
        

v-if /v-show

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




    
    
    
    Vue-指令-v-if与v-show
    


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

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

v-for

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

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

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


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

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

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


接下来,准备如下代码:



    
    
    
    Vue-指令-v-for
    


    
然后分别编写2种遍历语法,来遍历数组,展示数据,代码如下:
{{addr}}

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

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

JavaWeb—vue(基础知识)_第2张图片

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

  • 分析:

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

  • 步骤:

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

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

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

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

  • 代码实现:




    
    
    
    Vue-指令-案例
    


    
    
编号 姓名 年龄 性别 成绩 等级
{{index + 1}} {{user.name}} {{user.age}} {{user.score}} 优秀 及格 不及格

 生命周期

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

JavaWeb—vue(基础知识)_第3张图片

你可能感兴趣的:(JavaWeb,vue.js,javascript,前端)