Vue的基础语法（初学Vue）

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量1k 收藏 20
点赞数 21
分类专栏： 前端知识 Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73916603/article/details/137888175
版权

目录

一、Vue介绍

1.概念

2.关键特性和优势

二、Vue初体验

1.CDN引入

2.本地引入

3.初体验-动态数据

4.初体验-列表数据

5.初体验-计数器

6.初体验计数器（高级）

7.原生实现计数器

8.options-data属性

9.options-methods属性

一、Vue介绍

1.概念

Vue.js（通常简称为 Vue）是一款流行的开源 JavaScript 前端框架，用于构建交互式的用户界面和单页面应用程序（SPA）。Vue 的设计灵感主要来自于 Angular 和 React，但它的核心库更小巧，易于上手，并且具有更快的渲染速度。

2.关键特性和优势

  1. 简单易用：Vue 的核心库非常轻量级，学习曲线较低，使得新手和有经验的开发者都能快速上手。

  2. 响应式数据绑定：Vue 使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新，开发者无需手动操作 DOM。

  3. 组件化开发：Vue 鼓励将页面拆分成多个组件，每个组件负责自己的一部分功能，便于复用和维护，同时提高了代码的可读性和可维护性。

  4. 虚拟 DOM：Vue 使用虚拟 DOM 技术来优化页面渲染性能，通过比较虚拟 DOM 的差异，只对需要更新的部分进行实际的 DOM 操作，从而提高了页面的渲染效率。

  5. 单文件组件：Vue 支持使用单文件组件（.vue 文件）来组织代码，将模板、样式和逻辑封装在同一个文件中，便于管理和维护。

  6. 生态系统丰富：Vue 生态系统庞大而丰富，拥有大量的第三方库和插件，可以满足各种需求，例如路由管理、状态管理、UI 组件库等。

  7. 灵活性：Vue 采用了渐进式的设计理念，可以逐步引入到现有项目中，也可以作为完整的前端解决方案使用。

二、Vue初体验

1.CDN引入

vue的CDNicon-default.png?t=N7T8http://unpkg.com/vue

<!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>
    <h2>哈哈哈哈</h2>
    <p>我是内容，嚯嚯嚯</p>
    <div id="app"></div>
    <!--CDN引入-->
    <script src="http://unpkg.com/vue"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template: `<h2>Hellp World!</h2><span>呵呵呵</apan>`
        })
        // 挂载
        app.mount("#app")
    </script>
</body>
</html>

2.本地引入

首先将vue代码保存到本地

vue代码地址从这里获取

<!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"></div>
    <script src="./lib/vue.js"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template: `<h2>Hellp Vue!</h2><span>呵呵呵</apan>`
        })
        // 挂载
        app.mount("#app")
    </script>
</body>

</html>

3.初体验-动态数据

