初识VUE

文章目录

    • Vue是什么
    • 1.创建一个Vue实例
    • 2.插值表达式'{{ }}'
    • 3.Vue的响应式特性
    • 4.开发者工具的安装

Vue是什么

概念:Vue是一个用于构建用户界面的渐进式框架

①构建用户界面:基于数据渲染出用户看到的界面
在这里插入图片描述

②渐进式:循序渐进
在这里插入图片描述

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

1.创建一个Vue实例

在这里插入图片描述

<body>
<!--创建Vue实例,初始化渲染1.准备容器(Vue所管理的范围)2.引包(开发版本/生产版本)官网3.创建实例4.添加配置项=>完成渲染 -->
<div class="box2"></div>
<div class="box"></div>
<div id="app"><!--这里将来会编写一些用于渲染的代码 --><!--一个插值表达式的语法:{{...}},前后要有空格--><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div> 
<!--引入的是开发版本的包  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>
//一旦引入Vuejs核心包,在全局环境,就有了 Vue 构造函数
const app=new Vue({//通过el配置选择器,指定Vue所管理的是哪个盒子el:'#app',//通过date提供数据data:{msg:'hello 黑马',count:666}
})
</script>

2.插值表达式’{{ }}’

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

<body>
<h3>{{ title }}</h3>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{ age>=18? '成年':'未成年' }}</p>
<p>{{ obj.name }}</p>
</body>

3.注意点:
(1)使用的数据必须存在(data)

<p>{{ hobby }}</p>

(2)支持的是表达式,而非语句,比如2:if, for…

<p>{{ if }}</p>

(3)不能在标签属性中使用{{ }}插值

