Vue项目学习(项目的开发流程)(2)

1、vue项目的默认首页和入口文件

2、两种书写的方式是表达一样的意思——>el:指定当前Vue实例挂载到哪个区域里

3、如果属性值和属性名一致,冒号和后面可以省略不写

(所以有两种写法)

4、以".vue"文件结尾的文件在项目当中称为组件文件。

其中Vue的组件文件:以.vue结尾,每个组件由三个部分组成: <template> , <script>、<style> 。

  • (模板部分)在<template>中,可以定义原生的html代码。相当于vue的视图部分
  • 在<script>中,这里面定义的js的代码。这里面当中主要定义vue当中的数据模型和方法
  • 在<style>中,定义css样式——>编写css样式代码

5、b站评论区学到的一个插件(用来书写.vue文件中提示)

插件名:Vuter

6、export——>导出模块,在其它的地方用import关键字导入

(1)<script>

export default {

}

</script>

(2)

<script>

export default {

  data(){

    return{

      //定义一个数据模型

      message:"Hello Vue"

    }

  }

}

</script>

7、定义vue当中的数据模型

  • data()是vue的默认写法
  • js当中的对象是一个"大括号"
  • data:function()这个可以简写成——>data()

  • 若需要定义vue的函数——>写一个methods:{ ... },在这之中定义一个一个方法

8、"<h1>{{message}}</h1>"

(1)使用双大括号 {{ }} 作为插值表达式的分隔符。例如,{{ message }} 会被替换为组件中定义的 message 属性的值。

(2)Vue.js:同样使用双大括号 {{ }},但在Vue 2.x中更推荐使用 v-bind:title="message"(简写为 :title="message")来绑定属性

(3)在HTML模板中,<h1>{{message}}</h1> 这行代码表示的是一个动态内容的标题。这里,{{message}} 是一个占位符,它会被某个框架(如Angular, Vue.js, React等)或模板引擎在运行时替换为实际的数据值。

具体来说,当这个HTML模板被渲染到浏览器上时,{{message}} 会被替换为在相应框架或模板引擎中定义的message变量的值。例如,如果message的值是"Hello, World!",那么渲染后的HTML将会是:<h1>Hello, World!</h1>

9、vscode——>ctrl+shift+y——>呼出控制台——>打开终端

10、package.json 文件是 Node.js 项目的核心文件,它包含了项目的配置信息以及项目所依赖的npm包列表。

11、在进行vue开发,main.js文件很少去修改。首页index.html也同样如此。主要操作的是一些组件文件——>.vue结尾的文件

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

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

相关文章

Linux操作系统之进程信号

进程信号 一、信号1、概念2、系统定义的信号列表3、常见的信号处理方式 二、产生信号的方式1、终端按键&#xff08;1&#xff09;组合键&#xff08;2&#xff09;示例代码&#xff08;3&#xff09;运行结果 2、调用系统函数&#xff08;1&#xff09;kill命令&#xff08;2&…

CRC16循环冗余校验

代码&#xff1a; #include<stdio.h> #include <stdint.h>#define uchar unsigned char #define uint unsigned int static const uint8_t auchCRCHi[] { 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40, 0x0…

深入理解接口测试:实用指南与最佳实践(三)API文档解析及编写测试用例

​ ​ 您好&#xff0c;我是程序员小羊&#xff01; 前言 这一阶段是接口测试的学习&#xff0c;我们接下来的讲解都是使用Postman这款工具&#xff0c;当然呢Postman是现在一款非常流行的接口调试工具&#xff0c;它使用简单&#xff0c;而且功能也很强大。不仅测试人员会使用…

pxe自动安装linux

实验环境 1.rhel7主机 2开启主机图形&#xff08;本人最小化安装&#xff0c;先下载&#xff09; 3配置网络 4关闭VMware dhcp功能 5能够自动安装系统 完成rhedhat7图形,kickstart,启动图形化制作工具 安装kickstart 启动图形化制作工具 在ks.cfg可以添加安装时下载的包 …

算法学习day29

一、乘法表中第k小的数(和有序矩阵中第k小的数类似) 题意&#xff1a; 乘法表是大小为 m x n 的一个整数矩阵&#xff0c;其中 mat[i][j] i * j&#xff08;下标从 1 开始&#xff09;。 给你三个整数 m、n 和 k&#xff0c;请你在大小为 m x n 的乘法表中&#xff0c;找出…

可视化图表与源代码显示的动态调整

可视化图表与源代码显示的动态调整 页面效果描述&#xff1a;本篇代码实现了通过拖动一个可调整大小的分隔符&#xff0c;用户可以动态地调整图表显示区域和源代码显示区域的大小。通过监听鼠标事件&#xff0c;当用户拖动分隔符时&#xff0c;会动态计算并更新两个区域的大小 …

Vue项目学习(1)

