简单易懂：Vue3框架三天速成（一）

最新推荐文章于 2024-04-02 17:59:26 发布
置顶 最新推荐文章于 2024-04-02 17:59:26 发布
阅读量1.9k 收藏 18
点赞数 9
分类专栏： 三天速成Vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55278347/article/details/131402514
版权

前言：学习Vue框架首先需要具备基本的HTML5、CSS3、JavaScript基础，了解基本概念以及用法再来学习Vue会事半功倍！

一、初识Vue

  • Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层， 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue2.下载链接：安装 — Vue.js

1、Vue的使用方式

1、直接下载并且通过script标签引入HTML页面

2、使用如下链接引入

 代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueTest</title>
<--引入VUE!-->
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
</body>
</html>

 

二、Vue基本语法

1、创建一个Vue App

const app=Vue.createApp({})

2、创建并将其挂载到组件（标签）

const app=Vue.createApp({})
<!--创建一个div标签-->
<div id="hello-vue"></div>
<!--将app挂载到div上-->
Vue.createApp(app).mount('hello-div')

3、返回数据并且回显到页面

data() {
return{
message：‘hello！’
  }
}

4、完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>VueTest</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue">
    <h1>{{message}}</h1>
    <br>
    <p>{{name}}</p>
</div>

<script>
    const app=Vue.createApp({
        data()
        {
            return {
                message : 'Hello!',
                name:'Vue'
            }
        }
    })
 app.mount('#hello-vue')
</script>
</body>
</html>

结果:

Tips:注意return后面的‘{’不能换行，否则会报错或者无法正常返回数据！

血的教训！！！

极其睿智且令人无语的语法规则！！

流汗黄豆.jpg

 错误示例：X

data()
{
    return
  {
    message：‘hello’
  }
}

正确示例：

data()
{
    return {
    message：‘hello’
  }
}

5、添加方法

通过在创建的app里添加methods关键字来添加对于挂载的dom对象执行的方法

如果需要对组件进行事件的绑定就可以通过methods里的方法来实现

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

三、Vue的基本指令

Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。

Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。

与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。

以下是几个常用的 Vue 指令：

指令描述
v-bind用于将 Vue 实例的数据绑定到 HTML 元素的属性上。
v-if用于根据表达式的值来条件性地渲染元素或组件。
v-showv-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。
v-for用于根据数组或对象的属性值来循环渲染元素或组件。
v-on用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。
v-model用于在表单控件和 Vue 实例的数据之间创建双向数据绑定。

除了这些常用的指令，Vue 还提供了一些其他的指令，如 v-text、v-html 等，以及自定义指令，让开发者能够更加灵活地操作 DOM 元素。

1、指令的使用示例

1、v-model

使用v-model可以实现数据的双向绑定，而不需要使用JS进行繁杂的获取组件进行更新

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueTest</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

 

因此在对于数据进行修改时，会实时的进行响应和渲染！

 2、v-bind

使用 v-bind 指令将 Vue 实例的数据绑定到 HTML 元素的属性上：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <img v-bind:src="imageSrc">
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      imageSrc: 'https://static.runoob.com/images/code-icon-script.png'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

即可实现数据的绑定！

3、v-if and v-else

使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Goodbye Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

4、v-for

使用 v-for 指令根据数组的属性值循环渲染元素或组件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app" class="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

 

5、v-on

使用 v-on 指令在 HTML 元素上绑定事件监听器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<style>
#app {
  border: dashed black 1px;
  display: inline-block;
  padding-bottom: 10px;
}

#app > button {
  display: block;
  margin: auto;
}

#lightDiv {
  position: relative;
  width: 150px;
  height: 150px;
}

#lightDiv > img {
  position: relative;
  width: 100%;
  height: 100%;
}

#lightDiv > div {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="https://static.runoob.com/images/svg/img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开/关</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false
    }
  }
})
app.mount('#app')
</script>

</body>
</html>

 实现简单的开关灯，即切换背景颜色：

6、v-show

用于显示或隐藏组件

 以下是一个使用 v-show 指令的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    <button v-on:click="showMessage = !showMessage">显示/隐藏</button>
    <p v-show="showMessage">Hello Vue!</p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      showMessage: true
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

 

