vue新 学习 01

news2024/7/6 21:04:34

01.vue的安装于配置
首先这次从尚硅谷中学习的vue,要安装的ida是vscode,这里需要注意的是安装的版本是system版本的,否则有些功能就不能够实现。
安装vue的官方插件vue.devtools,这个会让vue的在浏览器上的测试变得很流畅很方便,这个是应该防火墙的原因不能够在谷歌的官方软件库中去下载,需要在百度中去搜索相关的插件信息,下载,6.0版本的插件是对应vue3.0的,本次项目用的是vue2.0,建议插件的版本在5.0左右比较好。
第三个,是导入js文件,这里是由于新学习的vue,没有去用npm来安装,这里导入的vue.js和vue.min.js文件。注意,在html文件中去导入的js文件,是vue.js文件,不是vue.min.js文件,vue.devtools插件只识别vue.js文件。
02.vue对象的创建
原理:
vue对象就是view model,model中存放来自后台和前端的各种数据,这里可以认为是数据存放的地方,而html上的各种标签是可以让用户看见的,可以认为是view。model中的数据,先存放在vue对象的data等相关属性中,然后html中各种命令来去获取vue中的相关属性,实现数据的传输。
在这里插入图片描述
03.vue的配置对象
也就是Vue({})中的那个大括号,在es6中大括号表示的是一个对象。现有阶段是有两个属性:el和data,el表示当前vue实例为哪个容器服务。(关系是一一对应的),data的格式类似于es6中的对象,其中的属性和数据是通过key,value这种键值对来实现的。
在这里插入图片描述
vue实例中的属性相关说明:

01 el属性的测试:(容器和vue实例是一一对应的关系)
多个同class的容器和一个对应的vue实例。
在这里插入图片描述

在这里插入图片描述
在排版中,排在前面的容器会先绑定,之后的同class容器就不会再去绑定相关的vue实例了。


一个容器对应多个vue实例
在这里插入图片描述

结果:
在这里插入图片描述
vue实例中排在前面的先绑定容器,绑定之后不会发生容器改变再去绑定其他的vue实例。

02 data
key的值如果出现了两个相同的,会怎么办?
会最后一个key覆盖。
在这里插入图片描述
在这里插入图片描述


data中的key配合vue的模版语句应用,此时vue的模版语句在标签的内容模块中,不在标签内部的属性那边:
在这里插入图片描述
结果:
在这里插入图片描述
总结:
在这里插入图片描述
key与标签属性进行绑定,获取值
vue的命令是v-bind
01.先测试创建一个vue对象,其中有key=url,表示可以访问的地址。
view中href中去直接用vue中的url
在这里插入图片描述

结果:
在这里插入图片描述
用v-bind命令:

在这里插入图片描述
v-bind:href=url 的url会被当做表达式去执行。
结果:
在这里插入图片描述

换个方式:
在这里插入图片描述
结果:

在这里插入图片描述

总结:
在这里插入图片描述

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

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

相关文章

Linux CentOS快速安装VNC并开启服务

以下是在 CentOS 上安装并开启 VNC 服务的步骤: 安装 VNC 服务器软件包。运行以下命令: sudo yum install tigervnc-server 输出 $ sudo yum install tigervnc-server Loaded plugins: fastestmirror, langpacks Repository epel is missing name i…

UE4 Cesium for unreal 零碎学习笔记

1、要让对应目标移动到对应经纬度海拔上的前提是,先添加一个UCesiumGlobeAnchorComponent组件,组件内封装的有MoveToLongitudeLatitudeHeight函数,用于将组件的owner(拥有者)设置到对应经纬度高上去 2、Problem&#…

MySQL数据库关于表的一系列操作

MySQL中的数据类型 varchar 动态字符串类型(最长255位),可以根据实际长度来动态分配空间,例如:varchar(100) char 定长字符串(最长255位),存储空间是固定的,例如&#…

mysql用户添加

一、连接mysql服务 mysql -u root -p 二、查询用户表 use mysql ; SELECT User, Host FROM mysql.user; 三、新增用户并授权 Create USER dev4rw% IDENTIFIED WITH mysql_native_password BY 新密码; GRANT ALL PRIVILEGES ON *.* TO dev4rw% WITH GRANT OP…

MySQL-Explain简版

文章目录 前言1.什么是explain2.explain有什么用3.explain怎么用理解explain的列代表的意思id列select_type列table列partitions列type列possible_keys列key列key_len列ref列rows列Extra列 前言 没必要记吧,忘了直接查 1.什么是explain 在select语句之前增加explai…

2023-7-26-第二十三式解释器模式

