Vue 如何快速上手

目录

1. Vue 是什么 (概念)

1.1. Vue 的两种使用方式

1.2. 优点

1.3. 缺点

2. 创建 Vue 实例,初始化渲染

2.1. 步骤(核心步骤 4步)

2.2. 练习——创建一个Vue实例

3. 插值表达式 {{  }}

3.1. 介绍

3.2. 作用

3.3. 语法

3.4. 注意点

3.5. 练习——插值表达式

 4. Vue 响应式特性

4.1. 数据的响应式处理

4.2. 如何访问或者修改data中的数据, 最终会被添加到实例上

4.3. 练习——如何访问或者修改data中的数据


 

1. Vue 是什么 (概念)

  • Vue 是一个用于① 构建用户界面 的 ②渐进式 ③框架

①构建用户界面:基于数据动态渲染出用户看到的页面

 

②渐进式:循序渐进的学习

③框架:一套完整的项目解决方案

1.1. Vue 的两种使用方式

① Vue 核心包开发

  • 场景:局部 模块改造

② Vue 核心包 与 Vue 插件 工程化开发

  • 场景:整站 开发

1.2. 优点

  • 大大提升开发效率 (70%↑)

1.3. 缺点

  • 需要理解记忆规则 → 官网

 

2. 创建 Vue 实例,初始化渲染

2.1. 步骤(核心步骤 4步)

  • 准备容器

Vue所管理的范围

  • 引包 (官网) - 开发版本 / 生产版本

开发版本:<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

注:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

  • 创建 Vue 实例 new Vue()

一旦引入 VueJS核心包,在全局环境,就有了 Vue 构造函数

  • 指定配置项 → 渲染数据

配置项介绍:

① el 指定挂载点 ——> 通过 el 配置选择器,指定 Vue 管理的是哪个盒子

② data ——> 提供数据

2.2. 练习——创建一个Vue实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>

    <!-- 
    创建Vue实例,初始化渲染
    1. 准备容器 (Vue所管理的范围)
    2. 引包 (开发版本包 / 生产版本包) 官网
    3. 创建实例
    4. 添加配置项 => 完成渲染
    -->

    <!-- 不是Vue管理的范围 -->
    <div class="box2">
      box2 -- {{ count }}
    </div>
    <div class="box">
      box -- {{ msg }}
    </div>
    -----------------------------------------------------
    <!-- Vue所管理的范围 -->
    <div id="app">
      <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
      <h1>{{ msg }}</h1>
      <a href="#">{{ count }}</a>
    </div>

    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
      // 一旦引入 VueJS核心包,在全局环境,就有了 Vue 构造函数
      const app = new Vue({
        // 通过 el 配置选择器,指定 Vue 管理的是哪个盒子
        el: '#app',
        // 通过 data 提供数据
        data: {
          msg: 'Hello Vue2',
          count: 666
        }
      })
    </script>

  </body>
</html>

 

3. 插值表达式 {{  }}

3.1. 介绍

  • 插值表达式是一种 Vue 的模板语法

3.2. 作用

  • 利用表达式进行插值,渲染到页面中

表达式:是可以被求值的代码,JS引擎会将其计算出一个结果

3.3. 语法

  • {{ 表达式 }}

3.4. 注意点

  • 使用的数据必须存在 (data)

  • 支持的是表达式,而非语句,比如:if for ...

  • 不能在标签属性中使用 {{ }} 插值

3.5. 练习——插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  
<!-- 
  插值表达式:Vue的一种模板语法
  作用:利用 表达式 进行插值渲染
  语法:{{ 表达式 }}

  注意点:
    1. 使用的数据要存在
    2. 支持的是表达式,不是语句  if  for
    3. 不能在标签属性中使用 {{ }}
 -->
<div id="app">
  <p>{{ name }}</p>
  <p>{{ name.toUpperCase() }}</p>
  <p>{{ name + '你好' }}</p>
  <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
  <p>{{ friend.name }}</p>
  <p>{{ friend.descript }}</p>

  <!-- ----------------------- -->
  <!-- <p>{{ hobby }}</p> -->
  <!-- <p>{{ if }}</p> -->
  <!-- <p title="{{ nickname }}">我是p标签</p> -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: 'tom',
      age: 18,
      friend: {
        name: 'jack',
        descript: '热爱学习 Vue'
      }
    }
  })
