[01] Vue2学习准备

目录

    • vue理解
    • 创建实例
    • 插值表达式 {{}}
    • 响应式特性

vue理解

  • Vue.js 是一套构建用户界面的渐进式框架。

  • Vue 只关注视图层, 采用自底向上增量开发的设计。

  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

创建实例

  1. 准备容器
<div id="app"></div>
  1. 引包(开发版本 / 生产版本)
    • Vue2官网:Vue2官网
    • 引入的是开发版本:
    • <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  2. 创建vue实例 new Vue()
  3. 指定配置项—>渲染数据
    • el 指定挂载点
    • data 提供数据

完整示例:

<body><!-- 1.容器2.引包3.创建实例4.添加配置项 --><div id="app"><h1>{{msg}}</h1>{{count}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({//通过el配置选择器,指定盒子el: '#app',// data提供数据data: {msg: 'zhezhe',count: 11}})</script>
</body>

在这里插入图片描述

插值表达式 {{}}

  • 插值表达式是一种Vue的模板语法,我们可以用插值表达式渲染出Vue提供的数据
  1. 作用:利用表达式进行插值,渲染到页面中
    表达式:是可以被求值的代码,JS引擎会将其计算出一个结果

  2. 语法:{{ 表达式 }}

响应式特性

  • 简单理解就是数据变,视图对应变。
  • 如何访问和修改data中的数据
    • 访问数据: 实例.属性名
    • 修改数据: 实例.属性名= 值

在这里插入图片描述
在这里插入图片描述

另一种调试方法:


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式中I2C 相关的硬件问题汇总及死锁解决办法

本文主要介绍如何解决I2C设备硬件设计上的各种问题&#xff0c;希望对大家有所帮助&#xff01; 关于I2C协议详细的讲解&#xff0c;可以参考之前的推文&#xff1a;全面解析 I2C 通信协议 一般情况下&#xff0c; i2c 设备焊接没什么问题&#xff0c;按照设备手册一步步来&a…

Github 2024-02-15 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-15统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量TypeScript项目4Python项目2Solidity项目2Rust项目1JavaScript项目1Go项目1C项目1 Terraform: 以安全和可预测…

【研究生复试】计算机软件工程人工智能研究生复试——资料整理(速记版)——JAVA

1、JAVA 2、计算机网络 3、计算机体系结构 4、数据库 5、计算机租场原理 6、软件工程 7、大数据 8、英文 自我介绍 1. Java 1. 和 equals的区别 比较基本数据类型是比较的值&#xff0c;引用数据类型是比较两个是不是同一个对象&#xff0c;也就是引用是否指向同 一个对象&…

[职场] 优质简历怎么做 #学习方法#笔记

优质简历怎么做 简历是求职的“敲门砖”&#xff0c;直接影响着求职成败。然而&#xff0c;不少求职者对简历不太重视&#xff0c;认为简历就是写自己的经历。因此&#xff0c;在招聘现场&#xff0c;常会看到这样的简历&#xff1a;有的是从某招聘网站直接下载而来&#xff0c…

B3651 [语言月赛202208] 数组调整

题目描述 给出一个长度为 n 的数组&#xff0c;第 i 个数为ai​。 为了调整这个数组&#xff0c;需要将第 k 个数改变为 −ak​。 请你求出调整后的数组中所有数的和。 输入格式 输入共两行。 输入的第一行为两个整数 n,k。 输入的第二行为 n 个整数&#xff0c;第 i 个…

kali无线渗透之用wps加密模式破解出wpa模式的密码12

WPS(Wi-Fi Protected Setup&#xff0c;Wi-Fi保护设置)是由Wi-Fi联盟推出的全新Wi-Fi安全防护设定标准。该标准推出的主要原因是为了解决长久以来无线网络加密认证设定的步骤过于繁杂之弊病&#xff0c;使用者往往会因为步骤太过麻烦&#xff0c;以致干脆不做任何加密安全设定&…

基于FPGA的OFDM基带发射机的设计与实现

文章目录 前言一、OFDM描述二、本系统的实现参照 1.IEEE 802.11a协议主要参数2.不同调制方式与速率 3. IFFT映射关系4. IEEE 802.11a物理层规范5. PPDU帧格式三、设计与实现 1.扰码2.卷积编码与删余3.数据交织4.符号调制5.导频插入6.IFFT变换 7.循环前缀&加窗8.训练序列生成…

STM32-开发环境之MDK5

目录 一、MDK5的简介 二、MDK5的特点 三、MDK5的主要功能 四、MDK5的应用场景 五、KEIL5的安装 一、MDK5的简介 MDK5&#xff0c;全称为MDK-ARM Version 5&#xff0c;是由德国Keil公司开发的一款针对ARM Cortex-M系列微控制器的完整软件开发环境。它为嵌入式软件开发者提…

LocaSpace Viewer图新地球 4.4.9工程版授权

LocaSpace Viewer图新地球是一个独特的三维数字地球软件&#xff0c;它不用安装&#xff0c;且是一个轻量级的软件&#xff0c;永久授权激活&#xff0c;没有功能方面的限制&#xff0c;在这里&#xff0c;你可以根据需要进行各种操作&#xff0c;如获取多种在线地图资源&#…

Kubernetes安装部署 2

Kubeadm创建集群 如上所示&#xff0c;在阿里云的香港地域的ECS服务器上拉取下载Kubernetes官方提供的容器镜像 如上所示&#xff0c;在阿里云的香港地域的ECS服务器保存镜像到本地 Node A服务器的IP地址&#xff1a;192.168.0.130 端口号6443开放、部署Docker容器引擎、支持cr…

linux系统zabbix监控分布式监控的部署

分布式监控 服务器安装分布式监控安装工具安装mysql导入数据结构配置proxy端浏览器配置 zabbix server端监控到大量zabbix agent端&#xff0c;这样会使zabbix server端压力过大&#xff0c;使用zabbix proxy进行分布式监控 服务器安装分布式监控 安装工具 rpm -Uvh https://…

【C语言】简单贪吃蛇实现保姆级教学!!!

关注小庄 顿顿解馋૮(˶ᵔ ᵕ ᵔ˶)ა 新年快乐呀小伙伴 引言&#xff1a; 小伙伴们应该都有一个做游戏的梦吧&#xff1f;今天让小庄来用C语言简单实现一下我们的童年邪典贪吃蛇&#xff0c;顺便巩固我们的C语言知识&#xff0c;请安心食用~ 文章目录 贪吃蛇效果一.游戏前工作…

拿捏单链表

目录 引言 一&#xff1a;链表的定义 二&#xff1a;单链表的定义 三&#xff1a;单链表的增删查改 1.单链表增删查改及遍历的声明 注&#xff1a;在测试中创建指向头结点的指针plist 2.二级指针应用的说明 3.单链表的遍历 4.创建节点 5.单链表的插入 (1)头插 …

常见的JavaScript书写基本规范

1. 使⽤驼峰命名法&#xff08;camel case&#xff09;命名变量、函数和对象属性&#xff0c;例如&#xff1a; firstName , getUser&#xff0c;Data() , myObject.property 2. 使⽤⼤写字⺟开头的驼峰命名法&#xff08;Pascal case&#xff09;命名构造函数或类&#xff0…

防御保护--内容安全过滤

目录 文件过滤 内容过滤技术 邮件过滤技术 应用行为控制技术 DNS过滤 URL过滤 防火墙 ---- 四层会话追踪技术 入侵防御 ---- 应用层深度检测技术 深度包检测深度流检测 随着以上俩种的成熟与完善&#xff0c;提出了所谓的内容安全过滤 当然上网行为确实需要治理&…

相机图像质量研究(16)常见问题总结:光学结构对成像的影响--IRCUT

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

如何使用python用30天的时间写一个魂系2d游戏

如何使用python用30天的时间写一个魂系2d游戏 第1-3天&#xff1a;规划和设计第4-7天&#xff1a;搭建开发环境第8-14天&#xff1a;基础编程第15-21天&#xff1a;美术和资源集成第22-28天&#xff1a;游戏测试和优化第29-30天&#xff1a;打包和发布附加建议&#xff1a; 使用…

数据存储和信息安全解读

感恩遇见&#xff0c;你一出现&#xff0c;就是晴天&#x1f31e;2019年2月16日&#xff0c;5年纪念。 #2.1.3 存储和数据库 ##1.存储技术根据服务器类型&#xff0c;存储可以分为封闭系统的存储和开放系统的存储。封闭系统主要指大型机等服务器&#xff0c;而开放系统指基于操…

BDD - Python Behave 用户自定义配置文件

BDD - Python Behave 用户自定义配置文件 引言默认 behave.ini 配置文件自定义配置文件json 格式的配置文件ini 格式的配置文件 实例应用项目结构代码BDD/Features/user_data.feature 文件BDD/steps/user_data_steps.py 文件BDD/environment.py 文件默认配置文件 behave.ini自定…

精炼爆炸性新闻!OpenAI发布革命性AI视频生成模型Sora:实现长达60秒的高清视频创作「附AIGC行业系统搭建」

在人工智能领域&#xff0c;每一次技术革新都引领着未来的发展方向。OpenAI&#xff0c;作为全球领先的人工智能研究机构&#xff0c;再次证明了其在推动AI技术革新方面的领导地位。近日&#xff0c;OpenAI宣布推出了一款革命性的AI视频生成模型——Sora&#xff0c;这一大胆的…