前端框架学习-Vue(一)

Vue简介

百度百科上关于vue的词条,说vue时一款渐进式JavaScript框架,
简单来说,渐进式是一种设计理念,即在不失去当前功能的前提下,逐步添加新的特性。
说明它时一直在进行维护的。
Vue3,中使用*.vue作为文件后缀,html,css和js都可以写在这个文件中

  • Vue官方文档
  • Vue官方Api

Vue特性

这两天进行了简单的基础学习,对它的特性有了一个浅显的入门的了解

  1. 声明式的元素使用,可以在html中使用类似JSP中的EL表达式,在js中声明变量,在页面直接使用{{ 元素名 }}的形式引用
  2. 组件化的开发,可以将页面内容进行封装成为组件,在其他的组件中进行引用,从而减少重复造轮子。
  3. 其他特性,对于有些开发经验的同学,这些式需要特殊关注的。

Vue学习路径

  1. 学习前端开发所必须的知识:html,css,js
  2. 学习vue的核心概念:组件、指令、数据绑定、机算属性
  3. 学习Vue的生命周期、钩子、事件
  4. 掌握Vue的路由和状态管理库
  5. 学习Vue如何与后端服务器进行通信,如ajax
  6. 在实际开发中不断使用Vue和实践开发

创建一个Vue组件可以包含

data(){}- 进行数据初始化,将需要展示的元素,在data中进行return
mounted(){}- 页面进行渲染的时候的会执行的代码块
method():{}- 进行方法声明,可以添加参数
computed:{}- 使用方法的形式,添加一个属性计算的方法,在使用的时候使用方法名进行取值,使用computed的方式(计算属性)进行赋值的时候,会保存一个缓存值。方便大对象的使用。不会频繁调用。提高效率。只有当依赖的元素发生改变的时候才会更新缓存。提供get、set方法会在模型改变后立即更新。

声明式变量使用

  1. 使用{{ msg }}的方式进行变量绑定(在html文本中)
  2. 使用v-bind:id="dynamicId"的在html元素上进行变量绑定,简写为:id="dynamicId"

    在进行元素绑定的时候可以使用表达式进行简单计算,表达式需要是能够写在js定义方法时,写在return后的内容
    除了表达式,还可以调用函数,前提是函数有返回值

常用指令

  1. v-text,更新文本内容
  2. v-html,更新元素的innerHTML
  3. v-show,根据表达式的值来判断是否渲染某个元素
  4. v-if,v-else,v-else-if作用类似于if代码块
  5. v-for,进行列表渲染,<div v-for="item in items">
  6. v-on,给元素绑定事件,可以加修饰符
  7. v-bind,绑定元素属性
  8. v-model,表单元素和组件内容的双向绑定,可以收集表单内容向后端传递
  9. v-propv-slot用来在组件之间传递和接收数据
  10. v-pre元素内容原样输出

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

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

相关文章

解决安装依赖时报错:npm ERR! code ERESOLVE

系列文章目录 文章目录 系列文章目录前言一、错误原因二、解决方法三、注意事项总结 前言 在使用 npm 安装项目依赖时&#xff0c;有时会遇到错误信息 “npm ERR! code ERESOLVE”&#xff0c;该错误通常发生在依赖版本冲突或者依赖解析问题时。本文将详细介绍出现这个错误的原…

git指定tag只拉取某个release版本代码,节约贷款

采用-b指定tag&#xff0c;--depth1指定只拉取最后一个版本的代码&#xff0c;日志如下 yeqiangyeqiang-MS-7B23:~/Downloads/src$ git clone --depth1 -b 7cbf1a2 https://github.com/llvm/llvm-project 正克隆到 llvm-project... warning: 不能发现要克隆的远程分支 7cbf1a2…

R语言机器学习之影像组学分析的原理详解

概要 影像组学从常规医学图像中高通量提取大量的放射学定量数据&#xff0c;并以非侵入性方式探索它们与临床结果的相关性&#xff0c;在医学研究中得到广泛的应用。 01 影像组学&#xff08;Radiomics&#xff09;的概念&#xff1a; 影像组学&#xff08;Radiomics&#xff…

React Context(上下文)

1 Context Context 通过组件树提供了一个数据传递的方法&#xff0c;从而避免了在每一个层级手动传递props属性。 有部分小伙伴应该使用props属性进行组件上下传值的操作。当多个组件嵌套的时候&#xff0c;就需要慢慢向上寻找最初的值是什么。 2 API React.createContext:…

Jmeter之Beanshell解析并提取json响应

1&#xff1a;前置条件 将fastjson-1.2.49.jar包置于jmeter的lib目录下&#xff0c;并将该jar包添加到测试计划的Library中&#xff1b;否则会报&#xff1a;Typed variable declaration : Class: JSONObject not found in namespace的错误 2&#xff1a;解析思路 利用beansh…

了解Unity编辑器之组件篇UI(一)

UI组件&#xff1a;提供了用户交互&#xff0c;信息展示&#xff0c;用户导航等功能 一、Button&#xff1a;用于响应用户的点击事件 1.Interactable&#xff08;可交互&#xff09;&#xff1a;该属性控制按钮是否可以与用户交互&#xff0c;如果禁用则按钮无法被点击。可以通…

Ubuntu18.04配置PX4开发环境

源文件下载 读者可以参考PX4中文维基百科&#xff0c;或者使用下面命令↓ git clone https://github.com/PX4/PX4-Autopilot.git --recursive 下载完成之后&#xff0c;执行脚本安装命令&#xff0c;PX4给我们提供了脚本安装模式 bash ./PX4-Autopilot/Tools/setup/ubuntu.sh …