点击显示和隐藏！

发文不易，恳请大佬们高抬贵手！


点赞：随手点赞是种美德，是大佬们对于本人创作的认可！


评论：往来无白丁，是你我交流的的开始！


收藏：愿君多采撷，是大佬们对在下的赞赏！

 

kook小辉的进阶
关注
  • 9
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
一个Vue前端框架使用简单实例
01-07
Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。下文是Vue的简单使用并使用nginx进行发布。 1.环境：本次实例在windows环境进行，所以首先下载windows环境下的nginx并置于相关目录下，本次实验的nginx版本为1.12.2 2.下载vue.min.js文件，这个请读者自行解决 3.创建一个简单的前端页面simple.html，并将vue.min.js和simple.html处于同一目录下，二者均处于BootStrapDemo文件下，如下图
框架学习之 Vue3
可爱不能当饭吃
12-31 688
前面我们学习了 Vue2 相关的知识，Vue3 是在 Vue2 基础上的改进，虽然现在的主流还是 Vue2，但是也不妨碍我们先学习 Vue3 Vue3 简介 1. Vue3 新特性 源码的升级 使用 Proxy 代替 defineProperty 实现响应式 重写虚拟 DOM 的实现和 Tree-Shaking 新的特性 1.Composition API(组合 API) setup 配置 ref 与 reactive watch 与 watchEffec..
【2024最新】vue3的基本使用(超详细)
接着奏乐接着舞的博客
04-02 2016
Vue 3是下一代前端框架，用最新技术提升网站速度和开发体验。它引入组合式API，让代码更灵活、易于管理。同时，优化的响应式系统和更好的TypeScript整合，确保了应用运行更流畅，开发更高效。通过创新特性如`Teleport`和`Suspense`，Vue 3让用户界面更快加载、更动态，无论项目大小，都能轻松应对。简单说，Vue 3让前端开发更前沿、更有趣。
基于vue-cli3的element-ui的一个项目的基础框架
02-25
基于vue--cli3与element搭建的基本框架，基础配置已经配置完成，可以直接写页面
让你30分钟快速掌握vue 3
Darcy的专栏
10-26 266
让你30分钟快速掌握vue 3 经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。 setup() ref() reactive() isRef() toRefs() computed() watch() LifeC..
Vue 3 框架
weixin_58448088的博客
10-29 2368
vue 3 中使用的是组合式API，组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对vue的响应式系统有更深的理解才能高效使用。相应的，他的灵活性也使得组织和重用逻辑的模式更加强大。
Vue3.0框架-基础
m0_63042689的博客
09-28 5551
第二种是class=[a,b]绑定的,a与b又在data()中与实际的class绑定，优点是可以快速绑定多个类对象。3.通过vue.createApp(kk).mount('#ha')进行类与属性方法的连接-->不需要分号结尾。3.优点在于可以快速绑定事件，直接事件--方法，并且有独立内容区，方便后续查找。1.使用v-on:click="函数名"-->直接写这个事件需要使用什么方法。-->change对应绑定设置的vue常量，期内放置了变量,数组和方法。一种是v-bind:href:"url"
vue中v-if与v-show的区别以及使用场景
RenWenJie521的博客
10-31 595
vue中v-if与v-show的区别以及使用场景 区别 1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如...
z-vue3-ui:vue3ui框架
05-06
官网文档项目介绍本项目是为了学习vue3.0而写的一个组件库，使用typescript、less可以让你快速学习vue3的新特性。项目仅供学习。（请勿在生产环境中使用）重要概念1. 数据响应式2. 组件化3. 编译4. 事件、双向绑定、...
mobileFrame:vue 移动端框架
05-14
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
vue-quill:Vue 3组件的笔管编辑器
03-21
:green_heart:使用Vue 3构建：比以前更强大，更高效的框架。 :male_sign:‍:male_sign:完全打字稿： VueQuill源代码完全用打字稿编写。 :hammer_and_wrench:易于使用：通过一个简单的API即可直接实现。 演示版 。...
vue-basic:vue2、vue3入门的简单demo，最简单的入门admin框架搭建
08-04
vue3的各种小demo集合 建议使用 yarn install 目录结构 ┌─package.json 包管理 ├─public │ ├─favicon.ico │ ├─img │ ├─index.html │ └─robots.txt 反爬虫 ├─src │ ├─App.vue │ ├─api 接口...
vue3 框架学习概念笔记
潜心
11-24 2070
在浏览器平台，渲染器可以利用DOM API完成DOM操作，为了不直接依赖浏览器，将这些操作封装为可配置的对象，用户可以在调用createRenderer函数创建渲染器的时候自定义配置对象，从而实现自定义的行为；📚vue☃️ 个人简介：一个喜爱技术的人。🌞 励志格言: 脚踏实地，虚心学习。
VUE3 框架搭建
ZengYue_D的博客
03-26 211
先配置好node.js 按顺序执行以下命令 // 安装并配置淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org/ npm config get registry https://registry.npm.taobao.org/ // 安装vue3.0脚手架创建项目 npm install @vue/cli -g
Vue速成
m0_63658876的博客
08-11 425
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库关注于视图（html），不仅易上手，还便于与第三方库或项目整合。渐进式：一步一步，不是将所有的东西都学完才能使用。自底向上设计：一种设计程序的过程和方法，就是先编写出基础程序段，然后在逐步扩大规范、补充和升级某些 功能，实际上是一种自底向上构造程序的过程。Vue.js的核心是允许采用简洁式模板语法来声明的将数据渲染进DOM的系统。...
前端框架Vue3
tainqiuer123的博客
04-09 2224
1、vue介绍 2、vue基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue3.js"></script> </head> <body> <div id="app"> <!-.
Vue 学习第三天
zq爱生活爱代码的博客
11-08 128
通过 Prop 向子组件传递数据 <divid="app1"> <br/> <br/> <br/> <br/> <br/> <br/> <componentesttitle="第一个"value="模板">&...
vue三大框架
weixin_30563917的博客
12-10 228
vue 前端三大新框架: Angular.js------Google研发 缺点： 学习成本高、最早研发 严谨 React.js facebook.com(脸书)自主研发 开源 jx语法 提升知名度 严谨 Vue.js（尤雨溪）借鉴 了Angular.js 和 React.js 的优点 中国人 （php写的 Yii框架 美籍华人） vue ...
vue3框架学习
weixin_54179751的博客
09-03 93
vscode 要运行项目的时候在内置终端先输入cd+项目名，再输入npm run serve input按钮等框的尺寸怎么设置，直接size报错 ref、响应式等是什么意思？ 进度太慢了 hbuilderx 啦啦啦 vue
写一个vue3框架的介绍
最新发布
04-08
Vue.js是一款流行的JavaScript框架，用于构建用户界面。它是一个渐进式框架，可以根据项目的需求逐步引入其功能。Vue.js的最新版本是Vue 3，它带来了许多新的特性和改进。 Vue 3的主要特点包括： 1. 更好的性能：Vue 3通过使用Proxy代理对象来实现响应式系统，提高了性能和效率。它还引入了静态树提升（Static Tree Hoisting）和基于模板的优化，进一步提升了渲染性能。 2. 更小的体积：Vue 3对代码进行了优化，使得打包后的文件更小，加载速度更快。 3. Composition API：Vue 3引入了Composition API，它允许开发者通过函数组合的方式来组织和重用逻辑代码。这使得代码更加可读、可维护，并且更容易进行单元测试。 4. TypeScript支持：Vue 3对TypeScript提供了更好的支持，包括类型推断、类型检查和编辑器提示等功能，使得开发过程更加可靠和高效。 5. 更好的工具链：Vue 3提供了一套全新的工具链，包括Vite和Vue CLI等，使得开发、调试和部署变得更加简单和快速。 总之，Vue 3是一个功能强大、高效、灵活且易于学习的框架，适用于构建各种规模的应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

kook小辉的进阶

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

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

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

打赏作者

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

抵扣说明：

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

余额充值