<p title="{{ username }}">我是p标签</p>
<body>
<!--插值表达式;Vue的一种模板语法作用:利用 表达式 进行插值渲染 语法:{{ 表达式 }}注意点:1,使用的数据要存在2.支持的形式,不是语句if for3.不能在标签中使用{{  }}
--><div id="app">{{ nickname }}{{ nickname.toUpperCase }}<!--将nickname里面的内容全都转成大写-->{{ nickname + '你好' }}{{ age>=18 ? '成年':'未成年' }}{{ friend.name }}{{ friend.desc }}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el:'#app',data:{nickname:'tony'age:18,//成年friend:{name:'jepson',desc:'热爱学习 Vue'}})</script>
</body>

3.Vue的响应式特性

在这里插入图片描述

4.开发者工具的安装

在第三部分中,是通过控制台修改数据的,但我们可以用开发者工具,更方便快捷的调试修改数据(极简插件)

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

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

相关文章

Flask用于生产环境

Flask是一个用Python编写的轻量级Web应用框架&#xff0c;可以用于开发和部署Web服务。要安装Flask&#xff0c;您需要以下步骤&#xff1a; - 安装Python和pip&#xff0c;如果您还没有的话。 - 创建一个虚拟环境&#xff0c;以便隔离您的Flask应用程序和其他Python项目。 - …

MySQL经典面试题

目录 1、查询课程名称为“数据库”&#xff0c;且分数低于60分的学生姓名和分数 2、对所有性别为“女”的学生&#xff0c;同时课程名为“高等数学”的分数统一加5 3、删除姓名为“张翰”&#xff08;学号1&#xff09;课程名为“数据库”的课程成绩 4、统计2021年11月每天…

6.4.4释放音频

6.4.4释放音频 许多Flash动画里的音乐或歌曲非常好听&#xff0c;能不能在没有源文件的情况下把里面的声音文件取出来呢&#xff1f;利用Swf2VideoConverter2可以轻松做到这一点。 1&#xff0e;单击“添加”按钮&#xff0c;在弹出的下拉菜单中选择“添加文件”&#xff0c;…

金蝶云星空表单插件获取单据体数据

文章目录 金蝶云星空表单插件获取单据体数据 金蝶云星空表单插件获取单据体数据 使用标识报错 var thisEntry this.View.Model.DataObject["FEntity"] as DynamicObjectCollection;应该使用实体属性 var thisEntry this.View.Model.DataObject["BillEntry&q…

搜索经典题——填充 9*9矩阵

题目&#xff1a;给定一个九行九列矩阵&#xff0c;填充矩阵元素&#xff0c;要求&#xff1a; 1、每一行每一列&#xff0c;每个小九宫格&#xff08;图片画粗的地方就是&#xff09;不能包含相同元素 2、每一行&#xff0c;每一列&#xff0c;每个小九宫格均会完整出现1-9的数…

面试题目,你对前端工程化的了解

前端工程化是通过工具和流程来提高软件开发效率、降低维护成本以及改善项目可维护性的方法。在前端领域&#xff0c;前端工程化通常包括以下方面内容 版本控制 使用 git 来管理代码的版本&#xff0c;追踪变更&#xff0c;协作开发等项目脚手架 使用项目的脚手架进行项目的初始…

【Python爬虫】项目案例讲解,一步步教你爬取淘宝商品数据!

前言 随着互联网时代的到来&#xff0c;人们更加倾向于互联网购物&#xff0c;某宝又是电商行业的巨头&#xff0c;在某宝平台中有很多商家数据&#xff0c;今天带大家使用pythonselenium工具获取这些公开的商家数据 环境介绍&#xff1a; python 3.6pycharmseleniumcsvtime…

SpringBoot自动装配原理及分析

一、什么是自动装配 在使用SpringBoot的时候&#xff0c;会自动将Bean装配到IOC容器中。例如我们在使用Redis数据库的时候&#xff0c;会引入依赖spring-boot-starter-data-redis。在引入这个依赖后&#xff0c;服务初始化的时候&#xff0c;会将操作Redis需要的组件注入到Ioc…

vue3 项目中 arguments 对象获取失败问题

问题 在 vue3 项目中 获取到的 arguments 对象与传入实参不符&#xff0c;打印出函数中的 arguments 对象显示如下&#xff1a; 原因 作者仔细回看代码才发现&#xff0c;自己一直用的是 vue3 的组合式写法&#xff0c;函数都是箭头函数&#xff0c;而箭头函数不存在 argumen…

故障诊断传感器的位置会影响振动信号分类的精度吗?

问题描述&#xff1a;故障诊断传感器的位置会影响振动信号分类的精度吗&#xff1f; 问题解答&#xff1a; 是的&#xff0c;故障诊断中传感器的位置确实可能会影响振动信号分类的精度。 首先&#xff0c;传感器的位置决定了能够采集到的振动信号的特性。如果传感器靠近故障…

cetos7搭建部署k8s 版本1.28

主机分配 内存最少是4G cpu个数最少两个 IP内存CPU主机名192.168.231.12044K1 192.168.231.12144K2192.168.231.12244K3 关闭防火墙 systemctl stop firewalled 关闭swap vim /etc/fstab 设置主机名称 hostnameset 安装docker 三个主机 初始化集群 在mas…

1432 - 走出迷宫的最少步数-广度优先搜索BFS

代码 #include<bits/stdc.h> using namespace std; char a[51][51]; int r,c; int fx[4]{0,0,1,-1}; int fy[4]{1,-1,0,0}; int tx,ty; struct Node{int x,y,step; }; int bfs(int x,int y){a[x][y]#;queue<Node> q;q.push({x,y,1});while(!q.empty()){Node Curre…

第五篇:其他窗口部件 QAbstractButton

QAbstractButton QAbstractButton 类是按钮部件的抽象基类&#xff0c;提供了按钮的通用功能。它的子类包括标准按钮 QPushButton、工具按钮 QToolButton、复选框 QCheckBox和单选按钮 QRadioButton 等。 QPushButton QPushButton 提供了创建交互按钮的基本功能。它可以包含…

openssl3.2 - 官方demo学习 - smime - smenc.c

文章目录 openssl3.2 - 官方demo学习 - smime - smenc.c概述笔记END openssl3.2 - 官方demo学习 - smime - smenc.c 概述 读取X509证书, 用PKCS7加密明文(证书 明文 3DES_CBC), 保存为MIME格式的密文 openssl API的命名含义 BIO_new_file “new” a “file”, return a “…

开发安全之:Server-Side Request Forgery

Overview 函数 fsockopen() 将使用资源 URI 的用户控制数据启动与第三方系统的网络连接。攻击者可以利用此漏洞代表应用程序服务器发送一个请求&#xff0c;因为此请求将自应用程序服务器内部 IP 地址发出。 Details 当攻击者可以影响应用程序服务器建立的网络连接时&#xf…

css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效

css3javaScript实现一个左右钟摆-摇晃的红灯笼网页特效&#xff01;前天逛博客时无意中看见了&#xff0c;别人的博客顶部有一个会左右钟摆的摇晃的红灯笼&#xff0c;产生了想法&#xff0c;我也想给自己做一个&#xff0c;但是网上找了很多方案&#xff0c;都没有实现。终于在…

论文阅读笔记AI篇 —— Transformer模型理论+实战 (三)

论文阅读笔记AI篇 —— Transformer模型理论实战 &#xff08;三&#xff09; 第三遍阅读&#xff08;精读&#xff09;3.1 Attention和Self-Attention的区别&#xff1f;3.2 Transformer是如何进行堆叠的&#xff1f;3.3 如何理解Positional Encoding&#xff1f;3.x 文章涉及…

【C++入门到精通】智能指针 shared_ptr 简介及C++模拟实现 [ C++入门 ]

阅读导航 引言一、简介二、成员函数三、使用示例四、C模拟实现五、std::shared_ptr的线程安全问题六、总结温馨提示 引言 在 C 动态内存管理中&#xff0c;除了 auto_ptr 和 unique_ptr 之外&#xff0c;还有一种智能指针 shared_ptr&#xff0c;它可以让多个指针共享同一个动…

钉钉副总裁李智勇:AI超级助理,提升大模型时代生产力

微软比尔盖茨此前曾预言:“五年内&#xff0c;每个人都将拥有AI私人助理Agent&#xff0c;Agent将颠覆软件行业 。” 近日以来&#xff0c;在GPT store正式上线点爆情绪之后&#xff0c;无论国内外&#xff0c;Agent都是创业圈里炙手可热的新贵。一场关于Agent创业比拼大赛&am…

GitLab服务器忘记root密码处理方式

GitLab服务器忘记root密码处理方式 文章目录 GitLab服务器忘记root密码处理方式1. Gitlab查看用户id号1. 通过api接口查询2. 在Linux终端里直接通过curl命令查询 2. 进入GitLab数据库中查询并修改root密码 1. Gitlab查看用户id号 1. 通过api接口查询 接口查询地址&#xff1a;…