Vue2基础一、快速入门

零、文章目录

Vue2基础一、快速入门

1、Vue 概念

(1)为什么学

  • 前端必备技能

  • 岗位多,绝大互联网公司都在使用Vue

  • 提高开发效率

  • 高薪必备技能(Vue2+Vue3)

image-20230705092512823

(2)Vue是什么

  • **概念:**Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架
  • 官网:https://v2.cn.vuejs.org/
  • 构建用户界面:基于数据渲染出用户可以看到的界面

1681875887026

  • **渐进式:**所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点

    • Vue的两种开发方式:

    • Vue核心包开发:场景:局部模块改造

    • Vue核心包&Vue插件&工程化:场景:整站开发

    image-20230705095852701

  • **框架:**就是一套完整的解决方案

    • 特点:有一套必须让开发者遵守的规则或者约束,学框架就是学习的这些规则
    • **优点:**大大提高开发效率
    • 库VS框架
      • 库:类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等
      • 框架:是一套完整的解决方案,实现了大部分功能,我们只需要按照一定的规则去编码即可。

    1681876620277

(3)Vue开发方式

  • 传统开发模式:基于html/css/js文件开发Vue

    image-20210228083641377

  • 工程化(脚手架)开发方式:在webpack环境中开发Vue,这是最推荐, 企业常用的方式

    image-20230628161206620

2、创建实例

(1)步骤说明

  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建Vue实例 new Vue()
  4. 添加配置项 => 完成渲染
    1. el:指定挂载点,选择器指定控制的是哪个盒子
    2. data提供数据

(2)代码演示

<!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. 创建实例 new Vue()
  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/dist/vue.js"></script>

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

</html>

3、插值表达式

(1)常规用法

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

  • 我们可以用插值表达式渲染出Vue提供的数据

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

  • 语法:{{ 表达式 }}

<!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的一种模板语法
  作用:利用 表达式 进行插值渲染
  语法:{{ 表达式 }}
 -->
    <div id="app">
        <p>{{ nickname }}</p>
        <p>{{ nickname.toUpperCase() }}</p>
        <p>{{ nickname + '你好' }}</p>
        <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
        <p>{{ friend.name }}</p>
        <p>{{ friend.desc }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc: '热爱学习 Vue'
                }
            }
        })
    </script>
</body>

</html>

(2)错误用法

1.在插值表达式中使用的数据 必须在data中存在
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式,而非语句,比如:if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4、响应式特性

(1)响应式是什么

  • 数据变化,视图自动更新
  • 使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可,不需要关心视图的更新

image-20230705132344822

(2)如何访问 和 修改 data中的数据

  • 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">
        {{ msg }} {{ count }}
    </div>

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

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

        // data中的数据,是会被添加到实例上
        // 1. 访问数据  实例.属性名
        console.log(app.msg)

        // 2. 修改数据  实例.属性名 = 新值
        app.msg = 'hello world ok'
    </script>

</body>

</html>

5、开发插件安装

(1)VSCode插件

  • VSCode插件安装:Vetur,VueHepler
  • VSCode相关知识请参考VSCode入门

image-20230628093901575

(2)Chrome浏览器插件

  • 下载插件

    • 通过谷歌应用商店安装(国外网站)

    • 极简插件下载(推荐):https://chrome.zzzmh.cn/

image-20230705143331078

  • 安装插件

    • Chrome浏览器输入chrome://extensions/,打开开发者模式

    • 把下载的插件直接拖进页面,即安装完成

image-20230705134152404

  • 使用插件

    • 安装之后可以F12后看到多一个Vue的调试面板

    • 可以在里面修改对象值调试代码

image-20230705142849726

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

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

相关文章

ARP协议(地址解析协议)详解

ARP协议&#xff08;地址解析协议&#xff09;详解 ARP协议的作用映射方式静态映射动态映射 ARP原理及流程ARP请求ARP响应 ARP协议报文首部 ARP协议的作用 ARP协议是“Address Resolution Protocol”&#xff08;地址解析协议&#xff09;的缩写。其作用是在以太网环境中&…

