如何用vue来写页面（初识）

最新推荐文章于 2025-04-15 11:09:51 发布
最新推荐文章于 2025-04-15 11:09:51 发布
阅读量1.8w 收藏 60
点赞数 13
分类专栏： 前端页面 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39398544/article/details/86600987
版权

如何用vue来写页面（初识）

1、学习vue首先要对html、css、js有一定的了解，然后右击创建vue,这样我们写起来就简单多了。话不多说，我们直接说怎么写。
在这里插入图片描述
看这张图我们很明确的知道各个部分是干什么的，我们从简单的开始说，style是引入css样式的，这里的 @指的是webpack起的别名，scoped是指我们引用的是该页面内部css，方式样式全局化污染，template这里面是让我们写html代码的，与之前写的html代码我觉得最大的不同在于页面跳转这部分，之前我们用的是a标签，而现在我们用的是router-link标签。
2、路由跳转
在这里插入图片描述
在这里插入图片描述
路由在项目目录中文件夹router，component指向页面地址，path是地址栏跳转路径。
这样我们简单的页面就可以独自写出了

vue2编写主体页面
5年编程经验的老猿。
04-28 961
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
Vue之事件绑定（初识Vue事件）
百赢出品，必属精品
04-19 2330
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
如何写你的第一个vue页面
shark1978的专栏
12-27 880
解压后把 templates 放到 C:\Users\（你的用户名）\AppData\Roaming\HBuilder X 目录下 重启Hb。path:访问路径 name : vue页面中的名字 component: vue页面的相对路径。14：http://127.0.0.1:（vue.config.js 中配置德端口）10. 找到 src 目录下的 router 目录 下的index.js文件打开。9. 在 src 目录中找到 App.vue 文件（这个是工程的入口）
vue编写一个简单页面示例
最新发布
zru_9602的博客
04-15 550
【代码】vue编写一个简单页面示例。
用VUE开发页面的步骤
majiang26的专栏
03-31 5305
这几天项目不是很忙，就研究了一下比较热门的vue，发现用vue开发页面其实和开发后台是一样也需要搭建开发环境，挑选ide，现总结一下开发步骤： 1。搭建开发环境 首先需要安装node.js（百度搜索node.js下载安装即可，这里以windows为例）安装完成后，打开dos窗口，使用npm命令安装编译环境需要的基础类库，最简单的方式全局安装，运行npm install -g @vue/cli，等着就行了，安装完成后运行vue -V查看vue cli版本 2。运行vue create [项目名]，选择v
vue的日常小练习
qq_46291038的博客
09-18 167
源码： <%-- Created by IntelliJ IDEA. User: TJYSB Date: 2021/9/17 Time: 16:24 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head&gt
vue前端简单页面编写
sheldor的博客
08-23 2511
Html部分： 代码框架： <template> <!-- 请求栏：输入框、选择框、日期框 + 查询、重置 范例如下--> <div class="table-page-search-wrapper"> <a-col :md="8" :sm="24"> <a-form-item label="用户ID" style="font-weight: 500;font-size: 16px;"> <
Vue2基础 01：初识Vue
Fxcrisp的博客
05-18 706
对Vue进行简单介绍，通过一个小案例大概了解Vue的写法结构。
22-09-17-01_vue3_demo(初识视图文件（.vue）)
09-18
其它vue视图文件按照功能可分为：1、页面视图文件('../views/*.vue')。2、局部页面视图文件('../ components/*.vue')。页面视图文件一般被定义在views文件夹中；局部页面视图文件一般被定义在components文件夹中。但...
vue3初识
余识-
02-10 1047
Vue.js是一款流行的前端框架，最初由尤雨溪（Evan You）于2014年创建，非常的年轻。官网为vue3但要注意，vue框架本身是基于前端基础知识之上的，所以学习vue的前提是，你已经理解、并能够熟练的使用htmlcssJavaScript这三大前端基石去开发基本的网页应用了。HTMLCSSJavaScript放心，相比于C/C++、python、rust、java之类的语言，这三者是非常简单的，甚至一定程度上来说，除了JavaScript，其它两者都不能算是编程语言。
【vue】初识vue
qq_42425551的博客
03-06 819
vue第一天学习内容一、vue3的前言1.1 渐进式框架1.2 相比于vue2的变化源码上性能上新的API二、课程大纲：三、第一天内容3.1 如何使用vue呢3.2 vue引入方法：3.2.1 方式一：在页面中通过CDN(内容分发网络)的方式引入3.2.2 方式二：下载vue的javascript文件，并且自己手动引入3.2.3 方式三：通过npm包管理工具安装使用它（webpack在讲）3.2.4 方式四：直接通过vue CLI创建项目，并且使用它3.3 计数器案例（原生js代码vs vue代码）3.4
vue标准写法
sun13047140038的博客
06-09 787
Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。下面是 Vue.js 的一些标准写法和最佳实践: 1. Vue 实例： 创建 Vue 实例时，可以指定一些选项来定义应用的行为。常见的选项包括 el、data、methods、computed、watch 等。示例： Javascript new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, methods: { gr
vue初学——编写第一个页面
热门推荐
copple的专栏
02-27 1万+
前面介绍了如何新建vue工程vscode新建vue工程，这篇就介绍如何编写自己的第一个页面 开始之前，先介绍下vue工程的目录结构 build 项目构建(webpack)相关代码 config 项目相关配置，配置端口信息等 node_modules 项目依赖等 src>assets 放置一些图片 如项目的logo、icons src>conponents 项目的一些组件，如自定义组件 src>router 路由 src>App.vue 项目入口 src>main.js 项
六 vue页面写法
weixin_38441551的博客
03-01 967
/** * 获取页面数据 */ getTableData() { this.$loading(); fetch.get(MODULE_PATH.PA_ORG + '/pa/user/page', { params: { orgId: this.orgId, u...
vue写法
weixin_44892536的博客
07-19 185
var vue = new Vue({ el: '#app', data: { }, methods: { }, watch: { }, mounted: function () { //初始化方法 }, created: function () { } })
Vue-做一个网页
qq_52347540的博客
09-08 2678
网页的成果图，和讲解在b站这个链接里 https://www.bilibili.com/video/BV1KM4y1G7Zk?share_medium=android&share_plat=android&share_session_id=118a759a-e227-44d1-a58c-44e8c21c6829&share_source=QQ&share_tag=s_i&timestamp=1631099611&unique_k=xYxOgX 一些展示图片，有
vue写个登录页面
weixin_35749440的博客
12-22 531
<p>好的，下面是在 Vue 中创建登录页面的一些基本步骤：</p> <ol> <li><p>在 Vue 项目中创建一个组件，用于显示登录表单。</p> </li> <li><p>在组件的 template 中，使用 HTML 表单元素创建登录表单。你可以使用 input 元素创建用户名和密...
写一个用vue的登陆页面
weixin_42590539的博客
02-13 208
首先，您需要创建一个 Vue 项目，然后使用 Vue CLI 进行项目构建。 在项目中创建一个组件，例如命名为 Login.vue，在其中实现登录页面的布局和逻辑。 接下来是一个简单的登录页面代码示例： <template> <div> <form> <div> <label for="username"...
用vue写一个登陆页面
weixin_42577243的博客
02-10 1164
在 Vue 中，您可以使用 Vue 组件和 Vuex 状态管理库来创建登录页面。 首先，您可以在 Vue 组件的模板中使用 HTML 表单元素来创建登录表单。然后，您可以使用 Vue 绑定来将用户输入的数据与组件的数据绑定在一起。 下面是一个简单的示例： <template> <form @submit.prevent="handleLogin"> <la...
给出一段vue初识代码
03-08
### 初学者适用的 Vue 代码示例 对于刚开始学习 Vue 的开发者来说，理解如何构建简单的组件是非常重要的。下面提供了一个基础的例子来展示如何创建一个可以切换显示消息的应用程序。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Beginner Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> </body> </html> ``` 此段代码展示了如何定义一个基本的 Vue 实例并将其挂载到 HTML 页面中的特定元素上[^1]。通过 `data` 属性设置初始状态，并利用方法属性定义了用于响应按钮点击事件的方法。当用户单击按钮时，会调用 `reverseMessage()` 方法反转字符串的内容。 #### 单文件组件方式实现相同的功能 如果采用单文件组件的方式编写相同的逻辑，则代码结构如下所示： ```vue <template> <div class="example"> <p>{{ message }}</p> <button @click="reverseMessage">Reverse Message</button> </div> </template> <script> export default { name: 'ExampleComponent', data() { return { message: 'Hello Vue!', }; }, methods: { reverseMessage() { this.message = this.message.split('').reverse().join(''); }, }, }; </script> <style scoped> .example { font-family: Arial; } </style> ``` 这种方式不仅保持了HTML、JavaScript 和 CSS 的分离，还提高了可维护性和重用性[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值