<!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"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //插值语法：{{title}}
            template:`<h2>{{message}}</h2>`,
            data:function(){
                return{
                    title:"Hello World",
                    message:"你好啊，Vue3"
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

4.初体验-列表数据

<!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"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //插值语法：{{title}}
            template: `
                <h2>电影列表</h2>
                <ul>
                    <li v-for = "item in movies">{{item}}</li>
                </ul>
            `,
            data: function () {
                return {
                    message: "你好啊，利银行",
                    movies: ["大话西游", "星际穿越", "到梦空间", "少年派", "飞驰人生", "侠岚"]
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

5.初体验-计数器

<!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"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template: `
                <h1>当前计数：{{counter}}</h1>
                <button @click="increment">+1</button>
                <button @click="decrement">-1</button>
            `,
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

6.初体验计数器（高级）

<!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>当前计数：{{counter}}</h1>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

7.原生实现计数器

<!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>
    <h1>当前计数：<span class="count"></span></h1>
    <button class="add">+1</button>
    <button class="sub">-1</button>
    <script>
        //1.获取dom
        const h1El = document.querySelector("h1")
        const countEl = document.querySelector(".count")
        const addBtnEl = document.querySelector(".add")
        const subBtnEl = document.querySelector(".sub")

        //2.定义一个变量记录数据
        let count = 100
        countEl.textContent = count
        //3.监听按钮点击
        addBtnEl.onclick = function () {
            count++
            countEl.textContent = count
        }
        subBtnEl.onclick = function () {
            count--
            countEl.textContent = count
        }
    </script>
</body>

</html>

8.options-data属性

<!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">
        <h2>{{message}}</h2>
        <button @click = "changeMessage">改变message</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data:function(){
                return{
                    message:"Hello Data"
                }
            },
            // methods : ootion api
            methods:{
                changeMessage:function(){
                    this.message = "Hello xjy"
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

9.options-methods属性

<!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>当前计数：{{counter}}</h1>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return{
                    counter:0
                }
            },
            methods:{
                increment:function(){
                    this.counter++
                },
                decrement:function(){
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>
码农白衣
关注
  • 21
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
08-22
内容概要: - 涵盖了Vue的基础知识点,如指令、方法、计算属性等 - 列出了常用的指令语法,如v-bind、v-on、v-model等 - 总结了methods、computed、watch的区别和使用场景 - 介绍了过滤器、自定义指令的定义方式 - 提到了Vue数组更新的注意事项 - 简单介绍了dayjs时间处理库 适用人群: - 刚开始学习Vue的开发者 - 想快速回顾Vue知识点的开发者 使用场景及目标: - 可以作为Vue入门知识点速查手册 - 可以用来准备Vue开发者技术面试 其他说明: - 内容比较简洁,只涵盖基础语法点,不包含组件化开发等高级内容 - 可以配合其他更为完整的Vue学习资料使用 - 笔记形式便于快速翻阅查找需要的知识点 这是一份针对Vue基础知识点的速查手册,可以帮助初学者快速回顾和掌握Vue的基础语法,也可供开发者面试前进行知识点整理。
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
Vue 基础入门
我的的博客哦
05-17 8419
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue2快速入门（一）项目环境搭建、vue基础语法
qq_46033586的博客
02-16 806
Node.js就是运行在服务端的JavaScriptNode.js的包管理工具，可以下载使用公共仓库的包，类似maven包安装分为本地安装（local）、全局安装（global）两种官网下载。
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue基础知识学习文档 完整版PDF
04-28
Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。本文将介绍Vue的基础知识，包括Vue...无论您是初学者还是有经验的开发人员，本文都将为您提供有用的信息和实用的技巧，帮助您更好地掌握Vue的基础知识。
利用Vue技术写的天气预报页面
04-02
1、利用Vue技术 2、可以在里面学习基础的Vue语法使用 3、比较适合初学者学习 4、高效的利用前端技术，进行整合。 5、没有使用javascript的繁琐的dom技术，利用Vue的数据同步能力能够更好的适应当前技术
vue初学总结(一:基础语法)
qq_38077704的博客
05-19 157
vue学习总结: 引入vue:
vue框架的简单介绍和基础语法(入门必看)
weixin_46419373的博客
04-22 2571
1、Vue的简单介绍 什么是Vue.js？ Vue（读音 /vju:/，发音类似于 view）是一套用于构建用户界面的渐进式的JavaScript框架。 Vue.js的优点： 体积小：压缩后只有33k； 更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟...
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 315
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 477
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 394
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 674
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 583
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 311
vue报错：Do not mutate vuex store state outside mutation handlers.
el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏
IT_dabai的博客
04-25 293
要求el-tree-select 的节点根据节点数据状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 278
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
Vue 组件分类、局部注册和全局注册
zsx0728的博客
04-26 359
组件分为根组件与普通组件，本文用案例介绍了局部注册和全局注册。
vue 实现 下拉触底事件
haizhuang_bu的博客
04-26 213
,
vue3.0零基础入门到实
06-21
### 回答1： Vue3.0是一款前端框架，相比于2.x版本，3.0版本提供了更好的性能和更好的类型支持。那么，如何从零入门Vue3.0呢？ 首先，需要了解一些基础概念，例如Vue实例、组件、指令和计算属性等。可以通过阅读Vue官方文档或者相关书籍进行学习。另外，熟练掌握HTML、CSS以及JavaScript等基础知识也很重要。 接着，可以通过搭建一个简单的开发环境来完成Vue3.0的入门。可以搜索相关的教程或者跟着官方文档进行安装步骤，然后创建一个Vue实例，引入一些组件和指令，最后将它们渲染到页面上。 当了解了Vue3.0的基本用法后，可以通过阅读文档和实际操作来进一步提高自己的技能水平。一些高级的特性，例如Composition API、Teleport和Suspense等，可以帮助我们更加高效地开发应用程序。 最后，通过练习和写一些小项目来巩固学习成果，例如创建一个简单的To-Do-List应用或者一个博客系统等，这样可以更好地掌握Vue3.0的相关知识和技巧。 综上所述，Vue3.0的零基础入门需要掌握一些基础知识、搭建开发环境、了解基本用法、学习高级特性和练习实践等步骤，通过不断地探索和实践，可以更加深入地了解并掌握Vue3.0的技术。 ### 回答2： Vue 3.0 是一个开源的 JavaScript 框架，用于构建现代化的 Web 应用和单页面应用。如果您是一个零基础的入门者，现在学习 Vue 3.0 并不会太难，以下是一些入门技巧： 第一步，需要了解 Vue 3.0 的基础概念和语法。Vue 入门者需要了解 Vue CLI、Vue 组件、Vue 模板、指令、插件等基础概念。同时，需要使用 web 开发技术，如 HTML、CSS 等，并能够熟练使用 JavaScript。 第二步，您可以通过阅读官方文档或参加在线教学平台来进行学习。对于初学者，Vue 3.0 官方文档提供了基础特性、组件、Api、路由、状态管理、插件等信息。此外，优质的教学网站也是一个好的选择。 第三步，您可以开始进行实践项目。这些项目可以是基于 Vue 3.0 的 ToDo 应用程序、新闻客户端、简单的博客等。这些应用可以将概念与实践相结合，以加深您对 Vue 3.0 的理解。 第四步，加入开发社区并与开发者互动交流。开源社区比较活跃，您可以参与到其中，通过问答、发表评论、提出问题等方式得到帮助和学习经验。 最后，Vue 3.0 由于其易于学习和使用而受到了开发者的喜爱。只要您学习基础知识和实践经验，并成为 Vue 3.0 开发社区中的一员，那么在未来的开发实践中，您将会收获很多成果。 ### 回答3： Vue.js是一款简单易用、高效灵活的JavaScript框架。它被广泛应用于前端开发，不仅可以用于构建单页应用和复杂的Web应用程序，还可以用于构建管理面板、后台系统等。 Vue.js 3.0是Vue.js框架的最新版本，它带来了一些令人兴奋的新特性，包括更少的内存消耗、更快的运行速度和更好的类型推断。下面是一些零基础入门Vue.js 3.0的步骤： 1.准备环境 在开始使用Vue.js 3.0之前，您需要在计算机上安装Node.js和npm。然后，您可以使用npm安装Vue.js 3.0的CLI。 2.创建Vue.js应用程序 使用Vue.js CLI创建一个新的Vue.js应用程序。使用以下命令： vue create my-project 这条命令将创建一个新的Vue.js项目。 3.学习Vue.js基础知识 Vue.js是一种基于组件的框架，它允许您将复杂的应用程序拆分成多个小部件。了解Vue.js的基础知识非常重要，包括模板、组件、数据绑定和事件处理程序等。 4.编写组件 编写组件是Vue.js应用程序开发的核心。您可以使用Vue.js的组件系统来创建可重用的组件，并将它们组合成一个完成的应用程序。 5.使用Vue.js的路由器 Vue.js的路由器系统可以帮助您管理应用程序中的不同视图和组件之间的导航。学习使用Vue.js的路由器非常重要。 总之，Vue.js是一款易于学习和使用的前端开发框架。通过学习Vue.js的基础知识、编写组件、使用路由器和其他相关技术，您可以轻松地创建可重用的Vue.js应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值