跨越山河大海 终于与Vue相遇 作为前端最重要的技术栈之一 我早就听闻她的大名 是的 她一直就在这里 静静地等待着我的探索……

什么是Vue?

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架

它特别适用于开发单页应用（SPA），允许开发者通过声明式的方式构建交互式界面。Vue 的核心是响应式的数据绑定和组件化结构，使得开发者能够更容易地管理应用的状态和视图

怎么使用Vue?

1.准备容器(Vue所管理的范围)

2.引包

3.创建实例

4.添加配置项= >完成渲染

Vue的基本结构

通过el配置选择器 指定Vue管理的盒子区域

通过data提供数据 data中的数据 会被添加到实例上

通过methods添加方法 (所有methods中的函数,this都指向当前实例)

插值表达式

插值表达式是Vue的一种模版语法 利用表达式进行插值渲染

语法:{{ 表达式 }}

注意点:

使用的数据要存在 — 支持表达式 绝不能是JS中关键字 — 不能在标签属性中使用!!!

Vue常用指令

1.v-html

语法:v-html=”vue变量”

插入一段html片段 相当于innerHTML 可以解析标签

2.v-show / v-if

语法:v-if/v-show=’ (bool) ‘

都可以控制元素的显示与隐藏 但底层原理不同

v-show底层原理：切换 CSS 的 display: none 来控制显示隐藏

v-if  底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）

示例如下: 都显示时

都不显示时 v-show控制的盒子添加 display: none 属性 而v-if控制的盒子直接消失!

3.v-else和v-else-if

语法和v-if类似 需要紧挨着v-if使用

4.v-on

语法:v-on事件=’语句’ 可以简写为 @事件=’语句’

如图为实现按下 ‘+’ , ‘-‘ 控制计数器变化案例

这里的语句也可传入对应的函数方法以及参数 如图为一个简单的售货机案例

5.v-bind

动态设置html标签属性

语法:v-bind:src = ‘ ‘ 也可简化为 :src = ‘ ‘

6.v-for

基于数据循环 多次渲染整个元素

语法:v-for=”(item,index) in list” :key=”item.id”

这里的key很重要

是给元素添加的唯一标识  便于Vue进行列表项的正确排序复用

如图案例 实现了对数组进行操作再不断进行渲染

用id的独特性结合数组filter()方法筛选出”不要删除”的元素的新数组覆盖原有数组

7.v-model

给表单元素使用 双向数据绑定 可以快速获取设置表单元素内容

数据变化 视图自动更新

视图变化 数据自动更新

语法:v-model=”属性名”

综合案例-我的记事本

需求1: 在表单中输入待办事项 点击添加任务 加入下面记事本

需求2: 点击X号 删除任务

需求3: 在下方显示合计待办事项数目

需求4: 点击清空任务 让记事本消失

思路:

还是用数组来存放数据 用v-model和输入的任务数据绑定

用v-for渲染下拉框 并使用插值表达式渲染

methods中添加del() add() 和 clear() 方法 对应删除/添加/清空任务

点击相对应按钮 触发点击事件 传入对应函数

下面是各个函数的具体实现 都是对数组进行操作

del(id) 利用filter筛选 返回 删除了传入id对应的任务的数组

add() 给数组添加新的对象 对象包含 根据时间戳生成的特有id和绑定的表单的输入内容 (注意:输入值不能为空 若为空则发出提示并终止函数运行)

clear() 直接将数组置为空 在下拉框标签中设置v-show=”list.length>0″ 即可控制清楚后表单不显示(数组长度变为0了)

最后是合计 直接插值表达式就行了

与Vue初识 怦然心动

前路漫漫 吾心不变

^_^