Vue框架学习（一）

Vue是什么？

• Vue是一个使用JavaScript开发的用于构建用户界面的渐进式框架

什么是渐进式框架？

• 可以由简单至困难的将其添加于项目

Vue的特点

1. 双向数据绑定
2. MVVM模式
3. 数据驱动视图更新
4. 开发者只注重操作数据，不进行DOM操作

MVVM开发模式

• M ----> model（数据模型）
• V ----> view（视图）
• VM ----> （处于数据与视图之间的中间件，可以根据数据的变化更新视图，或视图变化更新数据）

创建第一个Vue项目

打开cmd命令窗口，输入以下指令：（需先安装node及npm）

• 方式一：
  1. npm init vue@latest 初始化vue项目
  2. npm i 安装依赖
  3. npm run dev 运行项目
• 方式二：
  1. npm install -g @vue/cli 全局安装Vue脚手架
  2. vue create my-project 创建Vue项目
• 方式三：
  1. vue ui 打开vue图形化界面进行项目构建

Vue项目文件目录

（此处以方式一所创建项目为例）

• node_modules ----> 项目依赖包
• public ----> 公共文件（图标等…）
• src ----> 代码目录（主要修改该目录下文件）
  • assets ----> 静态文件，存放css样式，图片等…
  • components ----> 组件目录
  • App.vue ----> 根组件
  • main.js ----> 入口文件，根组件被导入到此文件，然后挂载到index.html中指定元素
• index.html ----> 单页面应用的唯一HTML文件
• package.json ----> 存放项目的基本信息，项目名称，版本，项目依赖包等…

插值表达式

• vue中使用{{ 变量 }} 将变量插入元素内容中

Vue内置指令

• v-for：循环渲染（列表渲染）

  • 依靠数组或可遍历对象来渲染元素，根据数组的长度，渲染指定个数的元素

• 为什么使用Key属性？

  • key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，vue会使用一种最大限度减少动态元素并且尽可能尝试就地修改/复用相同类型元素的算法；
  • 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素
  • 在进行插入或者重置顺序时，使用key属性可以让diff算法更高效，提高渲染效率.

• v-bind （属性绑定）

  • 在组件中，如果一个标签的属性使用了一个变量而不是字符串，则需要使用v-bind进行属性与变量的绑定，此指令可简写为:属性="变量"

• v-model（双向数据绑定）

  • 常用于表单的input框，作用是将input的value值与data中的变量进行双向数据绑定，一方发生改变，另一方会随之改变，这也是vue的特点----数据可以视图视图传向数据，反之也可

• v-on（事件绑定）

  • 用于为标签添加事件（可简写为@事件类型 = "事件回调"）

在上一个例子中，我们为input添加了一个onchange事件，用于打印data的值

• v-if（条件渲染）

  • 用于在某些条件达成时，才对DOM进行渲染的场景下，本质是对DOM的添加和移除,搭配v-else及v-else-if使用，表示其他条件分支

• v-show（条件显示）

  • 类似于v-if的作用，其不同之处在于，v-show的本质是通过控制元素的display属性来控制元素的隐藏与显示
  • 因此与v-if对比，v-show的性能开销较小
  • 在频繁进行切换的场景，建议使用v-show

• v-html 与 v-text

  • 此二者作用类似于DOM节点的innerHTML属性与innerText属性

• 动态绑定class

  • :class="{类名1：条件1，类名2：条件2}"，当条件为真时，为元素添加对应的类名，从而实现通过数据的改变控制样式的切换

通过对内置指令的学习，可以感受到，vue框架不需要我们进行DOM的操作，只去关心数据的操作，以数据的变化引起视图的改变，这一改变，不仅提高了开发效率，还减少了频繁操作DOM的性能开销，这正是vue框架的核心 ----> 数据驱动视图更新

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！