vue基础

一、发展背景

1.网站交互方式的发展

1.1 经典的多页面==》交互方式

☞前后端融合在一起，开发和维护效率方式差

☞用户体验一般，点击刷新跳转，等待时间长，每个页面都需要加载

1.2 现代式的单页面==> 所有的交互都是在一个页面，不存在刷新

☞开发方式好，采用前后端分离的开发模式

        ▪服务端不关心界面，只关心数据

        ▪客户端不关心数据库和数据操作，只关心通过接口拿到的数据和服务端交互，处理界面

☞用户体验好，就像是原生客户端软件一样，点击刷新跳转，等待时间不长

☞单界面应用开发技术复杂，所以出现了很多框架

        ▪Angular

        ▪Rect

        ▪Vue

2.前后端分离开发模式

2.1 服务端工作

        需求分析

        设计数据库

        接口设计

        接口开发

2.2 前端工作

        需求分析

        写页面

        页面写好功能

        通过接口和服务端进行交互

二、Vue基础

1.概念

        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

        框架：完整的项目解决方案，对项目的入侵性较大，项目如果需要更换框架，则需要重新架构整个项目。

2.vue使用教程

2.1 引入与实例化

        可通过以下方式进行引入：

或者

也可以将文件下载到本地之后，在通过src来引入。

实例化

html代码

    
{{msg}}

js代码

new Vue({
    el:"#app",   //app为所绑定模板的id
    data(){
        return {
            msg:"这是一条数据"
        }
    }
})

2.2指令与模板

指令是联系模板与vue实例的桥梁，有以下特点：

        以v开头，值预期为JavaScript单行表达式；

        可以渲染实例的值：v-text=“msg”;

        数学运算：v-text=“2+3”;

        使用js表达式：v-text=“msg.length”;

        文本需要加单引号：v-text=“'我在中国'+msg”。

2.3 文本渲染指令

① {{vue的data}}

② v-text 文本渲染指令

③ v-html html渲染指令

2.4 条件渲染指令

① v-if

② v-else

③ v-else-if

④ v-show 以css的方式隐藏元素，元素频繁切换用v-show，少量切换用v-if

2.5 遍历指令

{{index+1}}-->{{item}}

① v-for:item为自定义名称，代表遍历的元素，index代表遍历的下标，list代表被遍历的数据

② v-bind：key，为了让vue更好的优化渲染列表，其值是唯一的

2.6 事件

可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript

v-on:缩写为@，绑定事件

事件参数

@click=“sayNum” 默认传入事件对象

@click=“sayNum（3）”传入实参3

@click=“sayNum（$event,3）”传入事件对象和实参3

事件修饰符

        .stop 阻止事件冒泡

        .prevent 阻止默认事件

        .once 只响应一次

按键修饰符 键盘事件keydown,keyup

        .enter

        .up

        .down

        .space

        .esc

系统修饰符

        .ctrl

        .shift

鼠标修饰符

        .left

        .right

        .middle

2.7 v-model表单绑定

v-model="num"：

单行文本框，多行文本框：把数据和表单的值绑定在一起

复选框：

        1个复选框：默认值，选中为true，未选中false

        多个复选框：值 ，绑定的数组动态添加/移除当前元素的value值

单选：选中为true，未选中false

下拉select：选中的option的value值

表单修饰符：

        .lazy change事件触发数据更新

        .number 强制转化为数字

v-model="num"为以下两个数据的简写

        ：value="num"

        @input="num=$event.target.value"

2.8 计算computed

        从现有数据计算出新的数据（只读）

2.9 监听watch

监听data，只要data发生变化，就运行handler

监听data的类型

        值类型 数值、字符串、undefined、布尔，案例如下：

        引用类型 数组、对象等，需要加deep选项，案例如下：

2.10 类绑定 ：class

文本 :class="active" 没有加单引号的active是一个变量不是字符串

对象 :class="{'active':flag}"

数组 :class="list"，案例如下图：

2.11  行内样式绑定 ：style

css属性驼峰式写法

：style="{color:'red',fontSize:'24px'}"，案例如图：