【李宏毅 DLHLP 深度学习人类语言处理 HW1】

李宏毅 DLHLP 深度学习人类语言处理 HW1 相关资料HW1 语音小白在网上没有找到这门课的作业分享&#xff0c;那就记录一下自己的作业吧。 相关资料 课程官网&#xff1a;https://speech.ee.ntu.edu.tw/~hylee/dlhlp/2020-spring.php 作业github代码1&#xff1a;https://githu…

给jupter设置新环境

文章目录 给jupternotebook设置新环境遇到的报错添加路径的方法 给jupternotebook设置新环境 # 先在anaconda界面新建环境 conda env list # 查看conda prompt下的有的环境变量 带星号的是当前活跃的 activate XXXX pip install ipykernel ipython ipython kernel install --u…

【机器学习】西瓜书学习心得及课后习题参考答案—第3章线性模型

过了一遍第三章&#xff0c;大致理解了内容&#xff0c;认识了线性回归模型&#xff0c;对数几率回归模型&#xff0c;线性判别分析方法&#xff0c;以及多分类学习&#xff0c;其中有很多数学推理过程以参考他人现有思想为主&#xff0c;没有亲手去推。 术语学习 线性模型 l…

Ubuntu /dev/loop<0..n>挂载的目录的分析

执行命令df -h lkmaoubuntu:~$ df -h Filesystem Size Used Avail Use% Mounted on udev 1.6G 0 1.6G 0% /dev tmpfs 391M 2.1M 389M 1% /run /dev/sda1 59G 30G 26G 54% / tmpfs 2.0G 0 2.0G 0% /dev/s…

Docker 安全 Docker HTTPS请求过程与配置

Docker 容器安全注意点 尽量别做的事 尽量不用 --privileged 运行容器&#xff08;授权容器root用户拥有宿主机的root权限&#xff09; 尽量不用 --network host 运行容器&#xff08;使用 host 网络模式共享宿主机的网络命名空间&#xff09; 尽量不在容器中运行 ssh 服务 尽…

十三章:使用图像级监督学习像素级语义关联性的弱监督语义分割

0.摘要 分割标签的不足是野外语义分割的主要障碍之一。为了缓解这个问题&#xff0c;我们提出了一个新颖的框架&#xff0c;根据图像级别的类别标签生成图像的分割标签。在这种弱监督的设置下&#xff0c;已知训练模型更倾向于分割局部有区别的部分&#xff0c;而不是整个物体区…

本地部署 Stable Diffusion XL 1.0 Gradio Demo WebUI

StableDiffusion XL 1.0 Gradio Demo WebUI 0. 先展示几张 StableDiffusion XL 生成的图片1. 什么是 Stable Diffusion XL Gradio Demo WebUI2. Github 地址3. 安装 Miniconda34. 创建虚拟环境5. 安装 Stable Diffusion XL Gradio Demo WebUI6. 启动 Stable Diffusion XL Gradi…

创建自己的docker python容器环境;支持新增python包并更新容器;离线打包、加载image

1、创建自己的docker python容器环境 参考&#xff1a;https://blog.csdn.net/weixin_42357472/article/details/118991485 首先写Dockfile&#xff0c;注意不要有txt等后缀 Dockfile # 使用 Python 3.9 镜像作为基础 FROM python:3.9# 设置工作目录 WORKDIR /app# 复制当前…

[语义分割] DeepLab v1网络(语义分割、信号下采样、空间上的不敏感性、LargeFOV、膨胀卷积、空洞卷积、MSc、Multi-Scale)

Semantic Image Segmentation with Deep Convolutional Nets and Fully Connected CRFs 论文地址&#xff1a;Semantic Image Segmentation with Deep Convolutional Nets and Fully Connected CRFs参考源码&#xff1a;https://github.com/TheLegendAli/DeepLab-Context DeepL…

