Vue(非脚手架模式)基本样式

最新推荐文章于 2024-10-19 01:20:33 发布
原创 最新推荐文章于 2024-10-19 01:20:33 发布
· 180 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #html

本文介绍了如何创建一个基本的Vue.js应用。首先，在HTML页面中引入Vue.js库，然后在script标签内设置Vue实例，使用el属性绑定到页面的特定元素，并在data对象中定义要显示的数据。此外，methods属性用于定义事件处理方法。这是一个非Vue脚手架的简单应用搭建过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue的基本格式：

正常的创建一个html 页面

  • body的内容
    在这里插入图片描述
  • 引入vue.js文件
    在这里插入图片描述

这个js 文件可以去官网下载

官网下载地址: https://cn.vuejs.org/v2/guide/installation.html
  • script的内容
    在这里插入图片描述

新建一个vue

  • 使用el 关联body中你创建的div的id名字
  • data 里面存放需要渲染到页面中的内容 我的是msg (注意格式,该加引号加引号)
  • methods 里面存放的是事件和方法

以上就是vue(非脚手架的基本格式)

vue3脚手架Vite
weixin_68658847的博客
04-04 1563
vue3脚手架Vite
搭建 Vue 3 项目：简易指南
CodeWhizZ的博客
08-29 165
我们安装了 Node.js 和 Vue CLI，并使用 Vue CLI 创建了一个新的项目。Vue 3 是一款流行的 JavaScript 框架，具有优雅的语法和强大的功能。Vue CLI 将自动创建项目的基本结构和配置文件，并安装所需的依赖项。现在，我们已经成功搭建了一个 Vue 3 项目，并启动了开发服务器。接下来，Vue CLI 会询问您是否需要将项目所需的配置文件放在单独的目录中。文件，您可以看到一个简单的 Vue 组件。接下来，我们将使用 Vue CLI 创建一个新的 Vue 3 项目。
Webpack构建Vue项目(非Vue脚手架)
mrhou的博客
12-27 863
我们平时构建Vue项目，经常是用Vue官方提供的Vue-Cli脚手架，搭建起来非常方便。而Cli是基于webpack的工具，这里我要直接用webpack来搭建一个vue项目。 前提 请确保安装了 Node.js 的最新版本,Node-v查看版本号 开始构建项目 创建项目目录(myVuecli) 生成package.json npm init 在项目中安装webpack npm i...
非脚手架搭建自己的vue
weixin_41619400的博客
08-28 500
1、创建项目文件夹xxx 2、cd到xxx下: cmd 回车 3、xxx下运行 npm init 回车 最终生成 package.json 4、你怕吗install --save dev webpack 5、新建 文件夹src 下新建App.vue main.js index.html components文件夹 6、根目录西安新建 webpack.config.js 7、安装依赖报 npm install --save XXX > npm...
html使用原生vue（非脚手架）来实现左滑删除功能
刺心的博客
05-14 432
<ul> <li class="list-item" data-type="0" v-for="(item,index) in getBankCardList"> <div class="rssra" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="toDetail"> <div class='flex'> .
vue的基础总结(vue的非脚手架总结)
qq_52827180的博客
11-10 2930
Vue详细总结1一、Vue的基础用法（不用脚手架）1.vue的data属性在html中引入vue，初始化vue并添加data，data为json数据 key:value2.vue中的插值语法和指令语法插值语法：写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。指令语法：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式且可以直接读取到data中的所有属性。3. vue中数据绑定单向绑定(v-bind)：数据只能从data流向页面。
关于Vue脚手架写法的问题
weixin_30456039的博客
12-12 283
问题描述： main.js import Vue from 'vue' import App from './App' /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' }) 为什么已经定义了components...
vue脚手架（纯净版）
07-10
"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足对项目初始化有特定需求的开发者。 Vue CLI 的主要功能包括： 1. **快速创建项目**：通过简单的命令行操作，如`vue ...
基于vue脚手架
07-23
Vue脚手架是开发者为了快速搭建Vue项目环境而创建的一套工具集，它通常包括配置好的Webpack、Babel和其他必要插件，使得开发者能够专注于编写业务代码，而无需关注底层构建细节。 Element UI 是一套为开发者、设计...
Vue脚手架学习 vue脚手架配置代理、插槽、Vuex使用、路由、ElementUi插件库的使用
最新发布
2301_77358195的博客
10-19 1201
例如在input框输入了一些信息，然后要切到另外一个组件，回来发现之前输入的信息不见了，是因为组件在切换时就会被销毁，此时就可以设置该组件处于活跃状态就不会被销毁。数据在组件插槽的自身，但根据数据生成的结构需要组件的使用者来决定。在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，1.作用：切换不同的路由，默认之前的路由是会被销毁的。上面这种引入方式比较暴力，直接把全部的CSS和组件都引入，会导致所占的空间比较大。
非脚手架vue兼容IE和360兼容模式方法
laoli360的博客
04-01 1601
哎 今天麻了 用非脚手架的vue和el-ui来写页面 结果发现 不兼容ie浏览器 这里我通过百度 确认了几种方法但是都没有实现 最后实现的就是 Releases · babel/babel-standalone · GitHub 通过这个链接 下载 babel 来进行设置 第一步先下载 下载min版本的 轻量 然后 第二步 <script src="./js/babel.min.js"></script> 引入后 第三步 在你要写JavaScri...
Vue3.0项目搭建指南 不使用cli脚手架（v2）
meis27461的博客
09-02 3129
Vue3.0项目搭建指南前言一、先让Vue3能够运行1.初始化2.安装相关依赖3.编写项目文件和配置webpack 前言 本指南作用于帮助开发人员更清晰的了解Vue3.0的常用框架及其生态之间的关系，以及在不借助cli脚手架的情况下一步步将项目组装起来。 文中所使用所有相关依赖如下 环境以及工具 nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript 运行环境 npm v6.14.11 - nodeJS的包管理工具 编译依赖 webpack v5.51.1 - 模
抛开脚手架搭建vue工程
u011134727的博客
08-28 2112
本期分享了vue如何快速搭建一个工程化的项目，并且是非常的轻量级的。安装对应的依赖，依赖分为三步骤，核心依赖库，构建工具库，.vue文件的编译库在每个文件编写对应的配置，即可完成一个轻量级的vue脚手架的搭建当然，有的同学会问这个从哪里来的，那就请看这里吧。...
vue非脚手架 组件之倒计时
u011006757的博客
09-26 303
之前用普通vue.js写了个倒计时组件，希望能帮到大家。 html <!-- 倒计时组件--> <count-down :endTime="endTime" ref="mychild"></count-down> 父组件 var vm = new Vue({ el: '#se...
从0搭建一个vue项目，不使用脚手架从html到vue
I_am_shy的博客
06-25 2398
但在真实的项目中，仅仅只有这些配置还远远不够，开发时使用脚手架搭建可以快速的让我们编辑项目核心的代码，这里只是展示一个vue项目是如何产生的，深化对vue框架的了解。
不使用脚手架搭建vue项目
Ariel_lj的博客
11-15 6866
不使用脚手架搭建vue项目 找到一个需要搭建项目的空文件夹 在文件夹中执行命令npm init 生成package.json文件(此处将展示我们的依赖\编译配置等信息) 安装webpack 一vue及vue-loader使webpack能够加载vue文件,并编译为浏览器能够识别的js文件 npm i webpack vue vue-loader 上一步执行完后会提示我们npm WARN vue-loader@15.5.1 requires a peer of css-loader@* but none i
vue脚手架配置公用头部、底部。控制显示隐藏
dlh918的博客
08-15 6432
先把项目下载地址贴上：https://github.com/623317276/vue-myproject.git   路由引入我就不详细说了 直接进入主题： 我会在app.vue文件里引入公共的header 和 footer 这是我app.vue的代码块 &lt;template&gt; &lt;div id="app"&gt; &lt;app-header v-if=...
Vue不使用脚手架引入组件
轻风细雨_林木木
11-10 1842
在这次项目中，要求不使用脚手架组件中调用组件。 实现办法，其实很简单，在index页面调用所有组件，然后在模块话中调用指定组件。 注意一定不要在组件文件中调用，不然报错 还有就是要注意组件js文件的顺序。 ...
Vue传统开发方式（不使用脚手架工具）
u014176695的博客
04-30 2719
使用传统方法进行Vue开发
Vite构建纯净Vue项目脚手架快速启动指南
对于Vue项目来说，src目录可能包含Vue组件、JavaScript模块、样式文件等。 通过上述分析，可以看出这是一个基于Vite构建的基础Vue.js项目的结构示例。开发者可以使用这个项目作为新Vue应用的起点，通过简单的`npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值