</script>

</body>
</html>

 

 4. Vue 响应式特性

4.1. 数据的响应式处理

  • 响应式:数据变化,视图自动更新

聚焦于数据 → 数据驱动视图

使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可

4.2. 如何访问或者修改data中的数据, 最终会被添加到实例上

  • 访问数据: "实例.属性名"

  • 修改数据: "实例.属性名" = "值"

4.3. 练习——如何访问或者修改data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<div id="app">
  <h1>{{ msg }}</h1>
  <a href="#">{{ count }}</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      // 响应式数据 → 数据变化了,视图自动更新
      msg: '你好,Vue2',
      count: 666
    }
  })

  // data中的数据,是会被添加到实例上
  // 1. 访问数据  实例.属性名
  console.log(app.msg)
  console.log(app.count)
  // 2. 修改数据  实例.属性名 = 新值
  app.msg = '你好,前端'
</script>
</body>
</html>  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/515616.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

哈哈哈哈哈

欢迎使用Markdown编辑器 你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语法知识。 222 我们对Markdown编辑器进行了一些功能拓展与语法支持&#xff0c;…

大创项目推荐 深度学习 python opencv 火焰检测识别

文章目录 0 前言1 基于YOLO的火焰检测与识别2 课题背景3 卷积神经网络3.1 卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV54.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 数据集准备5.1 数…

文件管理--fscanf,fread,fwrite和fprintf

fprintf函数&#xff1a;对于fprintf函数&#xff0c;它和printf一样&#xff0c;但是它的表达式为&#xff1a;int fprintf ( FILE * stream, const char * format, ... );和printf的很相似&#xff0c;但有不一样。它是格式化输出函数&#xff0c;代码为&#xff1a; #includ…

模拟退火遗传算法GASA-附MATLAB代码

模拟退火遗传算法&#xff08;Simulated Annealing Genetic Algorithm&#xff0c;SAGA&#xff09;结合了模拟退火算法&#xff08;Simulated Annealing&#xff0c;SA&#xff09;和遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;的优点&#xff0c;用于解…

数字化导师坚鹏:招商银行数字化转型的4次模式升级与5大关键举措

招商银行数字化转型的4次模式升级与5大关键举措 招商银行数字化转型取得了较大的成功&#xff0c;从目前的财务数据来看&#xff0c;招商银行在数字化转型领域已经成为国内最优秀的股份制银行。招商银行是如何取得数字化转型成功的&#xff1f;从招商银行数字化转型的4次模式升…

先进电气技术 —— 控制理论之控制与扰动的战争

一、与扰动的斗争催生控制理论 在控制理论中&#xff0c;可以说“Identification&#xff08;辨识&#xff09;”、“Observe&#xff08;观测&#xff09;”、“Estimate&#xff08;估计&#xff09;”和“Control&#xff08;控制&#xff09;”这四个核心概念都是为了“消…

Centos7安装Docker与Docker-compose【图文教程】

个人记录 查看一下系统是否已经安装了Docker yum list installed | grep docker如下图代表没有安装Docker 卸载已有Docker yum remove docker docker-common docker-selinux docker-engine切换目录 cd /etc/yum.repos.d/查看当前目录所有的镜像源 ll安装yum-util与devi…

动态规划刷题(算法竞赛、蓝桥杯)--摆花(线性DP)

1、题目链接&#xff1a;[NOIP2012 普及组] 摆花 - 洛谷 #include <bits/stdc.h> using namespace std; const int mod1e67; const int N110; int n,m; int a[N],f[N][N]; //f[n][m]表示前n种花摆m盆的方案数 int main(){scanf("%d %d",&n,&m);for(in…

基于 Docker 的 python grpc quickstart