ElementUI tabs标签页样式改造美化

今天针对ElementUI的Tabs标签页进行了样式修改&#xff0c;更改为如下图所属的样子。 在线运行地址&#xff1a;JSRUN项目-ElementUI tabs标签页样式改造 大家如果有需要可以拿来修改使用&#xff0c;下面我也简单的贴上代码&#xff0c;代码没有注释&#xff0c;很抱歉&#x…

React Native 0.72 版本,带来诸多更新

经过漫长的等待,React Native 终于迎来了0.72 版本,此处版本带来了Metro重要的功能更新、性能优化、开发人员体验的改进以及其他一些重要的变化。我们可以从下面的链接中获取此次版本更新的内容:0.72更新内容 一、Metro 新功能 众所周知,Metro 是 React Native 默认的 Jav…

TEE GP(Global Platform)功能认证实验室

TEE之GP(Global Platform)认证汇总 GP认证实验室主要面向功能认证、SE安全认证、TEE安全认证&#xff0c;对于TEE来说&#xff0c;则分为TEE功能认证和TEE安全认证。本文对功能认证相关实验室机构进行总结和介绍。 一、国内3家 二、国外3家 参考&#xff1a; GlobalPlatform …

从零开始学Docker(一):Docker的安装部署

前述&#xff1a;本次学习与整理来至B站【Python开发_老6哥】老师分享的课程&#xff0c;有兴趣的小伙伴可以去加油啦&#xff0c;附链接 Linux 环境&#xff1a;RockyLinux 9 版本管理 Docker引擎主要有两个版本&#xff1a;企业版&#xff08;EE&#xff09;和社区版&#…

go学习 4、复合数据类型

4、复合数据类型 数组、slice、map和结构体 如何使用结构体来解码和编码到对应JSON格式的数据&#xff0c;并且通过结合使用模板来生成HTML页面 数组和结构体是聚合类型;它们的值由许多元素或成员字段的值组成。数组是由同构的元素组成&#xff08;每个数组元素都是完全相同的…

Nautilus Chain 即将治理通证 NAUT ,生态发展进程加速

独特且优势明显的 Nautilus Chain 目前&#xff0c;行业内首个模块化底层 Nautilus Chain 已经上线主网&#xff0c;并且即将有超过 70 个应用原生部署在 Nautilus Chain 上。Nautilus Chain 本身是一个以 Layer3 为定位的区块链系统&#xff0c;其通过 Celestia 模块化底层来…

监控和可观察性在 DevOps 中的作用!

在不断发展的DevOps世界中&#xff0c;深入了解系统行为、诊断问题和提高整体性能的能力是首要任务之一。监控和可观察性是促进这一过程的两个关键概念&#xff0c;为系统的健康状况和性能提供有价值的可见性。虽然这些术语经常互换使用&#xff0c;但它们代表了理解和管理复杂…

解决IDEA的git非常缓慢方法

解决IDEA的git非常缓慢方法 xxxx\IDEA2021.1.3\IntelliJ IDEA 2021.1.3\bin

如何使用 Flatpak 在 Linux 上安装 ONLYOFFICE 桌面编辑器?

Flatpak 是一款与 Linux 发行版无关的软件实用工具&#xff0c;可用于在 Linux 上构建和分发桌面端应用。其可帮助您安装第三方 Linux 应用程序&#xff0c;无需安装库或处理依赖。 ONLYOFFICE 桌面版是什么 ONLYOFFICE 编辑器桌面版是一款全面的办公工具&#xff0c;提供了文…

firefox笔记-Centos7离线安装firefox

目前&#xff08;2023-03-22 16:41:35&#xff09;Centos7自带的firefox已经很新了是2020年的。主要原因是有个web项目&#xff0c;用2020年的firefox打不开。 发到互联网上是2023-07-24。 报错是js有问题&#xff0c;估计是搞前端的只做了chrome适应&#xff0c;没做firefox…
最新文章