🍿*★,*:.☆( ̄▽ ̄)/$:*.★* 🍿 💥💥💥欢迎来到🤞汤姆🤞的csdn博文💥💥💥 💟💟喜欢的朋友可以关注一下&#xf…

Apache Dubbo CVE-2021-36162 挖掘过程

01 漏洞背景 发现该漏洞的起因是在分析 CVE-2021-30181 的脚本注入补丁的时候,意外发现了几个已被修复的 yaml 反序列化漏洞,还以为是未公开的Nday,查询后发现其实对应的是 CVE-2021-30180 漏洞的修复代码。通过查看补丁可以知道&#xff0c…

uniapp使用echarts

uniapp使用echarts 1.下载资源包2.引入资源包3.代码示例注意事项 1.下载资源包 https://echarts.apache.org/zh/download.html 2.引入资源包 将资源包放入项目内 3.代码示例 <template><div style"width:100%;height:500rpx" id"line" ref&…

Docker--harbor Docker--registry 私有仓库部署与管理

官方组件registry搭建私有仓库 registry服务器设置 拉取 registry 镜像 docker pull registry 开启registries容器 docker run -d -v /data/registry:/var/lib/registry -p 5000:5000 --restartalways --name registry registry:latest 客户机设置 添加私有仓库地址 使用配置文…

【笔试强训选择题】Day30.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

前端学习——Vue (Day3)

生命周期 生命周期 & 生命周期四个阶段 Vue 生命周期函数 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"…

hdvp.

hdvp:外部函数文件&#xff0c;函数定义在hdvp中可以传输给任何hdev使用&#xff0c;即可以发给别人使用。同时允许对hdvp进行加密

力扣热门100题之轮转数组【中等】

题目描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6…

给el-table实现列显隐

用过若依的都知道&#xff0c;在使用el-table 时候&#xff0c;实现列显隐效果是要给每个列加v-if 判断的&#xff0c;这种代码过于繁琐&#xff0c;于是翻看el-table包的代码&#xff0c;调试后发现内部的【插入】和【删除】两个方法可以达到我们要的效果。 项目不提供源码&a…

周报230722

周报230722 日期范围&#xff1a;2023-07-19——2023-07-22 学习内容 学习内容/任务进度具体内容评测分班已完成完成评测笔测试题、机测试题&#xff0c;分班搭建博客已完成使用阿里云服务器&#xff0c;利用宝塔搭建halo。搭建博客教程上传博客已完成每日上传当天所学知识相…

(嵌套虚拟机)ovs+floodlight搭建sdn——模拟并检测ddos攻击

参考博文-CSDN-九瓜&#xff08;作者&#xff09;-使用OpenvSwitch KVM搭建SDN网络、完整流程 ovs安装&#xff0c;需对应版本&#xff0c;使用uname -a查看内和版本&#xff0c;官网连接http://www.openvswitch.org//download/ 如果觉得2.17.7就可以&#xff1a;那么使用命…

mybatis日志工厂

前言&#xff1a; 如果一个数据库操作&#xff0c;出现异常&#xff0c;我们需要排错&#xff0c;日志就是最好的助手 官方给我们提供了logImpl&#xff1a;指定 MyBatis 所用日志的具体实现&#xff0c;未指定时将自动查找。 默认工厂&#xff1a; 在配置文件里添加&#xf…

vue中使用vab-magnifier实现放大镜效果

效果图如下&#xff1a; 1. 首先&#xff0c;使用npm或yarn安装vab-magnifier插件&#xff1a; npm install vab-magnifier或 yarn add vab-magnifier2. 在Vue组件中引入vab-magnifier插件&#xff1a; import VabMagnifier from vab-magnifier; import vab-magnifier/lib…

边缘计算在交通行业的应用有哪些?

随着我国城市化进程的不断加快。人民生活水平不断提高。随之带来的私家车辆增多导致的交通拥堵问题。智慧交通作为一种新兴的交通模式&#xff0c;对传统交通行业产生了深远的影响。 智慧交通利用边缘计算和物联网等先进人工智能技术&#xff0c;赋能传统交通行业数字化升级。…

【JavaEE初阶】Tomcat安装与使用及初识Servlet

文章目录 1. Tomcat的安装与使用1.1 Tomcat安装1.2 Tomcat的启动1.3 Tomcat部署前端页面 2. Servlet2.1 Servlet是什么2.2 第一个Servlet程序2.3 常见错误 1. Tomcat的安装与使用 1.1 Tomcat安装 在浏览器中搜索Tomcat,打开官方网页.Tomcat官网 点击下载Tomcat8. 点击下载压…