1、进入cmd命令行——> vue ui ——>等等操作 2、 3、src目录下 4、vue项目的启动 &#xff08;1&#xff09; &#xff08;2&#xff09; 5、如何更改前端vue项目的端口号&#xff1f;——>去vue.config.js里配置应一个对象

mprpc框架的应用示例

一、注册 有一个本地服务&#xff0c;我想把它发布成远程服务&#xff0c;首先在user.proto中定义rpc方法的描述&#xff0c;定义参数和响应的消息类型 然后在userservice.cc文件中通过继承UserServiceRpc这个类&#xff0c;重写一下响应的方法&#xff08;打四个动作&#xf…

shell函数的基本知识

文章目录 shell函数定义函数调用函数函数参数返回值 Shell 输入/输出重定向输入重定向输出重定向 Shell 函数是 Shell 脚本编程中的一个非常有用的特性&#xff0c;它允许你将一段代码封装起来&#xff0c;给它一个名字&#xff08;函数名&#xff09;&#xff0c;然后在脚本的…

低代码: 开发难点分析,核心技术架构设计

开发难点分析 1 &#xff09;怎样实现组件 核心问题&#xff1a;编辑器 和 页面其实整个就是一系列元素构成的这些元素的自然应该抽象成组件&#xff0c;这些组件的属性应该怎样设计在不同的项目中怎样做到统一的使用 2 &#xff09;跨项目使用 在不同的项目中怎样做到统一的…

【Linux】线程互斥

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

C# Unity 面向对象补全计划 七大原则 之 依赖倒置原则 (DIP)难度:☆☆ 总结:多抽象,多接口,少耦合

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列作为七大原则和设计模式的进阶知识&#xff0c;看不懂没关系 请看专栏&#xff1a;http://t.csdnimg.cn/mIitr&#xff0c;查漏补缺 1.依赖倒置原则 (DIP) 这…

「队列」实现FIFO队列(先进先出队列|queue)的功能 / 手撕数据结构(C++)

概述 队列&#xff0c;是一种基本的数据结构&#xff0c;也是一种数据适配器。它在底层上以链表方法实现。 队列的显著特点是他的添加元素与删除元素操作&#xff1a;先加入的元素总是被先弹出。 一个队列应该应该是这样的&#xff1a; --------------QUEUE-------------——…

骨传导耳机哪个牌子好?五款业界高性能机型推荐,让你选购不迷茫!

骨传导耳机哪个牌子好&#xff1f;哪款耳机值得入手&#xff1f;作为一名资深的数码设备测评师&#xff0c;我极力推荐大家尝试下骨传导耳机&#xff0c;它无需直接堵塞耳道&#xff0c;既能起到保护听力的作用&#xff0c;又能在使用中保持对外界的环境感知。然而&#xff0c;…

OD C卷 - 园区参观路径

园区参观路径&#xff08;100&#xff09; 有一个矩形园区&#xff0c;从左上角走到右下角&#xff0c;只能向右、向下走&#xff1b;共有多少条不同的参观路径&#xff1b; 输入描述&#xff1a; 第一行输入长度、宽度 后续每一行表示 对应位置是否可以参观&#xff0c;0可…

poetry配置镜像

1.简介 poetry 是一个包管理和打包的工具。 在 Python 中&#xff0c;对于初学者来说&#xff0c;打包系统和依赖管理是非常复杂和难懂的。即使对于经验丰富的开发者&#xff0c;一个项目总是要同时创建多个文件&#xff1a; setup.py ,requirements.txt,setup.cfg , MANIFES…

【数据结构与算法】十大经典排序算法深度解析:冒泡排序、选择排序、插入排序、归并排序、快速排序、希尔排序、堆排序、计数排序、桶排序、基数排序

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​ 目录 引言 一、排序算法概述 排序算法简介 排序算法的分类 性能指标 二、十大排序算法…

Unity Rigidbody 踩坑记录

1&#xff1a;两个带有刚体的物体碰撞会一直不停的弹 把被动受力的刚提的 Freeze Position 的勾选 去掉&#xff08;碰到过一次&#xff0c;有一种受力无法释放又返回给目标的 所以一直弹跳的感觉&#xff09; 2&#xff1a;子物体 和父物体 都有刚体的情况下 子物体 Freeze R…

zdpy+vue3+onlyoffice文档系统实战上课笔记 20240805

上次 上次计划 1、最近文档表格完善 2、实现登录功能 3、新建文件&#xff0c;复制文件&#xff0c;删除文件 4、其他 目前任务&#xff1a;最近文档表格完善 1、在名称前面&#xff0c;渲染这个文档的图标 2、大小的基本的单位是kb&#xff0c;超过1024kb则换成mb&#xff0…

Java | Leetcode Java题解之第318题最大单词长度乘积

题目&#xff1a; 题解&#xff1a; class Solution {public int maxProduct(String[] words) {Map<Integer, Integer> map new HashMap<Integer, Integer>();int length words.length;for (int i 0; i < length; i) {int mask 0;String word words[i];in…