谷粒商城day22-Vue介绍与helloworld

最新推荐文章于 2023-02-15 12:11:37 发布
最新推荐文章于 2023-02-15 12:11:37 发布
阅读量160 收藏
点赞数
分类专栏： 谷粒商城 文章标签： vue介绍 helloworld
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/108278843
版权

1.介绍

2.编写之前安装VUE

执行 npm init -y

        npm install vue

3.编写helloworld

 ！+ shift键 生成模板

引入vue.js

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body >
        <div id = "app">
            <h1>我是{{name}} ,hello world！</h1>
        </div>
       
        <script src="../node_modules/vue/dist/vue.js"></script>

        <script>
            let ap = new Vue({
                el:"#app",
                data:{
                    name:'李白'
                }
            })
        </script>
</body>
</html>

 

 

 

我才是真的封不觉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3版本HelloWorld
08-02
通常，这会涉及使用像`webpack`这样的打包工具，以及`vue-cli`脚手架来快速初始化项目。开发过程中，开发者可以利用`npm run serve`命令启动一个热重载的本地服务器，便于实时查看代码更改的效果。 在提供的文件...
day01-VUE进阶
10-29
1. 路由：了解 Vue-Router 的基本使用和配置。 2. 状态管理：了解 Vuex 的基本使用和配置。 3. TypeScript：了解如何使用 TypeScript 编写 Vue.js 项目。 四、项目实践 1. 苍穹外卖前端项目环境搭建 2. 员工管理...
谷粒商城30- 前端基础 VUE 基本语法&插件安装
Java持续实践
08-01 314
文章目录基本语法双向绑定体验点击事件声明方法Vue插件安装 基本语法 双向绑定体验 用input , 输入粉丝的人数 , 动态的获取粉丝人数 . num默认值为1 使用v-model进行绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
谷粒商城 (九) --------- 前端基础 Vue 篇
在森林里麋了鹿
09-04 482
Vue的相关入门
谷粒商城32 - 前端基础 VUE- 指令 v-on v-for v-if v-show
Java持续实践
08-02 289
文章目录v-on 示例事件修饰符按键修饰符组合按键v-for 示例显示user信息遍历对象信息加上:key来区分不同数据v-if & v-showv-if & v-show 代码示例v-else-ifv-if 与v-for的结合使用 v-on 示例 v-on示例点赞 <body> <div id="app"> <!--事件中直接写js片段--> <button v-on:c
06-v-on、v-if、v-for
PP_zi的博客
08-09 351
一、事件监听 在开发中，需要监听用户发生的事件，如点击、拖拽、键盘操作等，在Vue中，使用v-on指令绑定事件监听器。 v-on的语法糖为：@ 1.v-on基础操作 在下面代码中，使用了v-on语法（使用的是语法糖@）绑定了一个点击事件，事件指向了一个methods中定义的函数： <div id="app"> <h1>{{message}}</h1> <h2>{{counter}}</h2> <butt
前端学习04-Vue-指令-v-on、v-for、v-if
pyd1040201698的博客
07-21 277
v-on 点赞实例，加赞和减赞 可以把 v-on:click 改成 @click也是一样的作用，效果一样 然后在两个div加上v-on:click 这个时候点击小的div会弹两次窗口，是因为事件冒泡的原因产生的 'stop'：阻止事件冒泡到父元素 'prevent'：阻止默认事件发生 'capture'：使用事件捕获模式 'self'：只有元素自身触发事件才执行。（冒泡或捕获的都不执行） 'once'：只执行一次 我们来阻止冒泡，给小div加上stop 这样页面
谷粒商城的前端vue界面（含管理）.zip
05-09
谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） ...
tts-vue-1.9.0 语音合成
05-23
"tts-vue-1.9.0"是一款基于Vue.js框架开发的开源语音合成功能库，专为学习和教育目的设计。Vue.js是一个轻量级、高性能的前端JavaScript框架，它以其组件化开发模式、简洁的API和易于上手的特性受到开发者们的广泛...
ruoyi-vue-pro开发指南PDF下载
最新发布
03-07
ruoyi-vue-pro开发指南PDF下载 包含各种组件开发指南
vuejs学习三：v-on、v-if、v-for
qq_28471889的博客
02-08 257
v-on，v-if，v-for 1 v-on 1.1 参数 如果不需要传参 v-on绑定的方法的参数可以不写 当省略括号时，绑定的方法可以接收页面的event作为形参 <div id="app"> <h1 @click="test1">123</h1> <!--不省略小阔号是无法获得event参数的--> <h1 @...
Vue学习笔记之v-for、v-bind、v-on、v-if的语法
医疗数据
05-17 1808
定义变量：let—>定义变量 而 const—>定义常理 vue.js 编程范式：声明式编程 语法： v-for = "item in moves" 循环“moves”数组里面的值，然后赋值给item v-bind ：动态绑定 计算函数中 for 的三种写法 计算与函数的区分：for循环的时候，性能就区分开来了 v-on ： 如果该方法不需要额外的参数，那么该方法的（）可以不添加此括号。但是注意，如果该方法本身只有一个参数，那么会默认将...
Vue之v-on的使用
qq_44756582的博客
06-05 306
v-on的使用 个人博客 https://www.boycharse.top Vue系列 上一篇：03-Vue的动态绑定属性 下一篇：暂未更新 v-on的使用 在第一篇，Vue的初体验中，我们已经使用过v-on来为元素添加点击事件了，下面我们将较为详细的来了解它。 基础使用 下面我们演示给一个button绑定点击事件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
Vue基本指令 V-bind V-if V-on V-for + 其他 + Mustache语法(uni-app)
qq_61697873的博客
08-01 584
Vue基本指令
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
ZzzWClock的博客
06-20 282
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性 一.实例演示,v-if,v-for,v-model,v-bind,v-on 方法 含义 v-bind 自定义普通属性，快捷语法是一个":"号 v-on 事件属性，快捷语法是一个"@"符 v-model 双向绑定 v-for v-for : (循环变量, 索引/键) in/of 数组/对象 :key v-if 条件渲染流程判断，有单分支和多分支 ①v-bind，自定义普
Vue的学习Ⅱ（v-on、v-if、v-else-if、v-else、v-show、v-for）
胡图图不糊涂的博客
04-17 1765
一、v-on基本使用 <div class = "app"> <h2>{{num}}</h2> <button v-on:click="increment">+</button> /*v-on事件绑定*/ <button @click="decrement">-</butto...
vue在v-for里面可以写v-if吗，怎么写代码
weixin_42599908的博客
02-15 1059
在Vue中，可以在v-for循环中使用v-if条件语句。这意味着您可以根据满足特定条件的项进行过滤或操作。 以下是一个简单的示例，演示如何在Vue中同时使用v-for和v-if： <ul> <li v-for="item in items" v-if="item.isActive"> {{ item.name }} </li> </ul&g...
Vue 学习之 v-if,v-for,v-on 以及生命周期
qq_41720578的博客
04-07 1028
通过学习基础的vue语法，vue真是强大，原本需要我们在js实现的操作，都被简化到极致，就比如循环，分支以及事件绑定。下面我们来演示下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> &
vue 监听事件 v-on使用
菜鸟逆袭之路
11-14 1019
首先最基本的点击事件    v-on:click   是可以使用@click代替  也就是说v-on可以缩写为@ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="t
如何启动Vue-cli项目中的HelloWorld.vue
06-01
可以按照以下步骤启动Vue-cli项目中的HelloWorld.vue： 1. 打开命令行工具，进入到Vue-cli项目的根目录。 2. 输入命令 `npm run serve`，启动项目的开发服务器。 3. 在浏览器中输入 `http://localhost:8080/`，访问...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我才是真的封不觉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值