Spring Boot-3

学习笔记&#xff08;今天又读了好多篇的博客&#xff0c;做个今天的总结&#xff0c;加油&#xff01;&#xff01;&#xff01;&#xff09; PS&#xff1a;快到中伏了&#xff0c;今天还是好热 使用阿里巴巴 FastJson 的设置 1、jackson 和 fastJson 的对比 有很多人已经…

Linux 网络收包流程

哈喽大家好&#xff0c;我是咸鱼 我们在跟别人网上聊天的时候&#xff0c;有没有想过你发送的信息是怎么传到对方的电脑上的 又或者我们在上网冲浪的时候&#xff0c;有没有想过 HTML 页面是怎么显示在我们的电脑屏幕上的 无论是我们跟别人聊天还是上网冲浪&#xff0c;其实…

Python绘制多条y轴范围不同的曲线并在一张图上显示

如何使用Python绘制多条y轴范围不同的曲线&#xff0c;然后把它们合并在一张图上显示 import matplotlib.pyplot as plt import numpy as npdef multilines(target, x, ys, types, colors, x_label, labels):"""用来绘制多条y轴范围不同的线&#xff0c;并在一…

代码随想录 DAY28 93.复原IP地址 78.子集 90.子集II

93.复原IP地址 切割字符串&#xff0c;并且在每一个切割过的字符串后面加上 ‘ .’ 返回条件&#xff1a;逗点个数3 如果最后一小节符合要求&#xff0c;就将该字符串添加到结果集中 循环中&#xff1a;从start到i 符合要求&#xff0c;就继续添加逗点和字符 不符合下面就不用…

数学建模的六个步骤

一、模型准备 了解问题的实际背景&#xff0c;明确其实际意义&#xff0c;掌握对象的各种信息&#xff0c;以数学思路来解释问题的精髓&#xff0c;数学思路贯彻问题的全过程&#xff0c;进而用数学语言来描述问题。要求符合数学理论&#xff0c;符合数学习惯&#xff0c;清晰…

苹果iOS 16.6 RC发布:或为iPhone X/8系列养老版本

今天苹果向iPhone用户推送了iOS 16.6 RC更新(内部版本号&#xff1a;20G75)&#xff0c;这是时隔两个月的首次更新。 按照惯例RC版基本不会有什么问题&#xff0c;会在最近一段时间内直接变成正式版&#xff0c;向所有用户推送。 需要注意的是&#xff0c;鉴于iOS 17正式版即将…

第1题 好的序列(seq)

一个长为k的序列b1, b2, ..., bk (1 ≤ b1 ≤ b2 ≤ ... ≤ bk ≤ n)&#xff0c;如果对所有的 i (1 ≤ i ≤ k - 1)&#xff0c;满足bi | bi1&#xff0c;那么它就是好的序列。这里a | b表示a是b的因子&#xff0c;或者说a能整除b。 给出n和k&#xff0c;求…

git取消文件或文件夹追踪

1. 创建仓库时&#xff0c;在本地仓库根目录&#xff0c;创建.gitignore文件&#xff0c;写入忽略规则。规则可以是文件名&#xff0c;或者正则表达式。git 对于 .gitignore配置文件是按行从上到下进行规则匹配的。对于.gitignore文件本身的修改也会被提交到远程端。 2. 删除已…

Python获取接口数据

首先我们需要下载python&#xff0c;我下载的是官方最新的版本 3.8.3 其次我们需要一个运行Python的环境&#xff0c;我用的是pychram&#xff0c;需要库的话我们可以直接在setting里面安装 代码&#xff1a; # -*- codeing utf-8 -*- from bs4 import BeautifulSoup # 网页…

docker中搭建lnmp

目录 一&#xff1a;项目环境 1、主机ip需求 2、 任务需求 二&#xff1a;多级构建Dockerfile实验部署 lnmp 1、先部署一个有所有依赖包的镜像 2、搭建nginx 3、搭建mysql 4、搭建php 三&#xff1a;一级构建安装lnmp 1、构建自定义docker网络 2、构建nginx容器&#x…

Java版Spring Cloud+Spring Boot+Mybatis+uniapp知识付费平台讲解

提供私有化部署&#xff0c;免费售后&#xff0c;专业技术指导&#xff0c;支持PC、APP、H5、小程序多终端同步&#xff0c;支持二次开发定制&#xff0c;源码交付。 Java版知识付费-轻松拥有知识付费平台 多种直播形式&#xff0c;全面满足直播场景需求 公开课、小班课、独…

降压电路原理 12V电源是如何下降到5V?

引言&#xff1a; 12V-5V开关电源设计原理&#xff1a;以12V电压作为输入&#xff0c;通过控制开关电路的通断时间&#xff0c;实现电感的充放电时间&#xff0c;改变输出电压的平均值&#xff0c;然后进行LC滤波&#xff0c;对输出电压进行电压和电流反馈控制&#xff0c;使其…

企业知识管理系统安全是重中之重

企业开展知识管理工作的益处是全方位的&#xff0c;效果能从业务的各方面得到体现&#xff0c;最终效果就是企业竞争力的提升与企业经营业绩的提升。 知识管理系统的意义在于&#xff0c;构建系统的知识库&#xff0c;对纷杂的知识内容&#xff08;方案、策划、制度等&#xf…