Vue的基础语法（初学Vue）

码农白衣2024-04-18 6:05

目录

一、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的CDNhttp://unpkg.com/vue

html 复制代码 
<!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代码地址从这里获取

html 复制代码 
<!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.初体验-动态数据

html 复制代码 
<!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.初体验-列表数据

html 复制代码 
<!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.初体验-计数器

html 复制代码 
<!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.初体验计数器（高级）

html 复制代码 
<!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.原生实现计数器

html 复制代码 
<!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属性

html 复制代码 
<!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属性

html 复制代码 
<!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>
相关推荐
崔庆才丨静觅9 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606110 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了10 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅10 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅11 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅11 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment11 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅11 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊12 小时前
jwt介绍
前端
爱敲代码的小鱼12 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03UV安装并设置国内源04openclaw配置教程（linux+局域网ollama）05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南09Vue-skills的中文文档10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南