工作之后一直使用的 RPC 框架是 Apache 的 thrift&#xff0c;现在发现 grpc 更流行&#xff0c;所以也要学习一下&#xff0c;先来简单的跑一下 demo。在本地安装运行也很方便&#xff0c;不过因为有了 docker&#xff0c;所以在 docker 里面安装运行隔离性更好&#xff0c;顺…

并发线程基础第八篇

目录 线程池 自定义线程池 步骤1&#xff1a;自定义拒绝策略接口 步骤2&#xff1a;自定义任务队列 步骤3&#xff1a;自定义线程池 步 骤 4&#xff1a;测 试 ThreadPoolExecutor 线程池状态 构造方法 工作方式 newFixedThreadPool newCachedThreadPool newSingleTh…

算法day30 回溯6

332 重新安排行程 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&#xff0c;所以该行程必须从 JFK …

【网站项目】果蔬经营平台系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

红黑树的性质与操作:吸收红结点及其对树结构的影响

红黑树的性质与操作&#xff1a;吸收红结点及其对树结构的影响 1.红黑树的基本性质2.吸收红结点的过程2.1黑色结点的度2.2 叶结点深度 3.伪代码实现4. C语言代码实现5. 结论 红黑树作为一种高效的自平衡二叉搜索树&#xff0c;在计算机科学中扮演着重要的角色。它通过一系列复杂…

C++理解std::move和转发(std::forward)

理解 std::move 标准库move函数是使用右值引用的模板的一个很好的例子。 幸运的是&#xff0c;我们不必理解move所使用的模板机制也可以直接使用它。 但是&#xff0c;研究move是如何工作的可以帮助我们巩固对模板的理解和使用。 我们注意到&#xff0c;虽然不能直接将一个…

【C语言】linux内核pci_register_driver

一、注释 以下是对源代码中英文注释的中文翻译&#xff0c;可能会略去一些编程上的专有词汇&#xff08;例如函数名、类型名等&#xff09;&#xff0c;以使翻译更易理解。 // drivers\pci\pci-driver.c /*** __pci_register_driver - 注册一个新的PCI驱动* drv: 需要注册的驱…

【QT入门】 无边框窗口设计综合运用之自定义标题栏带圆角阴影的窗口

往期回顾&#xff1a; 【QT入门】 自定义标题栏界面qss美化按钮功能实现-CSDN博客 【QT入门】 无边框窗口设计之实现窗口阴影-CSDN博客 【QT入门】 无边框窗口设计之实现圆角窗口-CSDN博客 【QT入门】 无边框窗口设计综合运用之自定义标题栏带圆角阴影的窗口 一、最终效果 二、…

数据结构进阶篇 之 【交换排序】(冒泡排序,快速排序递归、非递归实现)

当你觉的自己不行时&#xff0c;你就走到斑马线上&#xff0c;这样你就会成为一个行人 一、交换排序 1.冒泡排序 BubbleSort 1.1 基本思想 1.2 实现原理 1.3 代码实现 1.4 冒泡排序的特性总结 2.快速排序 QuickSort 2.1 基本思想 2.2 递归实现 2.2.1 hoare版 2.2.2 …

开发环境->生产环境

1、数据迁移 不涉及docker # 以数据库用户导出数据 mysqldump -h 192.168.1.168 -P 3307 -u abragent -pabragebb17 abragent > abragent.sql# 以root用户导出数据 mysqldump -h 192.168.1.168 -P 3307 -u root -p8d3Ba1b abragent > abragent.sql 涉及docker …

java自动化学习-IntelliJ IDEA新建项目

1、新建项目 2、新建类&#xff0c;右键”src” > “new” >”Java Class” 3、重命名类名

【史上最细教程】项目本地切换Nexus私服步骤

文章目录 1.上传所有jar/pom到私服仓库方式1&#xff1a;Nexus手动上传方式2&#xff1a;mvn deploy命令上传 2.替换项目中所有pom.xml上传下载地址为私服仓库3.替换本地maven setting.xml配置文件4.下载上传验证操作下载jar出现的问题mvn deploy上传jarmvn deploy上传执行脚本…