用三个例子认识Vue

最新推荐文章于 2024-06-06 15:56:20 发布
最新推荐文章于 2024-06-06 15:56:20 发布
阅读量158 收藏
点赞数
分类专栏： Vue学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/key_cheung/article/details/107822620
版权

例1：简单展示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
    <h1>{{message}}</h1>
    <h2>hello {{name}}</h2>
</div>
<script>
    //let：定义变量（可重新赋值） & const：定义常量（不可重新赋值）
    const app = new Vue({
        el:'#app',  //用于挂载要管理的元素
        data:{      //定义数据
            message:'hello vuejs',
            name:'key'
        }
    })
</script>
</body>
</html>

展示界面：

 

例2：列表展示数据

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>列表展示</title>
  </head>
  <body>
  <script src="../js/vue.js"></script>
  <div id="app">
    <h2>{{message}}</h2>
    <ul>
        <li v-for="item in name">{{item}}</li>
    </ul>
  </div>
  <script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'welcome',
            name:['小明','小黑','小红','小白','小小','肖肖']
        }
    })
  </script>
  </body>
  </html>

展示界面：

还可以在浏览器按F12控制台修改数据：app.name.push('sean')

 

例3：计数器

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>计数器</title>
  </head>
  <body>
  <div id="app">
    <h2>当前计数：{{counter}}</h2>
    <button v-on:click="add">+</button>  
    <button v-on:click="sub">-</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add:function () {
                console.log('add被执行');
                this.counter++
            },
            sub:function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })

  </script>
  </body>
  </html>

效果展示：

Chueng_to
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快速入门的三个小实例
qq_40479190的博客
11-27 1万+
1.前言 用vue做项目也有一段时间了。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！ 1.本篇文章使用的vue版本是2.4.2，可能会和新
深入浅出 Vue 中的 key 值
高先生的猫
03-26 771
key 的一个错误使用——使用 index 作为 key 不知道你在写 v-for 的时候，会不会直接使用 index 作为它的 key 值，是的，我承认我会，不得不说，这真的不是一个好习惯。 根据上篇文章，我们还是用 sortable.js 作为例子讨论。以下是核心代码，其中 arrData 的值为 [1,2,3,4] <div id="sort"> <div v-...
vue遍历中key详解 (Demo案例）
辰兮要努力
02-19 4815
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中… 文章目录一、key序言二、key讲解三、key拓展 一、key序言 做vue项目，之前做到关于遍历数组对象找那个的数组，里面涉及到ke.
基于vue-cli、elementUI的Vue超简单入门小例子
界之边缘的轮回
03-03 5万+
- 这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 - 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my...
Vue—key的使用
Linjing127218的博客
04-24 4582
1.      用法&lt;div v-for="item in items":key="item.id"&gt;&lt;!-- 内容--&gt;&lt;/div&gt;最常见的用例是结合 v-for。2.     使用意义提高循环性能。key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试...
vue使用mammoth案例_vue快速入门的三个小实例
weixin_29266679的博客
12-23 3069
1.前言用vue做项目也有一段时间了，之前也是写过关于vue和webpack构建项目的相关文章，大家有兴趣可以去看下webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章，这是第一篇，其它几篇文章链接就不贴了)。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的...
Vue(一) 简单认识Vue
最新发布
dys000000的博客
06-06 515
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
【vue3源码】十三、认识Block
MAXLZ的博客
09-20 2408
Block是vue3中一种性能优化的手段。Block本质是一种特殊的vnode，它与普通vnode相比，多出了一个属性，这个属性中保存了所有Block子代的动态节点。Block进行patch可以直接对中的动态节点进行patch，避免了静态节点之间的比较。Block每次创建Block节点之前，需要调用openBlcok方法，创建一个新的数组赋值给，并push到blockStack的栈顶。在创建vnode的过程中如果满足一些条件，会将动态节点放到中。节点创建完成后，作为参数传入setupBlock中。
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
一个例子轻松学会Vue.js
10-20
通过实践这个例子，你可以了解并掌握Vue.js的基本操作，为进一步学习Vue.js的组件化、路由、状态管理等高级特性打下基础。 总结，Vue.js的简洁语法和强大的功能使其成为现代Web开发的热门选择。通过实例学习，特别...
vue例子，适合初学者学习使用
07-22
vue例子，适合初学者学习使用
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
vue+三维GIS地图
12-08
此实例为vue版本三维GIS地图，其中包含底图切换、图层控制、图上量算、空间分析、坐标定位、图上标绘、地图打印等功能
v-if条件判断
KEY_cheung的博客
09-02 6643
1. v-if、v-else-if和v-else 1.1 和if、else、else if效果一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "app"> <!--在标签里使用条件判断--> &...
Vue的MVVM（model、view、viewmodel）
KEY_cheung的博客
08-12 1591
MVVM模式：M（model）+ V（view）+ VM（viewmodel）与 MVC模式：M（model）、V（view）、C（controller）相类似 MVC： 用户向controller层发起请求，controller收到请求后交给model中处理再将结果返回到controller中，controller收到结果后对view进行相对应的页面渲染再反馈给用户。所有操作都在controller中进行，当用户发起大量的请求后，controller加载速度变慢，视图渲染性能降低，进而影响用户体验
在IDEA中使用Vue
KEY_cheung的博客
08-05 1156
安装vue插件：File -> Settings… 搜索vue -> 找到vue.js 下载后重启IDEA即可 创建一个新项目，将下载好的vue.js复制进去 大功告成
绑定属性
KEY_cheung的博客
08-15 437
1 v-bind基本用法，动态绑定属性，例如a元素标签的href属性，img和video元素标签的src属性。语法糖 ‘：’ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind基本使用</title> </head> <body> <div id = "app"> <a v-b...
用vue代码写一个例子
04-22
当然，我可以帮你用Vue代码编写一个非常简单的例子。以下是一个Vue组件，它可以渲染一个按钮，当点击此按钮时，会在控制台中打印一条消息。 ```vue 点击我 export default { methods: { sayHello() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值