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

最新推荐文章于 2023-03-28 16:29:50 发布
最新推荐文章于 2023-03-28 16:29:50 发布
阅读量145 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48554037/article/details/120686911
版权

Vue.js HTML JavaScript 数据绑定 事件处理
关键词由CSDN通过智能技术生成

vue的基本格式：

正常的创建一个html 页面

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

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

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

新建一个vue

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

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

要温柔以待
关注
Webpack构建Vue项目(非Vue脚手架)
mrhou的博客
12-27 794
我们平时构建Vue项目，经常是用Vue官方提供的Vue-Cli脚手架，搭建起来非常方便。而Cli是基于webpack的工具，这里我要直接用webpack来搭建一个vue项目。 前提 请确保安装了 Node.js 的最新版本,Node-v查看版本号 开始构建项目 创建项目目录(myVuecli) 生成package.json npm init 在项目中安装webpack npm i...
vue的基础总结(vue的非脚手架总结)
qq_52827180的博客
11-10 2828
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_41619400的博客
08-28 454
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 399
<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脚手架写法的问题
weixin_30456039的博客
12-12 266
问题描述： 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兼容IE和360兼容模式方法
laoli360的博客
04-01 1521
哎 今天麻了 用非脚手架的vue和el-ui来写页面 结果发现 不兼容ie浏览器 这里我通过百度 确认了几种方法但是都没有实现 最后实现的就是 Releases · babel/babel-standalone · GitHub 通过这个链接 下载 babel 来进行设置 第一步先下载 下载min版本的 轻量 然后 第二步 <script src="./js/babel.min.js"></script> 引入后 第三步 在你要写JavaScri...
vue-cli脚手架配置教程
A121212789的博客
03-28 2374
2、要求代理服务器（vue 的 http-proxy-middleware）将我们发给它的请求转发到 xxx 地址，即，真实的后台服务器的根路径。vue-cli 解决开发过程中的跨域问题是利用到了 webpack 在开发环境中所提供的代理服务器（http-proxy-middleware）。在这里，vue-cli 是在询问你：是否将你的这些设置保留下来作为默认的项目设置的模板。在这个界面中，vue-cli 是在询问你：是将所有的配置都放在。一个文件中，还是将各个功能的配置分开存放在独立的文件中？
vue脚手架搭建项目及vue学习
最新发布
06-06
在"vue脚手架搭建项目及vue学习"的主题中，我们将深入探讨如何使用Vue CLI（命令行接口）来初始化一个项目，以及Vue的核心概念和关键特性。 1. **Vue CLI的使用**： Vue CLI是一个官方提供的强大脚手架工具，用于...
Vue3.0项目搭建指南 不使用cli脚手架（v2）
meis27461的博客
09-02 2827
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 1983
本期分享了vue如何快速搭建一个工程化的项目，并且是非常的轻量级的。安装对应的依赖，依赖分为三步骤，核心依赖库，构建工具库，.vue文件的编译库在每个文件编写对应的配置，即可完成一个轻量级的vue脚手架的搭建当然，有的同学会问这个从哪里来的，那就请看这里吧。...
vue非脚手架 组件之倒计时
u011006757的博客
09-26 280
之前用普通vue.js写了个倒计时组件，希望能帮到大家。 html <!-- 倒计时组件--> <count-down :endTime="endTime" ref="mychild"></count-down> 父组件 var vm = new Vue({ el: '#se...
不使用脚手架搭建vue项目
Ariel_lj的博客
11-15 6584
不使用脚手架搭建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 6252
先把项目下载地址贴上：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 1801
在这次项目中，要求不使用脚手架组件中调用组件。 实现办法，其实很简单，在index页面调用所有组件，然后在模块话中调用指定组件。 注意一定不要在组件文件中调用，不然报错 还有就是要注意组件js文件的顺序。 ...
Vue传统开发方式（不使用脚手架工具）
u014176695的博客
04-30 2565
使用传统方法进行Vue开发
[前端学习] Vuejs入门学习 不用脚手架怎么玩？
llwodao的专栏
04-20 4354
写一个测试的Vuejs 构成的html 前言 需要学点前后端，想做个网页上的小工具…于是就开始了。 新建一个index.html 由于Vuejs官网不建议开始就使用 Vue-cli的脚手架…转用其他方法… 使用 sync-my-code(某大佬写的代码同步工具) 安利: https://www.npmjs.com/package/sync-my-code #在本地...
非脚手架的vue引用配置问题
myl_0808的博客
06-11 402
非脚手架的vue引用配置问题 在前后端不分离的系统中，引入vue，进而使用vue的一些好用的效果。下面简单记录一下如何在前后端不分离的系统即非脚手架中引入vue html页面中首先引入vue.min.js以及/axios.min.js js文件中格式为 var testUpload = new Vue({ el:"#app", data(){ return{ } }, methods:{ }, mounted(){
Vue脚手架与vue-router快速入门
JavaScript 和 CSS 的组织方式通常是 Vue 组件的标准模式，遵循组件化原则。 Vue CLI 和 Vue Router 提供了一种高效、灵活的方式来构建现代前端应用。理解并熟练运用这些工具和概念，能帮助开发者快速搭建和维护高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值