Vue2到Vue3实战必备技能(一)

目录 前言 一、 Vue2脚手架搭建; 1.安装nodejs 2.全局安装vue-cli 3.创…

目录

前言

一、 Vue2脚手架搭建;

1.安装nodejs

2.全局安装vue-cli

3.创建vue项目

4.项目配置

5.运行项目

二、 Vue2基础语法和指令;

1.插值表达式;

2.v-text和v-html

3.v-model数据双向绑定

4.v-bind

5.v-if和v-show

6.v-for

7.v-on

7.1.事件修饰符:


前言

Vue概述:

Vue是一套用于构建用户界面的渐进式框架,易于上手,提高了开发效率。

Vue优点:

  • Vue是一个轻量级框架,只关注视图层;
  • v-model实现数据的双向绑定;
  • 操作虚拟DOM,加快浏览器的渲染效率;
  • 组件化,实现代码复用;
  • 简单易学,国人开发,中文文档。

一、 Vue2脚手架搭建;

1.安装nodejs

  • 下载地址:下载 | Node.js 中文网
  • 完成后,检验是否安装成功,输入 node -v,如果出现版本号,则说明安装成功。

2.全局安装vue-cli

  • 在命令行中输入 npm install -g vue-cli

  • 安装完成后,检验是否安装成功,输入 vue-V (注意:这里是大写的 “V”),如果出现版本号,则说明安装成功。

3.创建vue项目

  • 在命令行中输入 vue create 项目名

4.项目配置

  • 选择预设,在这里我们选择(Default ([Vue 2] babel, eslint))

5.运行项目

  • 切换到项目文件夹 cd 项目名

  • 运行项目 npm run serve


二、 Vue2基础语法和指令;

1.插值表达式;

语法: {{ 表达式 }}

示例代码:

2.v-text和v-html

概述:

  • ​v-text和v-html与插值表达式的作用基本是一样的,都是操控标签的内容区域信息
  • v-html和v-text没有闪烁问题(未加载出结果时,页面会显示 { undefined{} } )

语法:

区别:

  • v-html对html标签和普通文本内容都可以设置显示
  • v-text、{{ }} 只针对数据起作用

3.v-model数据双向绑定

概述:

v-model可以实现页面和数据的双向绑定,当数据发生改变,页面会随之变化,反之,页面变化了,数据也会改变

示例:

页面效果:

4.v-bind

概述:

  • v-bind 主要用于属性的绑定

示例:

5.v-if和v-show

概述:

  • v-if和v-show都可以动态显示DOM元素

示例:

页面效果:

区别:

  • v-if是动态的向DOM树内添加或者删除DOM元素;
  • v-show是通过设置DOM元素的display样式属性控制显隐;
  • v-if有更高的切换消耗而v-show有更高的初始渲染消耗。

6.v-for

概述:

  • 当需要将一个遍历数组或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用

语法:

  • item: 数组元素迭代的别名
  • index:当前元素的下标
  • items:数据源

示例:

  • key是为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一的key属性。

页面效果:

7.v-on

概述:

  • 给元素进行事件绑定,需要通过v-on:指令实现

语法:

示例:

页面效果:

7.1.事件修饰符:

  • stop:阻止冒泡(阻止事件向上级DOM元素传递)
  • prevent:阻止默认事件的发生
  • capture:捕获冒泡
  • self:将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
  • once:设置事件只能触发一次

语法:

示例:

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/4431.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部